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. Oracle ADF 开发必读

    MARK:http://www.oracle.com/technetwork/cn/articles/adf/index-086064-zhs.html 第 1 部分- 借助 Subversion 进 ...

  2. Android 高逼格纯代码实现类似微信钱包带分割线的GridView

    前言    原文地址:http://blog.csdn.net/sk719887916/article/details/40348837: Tamic 通过上两篇关于自定view的文章,在自定义vie ...

  3. hadoop分布式安装部署详细视频教程(网盘附配好环境的CentOS虚拟机文件/hadoop配置文件)

    参考资源下载:http://pan.baidu.com/s/1ntwUij3视频安装教程:hadoop安装.flvVirtualBox虚拟机:hadoop.part1-part5.rarhadoop文 ...

  4. 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 ...

  5. python socketserver框架解析

    socketserver框架是一个基本的socket服务器端框架, 使用了threading来处理多个客户端的连接, 使用seletor模块来处理高并发访问, 是值得一看的python 标准库的源码之 ...

  6. Jquery Easing函数库

    从jQuery API 文档中可以知道,jQuery自定义动画的函数.animate( properties [, duration] [, easing] [, complete] )有四个参数: ...

  7. 高并发教程-基础篇-之nginx负载均衡的搭建

    温馨提示:请不要盲目的进行横向扩展,优先考虑对单台服务器的性能优化,只有单台服务器的性能达到最优化之后,集群才会被最大的发挥作用. 一.架构图: 服务器准备:3台,ubuntu16.04系统maste ...

  8. oracle to_date 函数

    update pamsodt0p10 set cursysdate =  to_date('2014-12-29 00:00:00','yyyy-mm-dd hh24:mi:ss') where cu ...

  9. codechef Killing Monsters

    题目大意:大厨正在玩一个打怪兽的小游戏.游戏中初始时有 n 只怪兽排成一排,从左到右编号为 0 ∼ n − 1.第 i 只怪兽的初始血量为 hi,当怪兽的血量小于等于 0 时,这只怪兽就挂了. 大厨要 ...

  10. Tornado、Bottle以及Flask

    最近接手一个Tornado项目代码,项目要在原有基础上做很大扩展,为了更好地吃透并扩展好这个项目,就对Tornado以及比较轻型的Bottle.Flask这些框架一一作了调研.其实若干年前做第一个Py ...