Thymeleaf利用layout.html文件生成页面布局框架
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Thymeleaf利用layout.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"> 元素内，否则会出错。
以上是关于Thymeleaf利用layout.html文件生成页面布局框架的主要内容，如果未能解决你的问题，请参考以下文章
如何将布局方言添加到spring-boot thymeleaf自动配置文件