目标：固定顶部或者左侧导航，点击导航动态更新中间content区域的页面，也就是在放一个div在页面上，把html加载到div里，以前类似的实现都是通过Iframe或者js实现，在使用springboot+thymeleaf后，以前的办法有点过时。

步骤一：

添加依赖

<dependency>
        <groupId>nz.net.ultraq.thymeleaf</groupId>
        <artifactId>thymeleaf-layout-dialect</artifactId>
</dependency>

步骤二：确定最外层模板，就是导航框架什么的，这里是index.html

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"
      xmlns:layout="http://www.ultraq.net.nz/web/thymeleaf/layout" ------->关键的命名空间
      xmlns="http://www.w3.org/1999/xhtml"
      lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="/css/bootstrap.min.css" th:href="@{/css/bootstrap.min.css}"></link>
    <!--jquery要放在前面-->
    <script src="/js/jquery-3.3.1.min.js" th:src="@{/js/jquery-3.3.1.min.js}"></script>
    <script src="/js/bootstrap.min.js" th:src="@{/js/bootstrap.min.js}"></script>
    <title>index</title>
</head>
<body>

<nav id="myNav" class="navbar navbar-default" role="navigation">
    <div class="container">
        <!-- Brand and toggle get grouped for better mobile display -->
        <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="#">
                <img  alt="Brand" th:src="@{/img/arrow_right.png}" width="20" height="20">
            </a>

</div>

<!-- Collect the nav links, forms, and other content for toggling -->
        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
            <ul class="nav navbar-nav" id="mytab">
                <li class="active"><a href="#">客户数量 <span class="badge">1545</span> <span class="sr-only">(current)</span></a></li>
                <li><a href="#">首页</a></li>
                <li class="dropdown">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">客户管理 <span class="caret"></span></a>
                    <ul class="dropdown-menu">
                        <li><a th:href="@{/customer/list}">客户列表</a></li>
                        <li><a th:href="@{/customer/add}">添加客户</a></li>
                        <li><a href="#">Something else here</a></li>
                        <li role="separator" class="divider"></li>
                        <li><a href="#">Separated link</a></li>
                        <li role="separator" class="divider"></li>
                        <li><a href="#">One more separated link</a></li>
                    </ul>
                </li>
            </ul>
            <form class="navbar-form navbar-left">
                <div class="form-group">
                    <input type="text" class="form-control" placeholder="Search" >
                </div>
                <button type="submit" class="btn btn-default">Submit</button>
            </form>
            <ul class="nav navbar-nav navbar-right" id="mytab2">
                <button type="button" class="btn btn-default navbar-btn">Sign in</button>
                <p class="navbar-text navbar-right">Signed in as <a href="#" class="navbar-link">Mark Otto</a></p>
                <li><a href="#">Link</a></li>
                <li><a href="#">Link</a></li>
                <li class="dropdown">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
                    <ul class="dropdown-menu">
                        <li><a href="#">Action</a></li>
                        <li><a href="#">Another action</a></li>
                        <li><a href="#">Something else here</a></li>
                        <li role="separator" class="divider"></li>
                        <li><a href="#">Separated link</a></li>
                    </ul>
                </li>
            </ul>
        </div><!-- /.navbar-collapse -->
    </div><!-- /.container-fluid -->
</nav>

<div class="container" layout:fragment="content">
        这里就是放内容的地方
</div>

<script>
    $(function () {
        $("#mytab li").click(function (e) {
            $(this).tab("show");
    });
    })
</script>
</body>
</html>

步骤三：放入的页面，这里是list.html

<!DOCTYPE html>
<html lang="en"
      xmlns:th="http://www.thymeleaf.org"
      xmlns:layout="http://www.ultraq.net.nz/web/thymeleaf/layout"
      xmlns="http://www.w3.org/1999/xhtml"
      layout:decorator="index"  -->这里是关键，指向index.html页面
>

<head>
    <meta charset="UTF-8"/>
    <title>List</title>
