目标：固定顶部或者左侧导航，点击导航动态更新中间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. 【费元星】crt 无法上传文件，总是显示盾牌表示-完美解决

    将如下内容保存到文件中,已.bat 结尾 taskkill /f /im explorer.exeattrib -s -r -h "%userprofile%\AppData\Local\i ...

  2. MAC 更新brew 镜像源

    mac 更新brew镜像源 cd "$(brew --repo)/Library/Taps/homebrew/homebrew-core" git remote set-url o ...

  3. iOS UIWebView加载时添加进度条01

    标注:此框架仅适合UIWebView  对iOS8后新出的WKWebView不适用,当然,你可以尝试修改框架里的几个代理方法. 框架是:NJKWebViewProgress 导入头文件 #import ...

  4. 初识c++模板元编程

    模板元编程(Template metaprogramming,简称TMP)是编译器内执行的程序,编译器读入template,编译输出的结果再与其他源码一起经过普通编译过程生成目标文件.通俗来说,普通运 ...

  5. java中i=i++的解析

    int i = 0; i = i++; //答案是0 System.out.println(i); 执行以上代码,奇怪的是打印出来i的结果是0,说简单点,i++是一个表达式,是有返回值的,返回的是自增 ...

  6. 使用advanced_installer将.net web程序打包为安装程序

    当项目开发完成之后,需要给客户使用时,总不能将发布后的文件全部放一起压缩后直接给客户吧,然后客户需要自行搭建环境修改配置等等,体验太差了,这时候我们就需要使用一种打包工具了,查了一些资料之后,我选择使 ...

  7. ortp打印日志

    //向字符串中打印数据 static char* ms_strdup_vprintf(const char *fmt, va_list ap) { ; char *p,*np; #ifndef WIN ...

  8. lintcode39 恢复旋转排序数组

    恢复旋转排序数组   给定一个旋转排序数组,在原地恢复其排序. 您在真实的面试中是否遇到过这个题? Yes 说明 什么是旋转数组? 比如,原始数组为[1,2,3,4], 则其旋转数组可以是[1,2,3 ...

  9. 栈和队列ADT -数据结构（C语言实现）

    数据结构与算法分析 栈模型 限制插入和删除只能在表的末端的表 表的末端叫做栈顶(top) 支持Push进栈和Pop入栈操作 //LIFO后进先出表 栈的实现 链表实现 类型声明 struct Node ...

  10. [Clr via C#读书笔记]Cp18 定制Attribute

    Cp18 定制Attribute 意义 利用Attribute,可以声明性的给自己的代码结构创建注解,从而实现一些特殊的功能:最终在元数据中生成,这种可扩展的元数据信息可以在运行时的时候查询,从而动态 ...