반응형

 

Thymeleaf Layout Dialect 사용하지 않고 left 메뉴를 분리처리

 

thymeleaf-layout-dialect 를 만든 이유가 분명 있지만... 사용할 수 없는 환경에서 th:block을 이용하여 아래와 같이 처리

 

디렉토리 구조

 

 

-- resouces

  -- static

    -- css

      style.css

  -- templates

    main.html

    head.html

    left.html

 

 

- main.html

<html>

  <th:block th:include="head"></th:block>

  <body>

    <th:block th:include="left"></th:block>

    Main화면~~~

  <body>

</html>

 

- head.html

<head>

  <title>Title</title>

  <link ref="stylesheet" th:href="@{/css/style.css}">

</head>

 

- left.html

<div>

  <ul>

    <li>메뉴1</li>

    <li>메뉴2</li>

  </ul>

</div>

 

 




"이 포스팅은 쿠팡 파트너스 활동의 일환으로, 이에 따른 일정액의 수수료를 제공받습니다."

반응형
LIST
반응형

* a href 다이나믹 경로 설정

- 데이터

{"menu": {

  "name":"한식"

  , "code":"KR"

  }

}

- 코드

  <a th:text="${menu.name}" th:href="@{/menu/} + ${menu.code}"></a>

    또는

  <a th:text="${menu.name}" th:href="@{/menu/{code}(code=${menu.code})}"></a>

 

>> '/menu/kr' 로 이동

 

 

* a href Get 파라미터 설정

- 데이터

{"menu": {

  "name":"한식"

  , "code":"KR"

  }

}

- 코드

  <a th:text="${menu.name}" th:href="@{/menu(code=${menu.code})}"></a>

>> '/menu?code=kr' 로 이동

 

 

* a href onclick 사용

- 데이터

{"menu": {

  "name":"한식"

  , "code":"KR"

  }

}

- 스크립트

<script>

  function goMenu(url) {

    document.location.href=url;

  }

</script>

- 코드

  <a th:text="${menu.name}" href="javascript:void(0)" th:onclick="'goMenu(\'' + @{/menu(code=${menu.code})} + '\')'"></a>

>> '/menu?code=kr' 로 이동

 




"이 포스팅은 쿠팡 파트너스 활동의 일환으로, 이에 따른 일정액의 수수료를 제공받습니다."

반응형
LIST

+ Recent posts

티스토리툴바