BootStrap4+Thymeleaf完成类似浏览器的多窗口效果

最新推荐文章于 2023-04-11 15:59:15 发布

置顶 Rekkle3

最新推荐文章于 2023-04-11 15:59:15 发布

阅读量934

点赞数 1

文章标签： ajax jquery bootstrap javascript

本文链接：https://blog.csdn.net/weixin_42475817/article/details/114626517

版权

使用BootStrap4完成类似浏览器的多窗口效果

前言
一、bootstrap4的导航组件
- - 官方介绍
  - 使用示例
二、使用步骤
总结

另外一篇使用iframe标签完成同样功能文章，感兴趣的小伙伴可以去看看

前言

需要用到thymeleaf的碎片化功能
效果图
在这里插入图片描述

一、bootstrap4的导航组件

官方介绍

JavaScript behavior
Use the tab JavaScript plugin—include it individually or through the compiled bootstrap.js file—to extend our navigational tabs and pills to create tabbable panes of local content.

If you’re building our JavaScript from source, it requires util.js.

Dynamic tabbed interfaces, as described in the WAI ARIA Authoring Practices, require role=“tablist”, role=“tab”, role=“tabpanel”, and additional aria- attributes in order to convey their structure, functionality and current state to users of assistive technologies (such as screen readers).

Note that dynamic tabbed interfaces should not contain dropdown menus, as this causes both usability and accessibility issues. From a usability perspective, the fact that the currently displayed tab’s trigger element is not immediately visible (as it’s inside the closed dropdown menu) can cause confusion. From an accessibility point of view, there is currently no sensible way to map this sort of construct to a standard WAI ARIA pattern, meaning that it cannot be easily made understandable to users of assistive technologies.

使用示例

<ul class="nav nav-tabs" id="myTab" role="tablist">
  <li class="nav-item" role="presentation">
    <a class="nav-link active" id="home-tab" data-toggle="tab" href="#home" role="tab" aria-controls="home" aria-selected="true">Home</a>
  </li>
  <li class="nav-item" role="presentation">
    <a class="nav-link" id="profile-tab" data-toggle="tab" href="#profile" role="tab" aria-controls="profile" aria-selected="false">Profile</a>
  </li>
  <li class="nav-item" role="presentation">
    <a class="nav-link" id="contact-tab" data-toggle="tab" href="#contact" role="tab" aria-controls="contact" aria-selected="false">Contact</a>
  </li>
</ul>
<div class="tab-content" id="myTabContent">
  <div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">...</div>
  <div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab">...</div>
  <div class="tab-pane fade" id="contact" role="tabpanel" aria-labelledby="contact-tab">...</div>
</div>

二、使用步骤

引入css、js、thymeleaf标签库

<html lang="cn" xmlns:th="http://www.thymeleaf.org">
<link rel="stylesheet" type="text/css" th:href="@{/css/common/bootstrap/bootstrap.css}">
<script th:src="@{/js/common/jquery-3.5.1.min.js}"></script>
<script th:src="@{/js/common/bootstrap/bootstrap.js}"></script>
<script th:src="@{/js/common/menu.js}"></script>
<script th:inline="javascript">
    const basePath = [[${#httpServletRequest.getScheme() + "://" + #httpServletRequest.getServerName() + ":" + #httpServletRequest.getServerPort() + #httpServletRequest.getContextPath()}]];
</script>

menu.js

/**
 * 打开tag
 * @param url
 * @param name
 */
function openTag(url, name) {
    let urls = url.split("/");
    const id1 = $('#' + urls[1] + '');
    const id2 = $('#' + urls[2] + '');
    if (id1.html() === undefined) {
        //添加tag
        $.ajax({
            type: "post",
            url: basePath + "/sys/freshenTag",
            data: {
                html: urls[0],
                tag: urls[1],
                name: name
            },
            success: function (data) {
                $('#myTab').append(data);
                //添加tag主体
                $.ajax({
                    type: "post",
                    url: basePath + "/sys/freshenTag",
                    data: {
                        html: urls[0],
                        tag: urls[2],
                    },
                    success: function (data) {
                        $('#myTabContent').append(data);
                        $('#myTab li:last-child a').tab('show');
                        //动态调用每个方法tag初始化获取数据方法
                        const tempName = urls[0] + 'Load';
                        const fn = window[tempName];
                        //判断函数是否存在
                        if (fn && typeof fn === 'function') {
                            // console.log(tempName);
                            // 执行函数
                            eval(tempName + '()');
                        }
                    }
                });
            }
        });
    } else {
        $('#myTab a[href="#' + urls[2] + '"]').tab('show')
    }
}

/**
 * 关闭tag按钮
 * @param id1
 * @param id2
 */
function closeTag(id1, id2) {
    // console.log(id1 + "+" + id2);
    $('#' + id1 + '').remove();
    $('#' + id2 + '').remove();
    $('#myTab li:last-child a').tab('show');
}

参数可以根据自己需要进行修改
我的url参数设计成
“moduleMan/moduleManTag/moduleManBody”
这个样子，通过字符串切割可以分成：
1、moduleMan（需要打开的html文件的名称）
在这里插入图片描述

2、moduleManTag（bootstrap中li的碎片名称，具体看代码th:fragment处）

<li class="nav-item" role="presentation" th:fragment="moduleManTag" id="moduleManTag">
    <a class="nav-link" data-toggle="tab" href="#moduleManBody" role="tab"
       aria-controls="moduleManTag" aria-selected="false">
        <span th:text="${tagName}"></span>
        <div class="hs-unfold">
            <button type="button" class="close" aria-label="关闭" onclick="closeTag('moduleManTag','moduleManBody')">
                <span aria-hidden="true">&times;</span>
            </button>
        </div>
    </a>
</li>

3、moduleManBody（bootstrap中div的碎片名称，具体看代码的th:fragment处）

<div class="tab-pane fade h-100" id="moduleManBody" role="tabpanel" aria-labelledby="moduleManTag"
     th:fragment="moduleManBody">

name参数就是你窗口的名字
在这里插入图片描述
请注意第二个ajax请求中，成功以后会调用每个窗口的初始化方法，如果你的url是
“moduleMan/moduleManTag/moduleManBody”
那你只需要编写一个moduleManLoad（）的js方法（方法名就是html文件名称+Load）就可以每当打开新窗口就进行数据初始化（使用ajax请求）

controller

@RequestMapping("/sys")
@Controller
public class SysController {
    /**
     * 主页刷新tag
     *
     * @param html  html文件名称
     * @param tag   tag名称
     * @param name  中文名
     * @param model model
     * @return thymeleaf模板
     */
    @RequestMapping("/freshenTag")
    public String freshen(String html, String tag, String name, Model model) {
        model.addAttribute("tagName", name);
        return html + "::" + tag;
    }
}