<!--在index模板中已经引入，div具备继承性-->
<!--<link rel="stylesheet" href="/css/bootstrap.min.css" th:href="@{/css/bootstrap.min.css}"></link>-->
<!--jquery要放在前面-->
<!--<script src="/js/jquery-3.3.1.min.js" th:src="@{/js/jquery-3.3.1.min.js}"></script>-->
<!--<script src="/js/bootstrap.min.js" th:src="@{/js/bootstrap.min.js}"></script>-->
</head>
<body>
<div layout:fragment="content"> -->这里指向index.html里的<div class="container" layout:fragment="content">，替换里面内容
    <table class="table table-hover table-striped table-bordered">
        <thead>
        <tr>
            <th>#</th>
            <th>filesNo</th>
            <th>customerName</th>
            <th>agreementNum</th>
            <th>agreementMoney</th>
            <th>inRoomNum</th>
            <th>Edit</th>
            <th>Delete</th>
        </tr>
        </thead>
        <tbody>
        <tr  th:each="customer : ${customers}">
            <th scope="row" th:text="${customer.id}">1</th>
            <td th:text="${customer.filesNo}">neo</td>
            <td th:text="${customer.customerName}">Otto</td>
            <td th:text="${customer.agreementNum}">6</td>
            <td th:text="${customer.agreementMoney}">6</td>
            <td th:text="${customer.inRoomNum}">6</td>
            <td><a th:href="@{/toEdit(id=${customer.id})}">edit</a></td>
            <td><a th:href="@{/delete(id=${customer.id})}">delete</a></td>
        </tr>
        </tbody>
    </table>
    <div class="container form-group">
        <div class="col-sm-2 control-label">
            <a href="/customer/add" th:href="@{/customer/add}" class="btn btn-info">add</a>
        </div>
    </div>
</div>

</body>
</html>

再加一个add.html页面

<!DOCTYPE html>
<html lang="en"
      xmlns:th="http://www.thymeleaf.org"
      xmlns:layout="http://www.ultraq.net.nz/web/thymeleaf/layout"
      xmlns="http://www.w3.org/1999/xhtml"
      layout:decorator="index"
>

<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div layout:fragment="content">
    add!!!
</div>
</body>
</html>

使用thymeleaf实现div中加载html的更多相关文章

  1. 如何在HTML中加载Flash(2种实现方法)_HTML/Xhtml_网页制作

    点评:如何在HTML中加载Flash,为网页添加更多的色彩,普通的网页以无法满足用户的需求,接下来为大家介绍下2种在HTML中加载Flash的方法,感兴趣的各位可以适当参考下,希望对你有所帮助 第一种 ...

  2. 在内存中加载DLL

    有个需求是把一个DLL作为数据打包到EXE中,运行的时候动态加载.但要求不是释放出来生成DLL文件加载. 花了一天时间做出来.效果还可以. 不过由于是直接分配内存加载DLL的.有一些小缺陷.例如遍历进 ...

  3. easyui学习笔记8—在手风琴中加载其他的页面

    在手风琴中加载其他页面和在表格中加载其他的页面有写类似的,就是请求另外一个页面显示数据. 1.先看看引用的资源文件 <link rel="stylesheet" href=& ...

  4. 从内存中加载并启动一个exe

    windows似乎只提供了一种启动进程的方法:即必须从一个可执行文件中加载并启动.而下面这段代码就是提供一种可以直接从内存中启动一个exe的变通办法.用途嘛, 也许可以用来保护你的exe,你可以对要保 ...

  5. xBIM 实战02 在浏览器中加载IFC模型文件并设置特效

    系列目录    [已更新最新开发文章,点击查看详细]  在模型浏览器中加载模型后,可以对模型做一些特殊操作.下图是常用的设置. 都是通过 xbim-viewer.js 中的 API 来设置以达到一定的 ...

  6. xBIM 实战01 在浏览器中加载IFC模型文件

    系列目录    [已更新最新开发文章,点击查看详细]  一.创建Web项目 打开VS,新建Web项目,选择 .NET Framework 4.5  选择一个空的项目 新建完成后,项目结构如下: 二.添 ...

  7. 使用 pdf.js 在网页中加载 pdf 文件

    在网页中加载并显示PDF文件是最常见的业务需求.例如以下应用场景:(1)在电商网站上购物之后,下载电子发票之前先预览发票.(2)电子商务管理系统中查看发布的公文,公文文件一般是PDF格式的文件. 目前 ...

  8. 在Vue项目中加载krpano全景图

    在Vue-cli项目中做krpano全景图编辑器的时候,由于js插件的路径是动态的,做的过程中遇到了加载不到资源的难题,在网上搜索了好久也没找到合适的办法,最后想到了可能是JS加载的问题,于是解决了问 ...

  9. C#开发BIMFACE系列37 网页集成开发1：审图系统中加载模型或图纸

    系列目录     [已更新最新开发文章,点击查看详细] 在之前的<C#开发BIMFACE系列>中主要介绍了BIMFACE平台提供的服务端API接口的封装开发与测试过程. 服务端API测试通 ...

