标签：BootStrap 浏览器 name url 多窗口 tag param html urls
使用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进行请求数据。日后可能我可能会进行改进。
标签：BootStrap,浏览器,name,url,多窗口,tag,param,html,urls 来源： https://blog.csdn.net/weixin_42475817/article/details/114626517
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。