使用BootStrap4完成类似浏览器的多窗口效果
前言
需要用到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">×</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;
}
}
总结
基本上都是通过thymeleaf的碎片化进行动态html插入和删除，所以只能使用ajax进行请求数据。日后可能我可能会进行改进。