使用BootStrap完成类似浏览器的多窗口效果
内容导读
互联网集市收集整理的这篇技术教程文章主要介绍了使用BootStrap完成类似浏览器的多窗口效果，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含5538字，纯文字阅读大概需要8分钟。
内容图文
使用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完成类似浏览器的多窗口效果全部内容，希望文章能够帮你解决使用BootStrap完成类似浏览器的多窗口效果所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。
内容备注
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。
内容手机端
扫描二维码推送至手机访问。