[Springboot] 이전글 다음글 없을 시 클릭 막기 [39]

SpringBoot  ·  intelliJ  · OracleDB  ·  Thymeleaf 

---

 

[Springboot] 이전글 다음글 만들기 [30] (tistory.com)

[Springboot] 이전글 다음글 만들기 [30]

 

지난 게시글에서 이전글 다음글 만들기 했었다.

구현 후 수정 해야할 점이 있었는데, 

이전글과 다음글이 없을 때 에러가 뜨는 점이 아쉬웠다.

 

이번 글에서는, 이전글과 다음글이 없을때 버튼이 눌리지 않게 코드를 개선한 것을 정리 할 것이다.

 

 

 

question_detail.html 

    <table class="table-PreNext">
        <tr>
            <td width="50px" style="font-weight: bolder" class="KOTRA-fontsize-100">이전글</td>
            <td><a th:href="@{|/question/detail/${prevID}|}"
                   th:classappend="${prevID == '0'} ? 'disabled'"
                   th:text="*{prevSub}" class="KOTRA-fontsize-100"></a></td>
        </tr>
        <tr>
            <td width="50px"  style="font-weight: bolder" class="KOTRA-fontsize-100">다음글</td>
            <td><a th:href="@{|/question/detail/${nextID}|}"
                   th:classappend="${nextID == '0'} ? 'disabled'"
                   th:text="*{nextSub}" id="nextSUB"
                   class="KOTRA-fontsize-100"></a></td>
        </tr>
    </table>

 

 

위 사이트 소스와, 전에 포스팅했던 [이전글 다음글 만들기] 게시글에서 확인 할 수 있듯

이전글과 다음글이 없을때, prevID와 nextID는 0값이다.

 

그러므로,

 th:classappend를 통해 prevID와 nextID값이 0일때, disabled라는 클래스를 추가해주었다.

th:classappend 
타임리프에서 동적으로 클래스를 추가하는 방법

타임리프의 th:classappend="조건식 ? 클래스값" 속성은
조건식이 참인 경우 클래스값을 class 속성에 추가한다.

 

.disabled{
    cursor: not-allowed;
    pointer-events: none;
}

.disabled css 설정부분이다.

cursor과, pointer-event를 없애서 클릭하지 못하게 막아놓았다.