目标：固定顶部或者左侧导航，点击导航动态更新中间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. Spark入门（Python版）

    Hadoop是对大数据集进行分布式计算的标准工具,这也是为什么当你穿过机场时能看到”大数据(Big Data)”广告的原因.它已经成为大数据的操作系统,提供了包括工具和技巧在内的丰富生态系统,允许使用 ...

  2. P1060 开心的金明

    P1060 开心的金明 题目描述 金明今天很开心,家里购置的新房就要领钥匙了,新房里有一间他自己专用的很宽敞的房间.更让他高兴的是,妈妈昨天对他说:“你的房间需要购买哪些物品,怎么布置,你说了算,只要 ...

  3. CLR via #C读书笔记三：基元类型、引用类型和值类型

    1.一些开发人员说应用程序在32位操作系统上运行,int代表32位整数:在64位操作系统上运行,int代表64位整数.这个说法是完全错误的.C#的int始终映射到System.Int32,所以不管在什 ...

  4. crash:EXC_ARM_DA_ALIGN(关于内存对齐,memcpy)

    crash:EXC_ARM_DA_ALIGN(关于内存对齐,memcpy) 问题描述 在iOS game开发时做内存拷贝时出现了 crash:EXC_ARM_DA_ALIGN,debug版本不会出现, ...

  5. rsync同步的艺术

    转自:http://roclinux.cn/?p=2643 如果你是一位运维工程师,你很可能会面对几十台.几百台甚至上千台服务器,除了批量操作外,环境同步.数据同步也是必不可少的技能. 说到“同步”, ...

  6. 从零学习安全测试，从XSS漏洞攻击和防御开始

    WeTest 导读 本篇包含了XSS漏洞攻击及防御详细介绍,包括漏洞基础.XSS基础.编码基础.XSS Payload.XSS攻击防御. 第一部分:漏洞攻防基础知识   XSS属于漏洞攻防,我们要研究 ...

  7. Windows系统常用修复命令 无须重装系统

    1.0 netsh int ipv4 reset 2.0 netsh winsock reset winsock是Windows网络编程接口,winsock工作在应用层,它提供与底层传输协议无关的高层 ...

  8. 微信小程序之基础案例详细解释

    这是案例的初始页面 首先关于这个案例上面的app.json做一个特别详细的解释 首先提醒一下.json文件不能有注释,因此如果要复制的话,请把注释删去 //关于app.json详细学习 { //pag ...

  9. Struts2(九.初始化用户列表时显示用户照片数目)

    1.userlist.jsp //显示每个用户照片的数目(遍历每个用户) $(".picture").each(function(i,e){ $.post("${page ...

  10. TW实习日记：第17天

    今天又改了一堆bug,比如界面的显示bug,Html字符串的处理.优化了一些交互界面,处理了一个模块数据传输的问题.我发现这些bug真的有一半是粗心导致的,真的真的是,写代码一定要细心细心再细心,不然 ...