Thymeleaf利用layout.html檔案生成頁面佈局框架

developerguy發表於2017-06-19
HTML框架

1.layout.html檔案 生成佈局

<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org"
    xmlns:layout="http://www.ultraq.net.nz/web/thymeleaf/layout">
<head>

    <meta charset="utf-8" />
    <title>首頁</title>
    <meta http-equiv="X-UA-Compatible" content="IE=Edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />

    <!-- bootstrap -->
    <link rel="stylesheet" href="../../static/bootstrap/3.3.5/css/bootstrap.min.css" 
        th:href="@{/bootstrap/3.3.5/css/bootstrap.min.css}" />

    <style type="text/css"> 
        body{
            font-family:微軟雅黑;
            font-size:14px;
        }
    </style>    

</head>

<body>
    <div th:fragment="topnav">
    <nav class="navbar navbar-default" style="background: none repeat scroll 0 0 #394755;color:#fff;height:60px;">
    <div class="container-fluid">
      <!-- Brand and toggle get grouped for better mobile display -->
       <div class="navbar-header" style="margin-right:20%;">
          <a class="navbar-brand" href="/mainframe" style="color:#fff;">測試&系統</a>
       </div>


        <!-- 退出 -->       
        <a class="navbar-brand" href="#" style="color:#fff;float:right;" onclick="javascript:safeLogoutFun();">退出</a>

       <!-- 歡迎語 -->
       <div class="navbar-brand" style="margin-right:30px;font-size:15px;float:right;color:#f5d313;">
                    歡迎您,<span th:text="${session.LoginUser.user_name}">親愛的使用者</span>  現在是
           <span id="time"></span>
             <script th:inline="javascript">
                  /*<![CDATA[*/
                    function setTime(){
                     var dt=new Date();
                     var arr_week=new Array("星期日","星期一","星期二","星期三","星期四","星期五","星期六");
                     var strWeek=arr_week[dt.getDay()];
                     var strHour=dt.getHours();
                     var strMinutes=dt.getMinutes();
                     var strSeconds=dt.getSeconds();
                     if (strMinutes<10) strMinutes="0"+strMinutes;
                     if (strSeconds<10) strSeconds="0"+strSeconds;
                     var strYear=dt.getFullYear()+"年";
                     var strMonth=(dt.getMonth()+1)+"月";
                     var strDay=dt.getDate()+"日";
                     var strTime=strHour+":"+strMinutes+":"+strSeconds;
                     time.innerHTML=strYear+strMonth+strDay+" "+strTime+"  "+strWeek;   
                    }
                    setInterval("setTime()",1000);


                    //20151013  安全退出
                    function safeLogoutFun(){
                        if(confirm("確定需要退出嗎？")){
                            $.ajax({
                                type: "POST",
                                url: "safeLogout",
                                dataType: "json",
                                error:function(){
                                    alert("退出失敗");
                                },
                                success: function(responseInfo)
                                {
                                    //
                                    if(responseInfo.status == 0){
                                         window.location.replace("index"); 
                                         //window.event.returnValue = false;//取消預設事件的處理
                                    }

                                    //
                                    if(responseInfo.status == 1){
                                        alert("退出失敗");
                                    }
                                }
                            });//end ajax
                        }//end if confirm
                    }
                /*]]>*/
            </script> 
       </div>

     </div>
  </nav>
  </div> <!-- 導航條 -->

  <div layout:fragment="content"></div>

  <!-- put the scripts below -->
  <script src="../../static/jquery/2.1.4/jquery-2.1.4.min.js"
        th:src="@{/jquery/2.1.4/jquery-2.1.4.min.js}"></script>
  <script src="../../static/bootstrap/3.3.5/js/bootstrap.min.js"
        th:src="@{/bootstrap/3.3.5/js/bootstrap.min.js}"></script>

</body>

</html>

2.之後頁面可套用此佈局模式，重寫<div layout:fragment = “content”>元素，css檔案和js檔案均可繼承

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"
    xmlns:layout="http://www.ultraq.net.nz/web/thymeleaf/layout"
    layout:decorator="base/layout">
    <!-- layout檔案路徑-->

<head>
    <meta charset="utf-8" />
    <title>首頁</title>
    <meta http-equiv="X-UA-Compatible" content="IE=Edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />

</head>

<body>
  <div layout:fragment="content" style="width:96%;margin-left:auto;margin-right:auto;">
    <div style="font-size:18px;">
                 測試thymeleaf layout佈局 模式套用
         js css 全部繼承自layout
         content 因頁面不同而不同
     </div>

     <div style="margin:20px;">
     </div>

     <div style="font-size:16px;margin:20px 0px;">
           <a href="/tools/editTable1" target="_blank">可編輯表格外掛一測試</a>
     </div>
     <div style="font-size:16px;">
           <a href="/tools/editTable2" target="_blank">可編輯表格外掛二測試</a>
     </div>
<script src="../../static/jquery/2.1.4/jquery-2.1.4.min.js"
        th:src="@{/jquery/2.1.4/jquery-2.1.4.min.js}"></script>
  <script src="../../static/bootstrap/3.3.5/js/bootstrap.min.js"
        th:src="@{/bootstrap/3.3.5/js/bootstrap.min.js}"></script>
<script src = "../../static/js/security/mainframe.js"
            th:src="@{/js/security/mainframe.js}"></script>

  </div>
  <!-- 編輯表格 -->

</body>

</html>

這裡若子頁面中單獨引入js檔案，如這裡的mainframe.js, 需將引用的其他js檔案全部寫到此js前面，即使是用到了layout.html中已經引用的jQuery.js檔案，也需要將其重新再引入一遍，並且必須將js檔案寫進<div layout:fragment = “content”> 元素內，否則會出錯。

 http://blog.csdn.net/xyr05288/article/details/51067009

 


相關文章