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

Thymeleaf利用layout.html文件生成页面布局框架的更多相关文章

  1. extjs layout 最灵活的页面布局样式

    当你在页面布局的时候,遇到页面元素较多,不知如何完美布局... 可以试试下面这个类型,万能布局类型. var panel = new Ext.Panel({ renderTo:Ext.getBody( ...

  2. 利用代码生成工具Database2Sharp生成ABP VNext框架项目代码

    我们在做某件事情的时候,一般需要详细了解它的特点,以及内在的逻辑关系,一旦我们详细了解了整个事物后,就可以通过一些辅助手段来提高我们的做事情的效率了.本篇随笔介绍ABP VNext框架各分层项目的规则 ...

  3. 使用 Apache Tiles 3 构建页面布局

    参考博客:http://aiilive.blog.51cto.com/1925756/1596059Apache Tiles是一个JavaEE应用的页面布局框架.Tiles框架提供了一种模板机制,可以 ...

  4. 如何在ASP.NET Web站点中统一页面布局[Creating a Consistent Layout in ASP.NET Web Pages(Razor) Sites]

    如何在ASP.NET Web站点中统一页面布局[Creating a Consistent Layout in ASP.NET Web Pages(Razor) Sites] 一.布局页面介绍[Abo ...

  5. Magento布局layout.xml文件详解

    解析顺序 布局xml文件一般位于app/design/{area}/{package}/{theme}/layout/目录下.Layout文件一般包含block.reference.action三种标 ...

  6. BootStrap母版页布局.子页面布局.BootstrapTable.模态框.警告框.html导出tabl生成Excel.HTML生成柱图.饼图.时间控件中文版

    如上就是很多后台管理系统的母版页布局. 左边一列模板.上面一列系统标识. 空白处充填子页面 以ASP.NET MVC为基础 引入bootstrap.js.bootstrap.css body: < ...

  7. 前端框架 EasyUI （2）页面布局 Layout

    在 Web 程序中,页面布局对应用程序的用户体验至关重要. 在一般的信息管理类的 Web 应用程序中,页面结构通常有一个主工作区,然后在工作区上下左右靠近边界的区域设置一些边栏,用于显示信息或放置一些 ...

  8. 无废话ExtJs 入门教程十六[页面布局：Layout]

    无废话ExtJs 入门教程十六[页面布局:Layout] extjs技术交流,欢迎加群(201926085) 首先解释什么是布局: 来自百度词典的官方解释:◎ 布局 bùjú: [distributi ...

  9. 利用oxygen编辑并生成xml文件，并使用JAVA的JAXB技术完成xml的解析

    首先下载oxygen软件(Oxygen XML Editor),目前使用的是试用版(可以安装好软件以后get trial licence,获得免费使用30天的权限,当然这里鼓励大家用正版软件!!!) ...

随机推荐

  1. C语言之多线程机制(程序可以同时被执行而不会相互干扰)

    接触过linux的人或多或少知道,linux有多线程的机制,也就是说程序可以同时执行,不受干扰,关于这个在我以前的博文里有过类似模拟的时间片轮转程序,跟这个其实是类似的.其实在window上,线程的头 ...

  2. DB Query Analyzer 5.03 is distributed, EXCEL table name will be enclosed in square bracket

      DB Query Analyzer 5.03 is distributed, table name will be enclosed in square bracket automatically ...

  3. javascript中的in运算符

    in运算符希望它的左操作数是一个字符串或可以转换为字符串,希望他的又操作数是一个对象:如果右侧对象拥有一个名为左操作数值的属性名,那么表达式返回true: var point = {x:1,y:1}; ...

  4. RecyclerView 与 Scrollview 搭配使用的两个坑

    RecyclerView & Scrollview & wrap_content RecyclerView wrap_content 用android.support.v4.widge ...

  5. Mac Finder 里新建文本

    Mac Finder 里新建文本 首先吐槽下 Mac 的文件管理 Finder 真的是太弱了,之前没感觉 Windows 的资源管理器多厉害,但是和 Mac 的比起来真是堪称神器啊,果然牛逼与否还的看 ...

  6. Python 3.7 将引入 dataclass 装饰器

    简评:Python 3.7 将于今年夏天发布,Python 3.7 中将会有许多新东西,最激动人心的新功能之一是 dataclass 装饰器. 什么是 Data Class 大多数 Python 开发 ...

  7. SpringMVC:数据绑定入门(-)

    1.数据类型,可以绑定基本数据类型,如int age,或者包装类型如:Integer age; 两者的区别:int 类型时,必填该参数,Integer 可以为空. 2.绑定数组 , 3.绑定对象. 3 ...

  8. 关于如何通过kali linux 攻击以及破解WPA/WPA2无线加密

    http://blog.csdn.net/wingstudio_zongheng/article/details/51435212 1.前期准备 1)打开一个终端  执行命令: ifconfig   ...

  9. Angular5的new feature

    https://blog.angular.io/version-5-0-0-of-angular-now-available-37e414935ced Version 5.0.0 of Angular ...

  10. Google揭开Mesa的神秘面纱——一个具备跨地域复制和近实时特性的可伸缩数据仓库

    http://www.infoq.com/cn/news/2014/08/google-data-warehouse-mesa Google发表了一篇新的论文,该论文描述了他们内部所使用的一个被称为M ...