随机推荐

  1. 全局脚手架了解一下【fle-cli】

    本文来自网易云社区 介绍 fle-cli旨在帮助我们从复杂繁琐的编译配置中解放出来,全身心地投入业务开发中,提高开发效率. 它是真正意义上的全局脚手架,区别于市面上其他的全局脚手架,它不会在项目工程中 ...

  2. yarn 原理

    产生背景 直接源于MRv1在几个方面的缺陷 扩展性受限(NameNode,JobTracker设计为单一节点,内存容量有限) 单点故障 难以支持MR之外的计算 slot数目无法动态修改,Map slo ...

  3. 「日常训练」Skills（Codeforce Round #339 Div.2 D）

    题意(CodeForces 614D) 每个人有\(n(n\le 10^5)\)个技能,技能等级都在\([0,10^9]\)的范围,每个技能有一个当前等级,所有技能的最高等级都为A.一个人的力量被记做 ...

  4. MaxScript代码补全插件

    MaxScript代码补全插件 作者Nik,原文发布于ScriptSpot 安装后max自带脚本编辑器会有自动补全,效果如下:

  5. BehaviorDesigner学习

    行为树: 行为树设计师插件是一个专门为unity设计的AI插件. 学习用!!!插件地址:链接:http://pan.baidu.com/s/1dF2okPN 密码:b43m 通过继承Behavior中 ...

  6. 【机器学习】多项式回归python实现

    [机器学习]多项式回归原理介绍 [机器学习]多项式回归python实现 [机器学习]多项式回归sklearn实现 使用python实现多项式回归,没有使用sklearn等机器学习框架,目的是帮助理解算 ...

  7. @ConfigurationProperties注解对数据的自动封装

    @ConfigurationProperties注解对数据的自动封装 @ConfigurationProperties可以对基本数据类型实现自动封装,可以封装格式为yyyy/MM/dd的日期 测试代码 ...

  8. Redis 错误摘记篇

    yum安装的redis提示如下报错,大概意思就是配置文件和redis-server进程文件版本不一致.. [root@vm-10-104-28-24 yum.repos.d]# redis-serve ...

  9. 左值&右值

    一.引子 我们所谓的左值.右值,正确的说法应该是左值表达式.右值表达式. 因为C++的表达式不是左值就是右值. 在C中,左值指的是既能够出现在等号左边也能出现在等号右边的表达式,右值指的则是只能出现在 ...

  10. 团队选题报告(i know)

    一.团队成员及分工 团队名称:I know 团队成员: 陈家权:选题报告word撰写 赖晓连:ppt制作,原型设计 雷晶:ppt制作,原型设计 林巧娜:原型设计,博客随笔撰写 庄加鑫:选题报告word ...