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. Linux - Bash shell的功能；内建命令type

    命令编修能力 (history): bash 的功能里头,相当棒的一个就是『他能记忆使用过的命令!』 这功能真的相当的棒!因为我只要在命令列按『上下键』就可以找到前/后一个输入的命令!而在很多 dis ...

  2. 【50】java 匿名内部类剖析

    匿名内部类介绍: 匿名内部类也就是没有名字的内部类 正因为没有名字,所以匿名内部类只能使用一次,它通常用来简化代码编写 但使用匿名内部类还有个前提条件:必须继承一个父类或实现一个接口 匿名内部类的声明 ...

  3. leetcode之旅（10）-Roman to Integer

    题目描述: Given a roman numeral, convert it to an integer. Input is guaranteed to be within the range fr ...

  4. linux下64位汇编的系统调用(1)

    现在基本上系统都是64位了,而64位系统下的汇编和32位有了较大的变化,无论是系统调用的接口还是C标准库的接口都和32位汇编有所不同:下面简单谈一下在64位linux下如何利用汇编直接调用系统调用. ...

  5. <<操作系统精髓与设计原理>>读书笔记(一) 并发性:互斥与同步（1）

    <<操作系统精髓与设计原理>>读书笔记(一) 并发性:互斥与同步 并发问题是所有问题的基础,也是操作系统设计的基础.并发包括很多设计问题,其中有进程间通信,资源共享与竞争,多个 ...

  6. linux系统安装mysql数据库

    1.首先关闭linux的防火墙,执行命令 chkconfig iptables off 2.从mysql官网上下载自己适合的mysql版本https://dev.mysql.com/downloads ...

  7. CDH安装系统环境准备——系统版本和安装包下载地址指南

    由于Hadoop深受客户欢迎,许多公司都推出了各自版本的Hadoop,也有一些公司则围绕Hadoop开发产品.在Hadoop生态系统中,规模最大.知名度最高的公司则是Cloudera.接下来的日子里, ...

  8. javaScript(6)---流程控制语句

    学习要点: 1.语句的定义 2.if 语句 3.switch语句 4.do...while语句 5.while语句 6.for语句 7.for...in语句 8.break和continue语句 9. ...

  9. java基础语法（一）

    java基础语法(一) 1.类是一种抽象的概念,对象是类的一种具体表示形式,是具体的概念.先有类,然后由类来生成 对象(Object).对象又叫做实例(Instance). 2.类由两大部分构成:属性 ...

  10. 企业级web负载均衡完美架构

    转载:揭秘企业级web负载均衡完美架构(图) 2010-07-06 15:16 抚琴煮酒 51CTO.com 字号:T | T 相信很多朋友对企业级的负载均衡高可用实例非常感兴趣,此篇文章根据成熟的线 ...