基于Bootstrap和JQuery实现动态打开和关闭tab页的实例代码


Posted in jQuery onJune 10, 2019

1.   测试环境

JQuery-3.2.1.min.j

Bootstrap-3.3.7-dist

win7

1.2.   实践

HTML代码片段

<div class="container-fluid">
<div class="row">
<!--添加左侧菜单栏 -->
<div class="col-xs-2 col-sm-2 col-md-2 col-lg-2">
<div class="pannel-group" id="accordion">
<div id="left-nav" class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title"><a data-toggle="collapse" class="nav-header collapsed" data-parent="#accordion" href="#tag20"><iclass="glyphiconglyphicon-cog"></i>  项目管理<span class="pull-right glyphiconglyphicon-chevron-toggle"></span></a></h4>
</div>
<div id="tag20" class="panel-collapse collapse in">
<div class="panel-body">
<ulclass="navnav-list">
<li class="active"><a href="#" onclick="addTab({'menuID':'21', 'father':'navtab', 'tabName':'项目管理1', 'tabContentID':'tabContent', 'tabUrl':'/testulr'})"><iclass="glyphiconglyphicon-cog"></i>  项目管理1</a></li>
<li class="active"><a href="#" onclick="addTab({'menuID':'22', 'father':'navtab', 'tabName':'项目管理2', 'tabContentID':'tabContent', 'tabUrl':''})"><iclass="glyphiconglyphicon-cog"></i>  项目管理2</a></li>
</ul>
</div>
</div>
</div>
</div>
</div>
<!--添加tab页面 -->
<div class="col-xs-10 col-sm-10 col-md-10 col-lg-10">
<ulid="navtab" class="navnav-tabs">
<!--通过js获取 tab-->
</ul>
<!-- tab页面的内容 -->
<div id="tabContent" class="tab-content">
<!--通过js获取 tab对应的页面内容-->
</div>
</div>
</div>
</div>
</body>
</html>

JS代码片段 

/**
 * 增加tab标签页
 * @param options:
 * menuIDtab标签页对应的左侧导航菜单在数据库表中的id,作为tab元素id的组成部分
 * tabName    tab标签页名称
 * tabUrl    tab“装载”的url
 * tabContentID tab标签页的页面内容所在的父级元素(div容器)
 *
 * @returns {boolean}
 */
function addTab(options) {
setBreadcrumb(options.level1, options.level2, options.tabName);
//tabUrl:当前tab所指向的URL地址
varisExists= isTabExists(options.menuID);
if(isExists){ // 如果tab标签页已打开,则选中、激活
$("#tab-a-" + options.menuID).click(); // 注意,必须是点击 a标签才起作用
} else {
// 新增 tab 标签页
    //按钮图标 '<i class="glyphiconglyphicon-remove"></i></a>'
$("#" + tabFatherElementID).append(
'<li role="presentation" id="tab-li-' + options.menuID + '">' +
'  <a href="#tab-content-' +options.menuID + '" data-toggle="tab" role="tab" id="tab-a-' + options.menuID + '">'+ options.tabName + '<button class="close closeTab" type="button" onclick="closeTab(this,' + "'" + options.level1 + "','" + options.level2 + "','" + options.tabName + "'" +');">×</button>' + '</a>' +
'</li>');
// 设置 tab标签页的内容
var content = '<iframe name="tabIframe" src="' + options.tabUrl + '" width="100%" frameborder="no" border="0" marginwidth="0" marginheight="0" scrolling="yes" allowtransparency="yes" onload="changeFrameHeight()"></iframe>';
$("#" + options.tabContentID).append('<div id="tab-content-' + options.menuID + '" role="tabpanel" class="tab-pane">' + content + '</div>');
$("#tab-a-" + options.menuID).click(); // 选中打开的tab
currentIframID= 'iframe' + options.menuID;
  }
}
 
/***
 * 判断tab页是否已经打开
 * @paramtabName当前tab的名称
 * @returns {boolean}
 */
function isTabExists(menuID){
var tab = $('#tab-li-' + menuID + ' > #tab-a-' + menuID);
return tab.length>0;
}
/**
 * 关闭tab标签页
 * @param button
 */
function closeTab(button) {
//通过所点击的x 按钮,找到对应li标签的id
var li_id= $(button).parent().parent().attr('id');
var id = li_id.replace('tab-li-', '');
var li_active= $("#"+ tabFatherElementID+ " >li.active");
if (li_active.attr('id') == li_id) { // 如果关闭的是当前处于选中状态的TAB
if (li_active.prev()[0]) { // 如果当前tab标签之前存在tab标签,则激活前一个标签页(前后顺序对应左右顺序
li_active.prev().find("a").click();
    } else if (li_active.next()[0]) { // 如果当前tab标签之前不存在tab标签,并且在其之后存在tab标签,则激活后一个tab标签页
li_active.next().find("a").click();
    }
  }
//关闭TAB
$("#" + li_id).remove();
$("#tab-content-" + id).remove(); // 移除内容
}
/**
 * 设置tab标签对应的iframe页面高度
 */
function changeFrameHeight(){
var iframes = document.getElementsByName('tabIframe');
var contentContainer= $('#' + tabContentID); // 获取tab标签对应的页面div容器对象 // 可能会出现获取不到的情况
var offsetTop= 0;
if(contentContainer.offset()) {
offsetTop= contentContainer.offset().top; //容器距离document顶部的距离
}
$.each(iframes, function(index, iframe){
var h = window.innerHeight|| document.documentElement.clientHeight|| document.body.clientHeight;
iframe.height= h - offsetTop;// 这里offsetTop可以替换成一个比较合理的常量值
  });
}
/**
* 浏览器窗口大小发生变化时,自动调整iframe页面高度
* 浏览器等因素导致改变浏览器窗口大小时,会发生多次resize事件,导致频繁调用changeFrameHeight(),* 所以函数中添加了延迟事件
*/
$(function(){
var resizeTimer= null;
window.onresize=function(){
if(resizeTimer) {
clearTimeout(resizeTimer); // 取消上次的延迟事件
}
resizeTimer= setTimeout('changeFrameHeight()', 500); // //延迟500毫秒执行changeFrameHeight方法
}
});

总结

以上所述是小编给大家介绍的基于Bootstrap和JQuery实现动态打开和关闭tab页的实例代码,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

jQuery 相关文章推荐
解决jQuery ajax动态新增节点无法触发点击事件的问题
May 24 jQuery
jQuery Masonry瀑布流布局神器使用详解
May 25 jQuery
jQuery实现 RadioButton做必选校验功能
Jun 15 jQuery
jQuery回调方法使用示例
Jun 26 jQuery
jquery动态添加以及遍历option并获取特定样式名称的option方法
Jan 29 jQuery
JQuery通过后台获取数据遍历到前台的方法
Aug 13 jQuery
解决jquery有正确返回值但不执行success函数的问题
Aug 20 jQuery
通过jQuery学习js类型判断的技巧
May 27 jQuery
jQuery删除/清空指定元素的所有子节点实例代码
Jul 04 jQuery
jQuery实现弹出层效果
Dec 10 jQuery
jQuery实现移动端图片上传预览组件的方法分析
May 01 jQuery
jQuery实现动态向上滚动
Dec 21 jQuery
jQuery+ajax实现批量删除功能完整示例
Jun 06 #jQuery
jquery+ajax实现上传图片并显示上传进度功能【附php后台接收】
Jun 06 #jQuery
jQuery操作cookie的示例代码
Jun 05 #jQuery
jquery UI实现autocomplete在获取焦点时得到显示列表功能示例
Jun 04 #jQuery
javascript异步处理与Jquery deferred对象用法总结
Jun 04 #jQuery
一文快速了解JQuery中的AJAX
May 31 #jQuery
jQuery实现动态加载(按需加载)javascript文件的方法分析
May 31 #jQuery
You might like
一个很方便的 XML 类!!原创的噢
2006/10/09 PHP
thinkPHP3.x常量整理(预定义常量/路径常量/系统常量)
2016/05/20 PHP
基于Swoole实现PHP与websocket聊天室
2016/08/03 PHP
Yii2实现跨mysql数据库关联查询排序功能代码
2017/02/10 PHP
PHP实现留言板功能的详细代码
2017/03/25 PHP
php curl上传、下载、https登陆实现代码
2017/07/23 PHP
Laravel框架用户登陆身份验证实现方法详解
2017/09/14 PHP
分析Node.js connect ECONNREFUSED错误
2013/04/09 Javascript
$(document).ready(function() {})不执行初始化脚本
2014/06/19 Javascript
Node.js中的事件驱动编程详解
2014/08/16 Javascript
Jquery设置attr的disabled属性控制某行显示或者隐藏
2014/09/25 Javascript
28个常用JavaScript方法集锦
2015/01/14 Javascript
javascript实现table表格隔行变色的方法
2015/05/13 Javascript
JavaScript检测鼠标移动方向的方法
2015/05/22 Javascript
JS判断页面是否出现滚动条的方法
2015/07/17 Javascript
JavaScript中的闭包
2016/02/24 Javascript
jQuery实现三级菜单的代码
2016/05/09 Javascript
JS与HTML结合使用marquee标签实现无缝滚动效果代码
2016/07/05 Javascript
JS弹出新窗口被拦截的解决方法
2016/08/09 Javascript
从零学习node.js之文件操作(三)
2017/02/21 Javascript
Bootstrap下拉菜单Dropdowns的实现代码
2017/03/17 Javascript
vue基于Vue2.0和高德地图的地图组件实例
2017/04/28 Javascript
完美解决手机网页中输入框被输入法遮挡的问题
2017/12/19 Javascript
vue中jsonp插件的使用方法示例
2020/09/10 Javascript
在vue中动态修改css其中一个属性值操作
2020/12/07 Vue.js
Python ORM框架SQLAlchemy学习笔记之数据添加和事务回滚介绍
2014/06/10 Python
Python实现批量将word转html并将html内容发布至网站的方法
2015/07/14 Python
Python批量提取PDF文件中文本的脚本
2018/03/14 Python
Python3 单行多行万能正则匹配方法
2019/01/07 Python
Django模型修改及数据迁移实现解析
2019/08/01 Python
学习Python爬虫的几点建议
2020/08/05 Python
Jupyter Notebook安装及使用方法解析
2020/11/12 Python
就业协议书范本
2014/04/11 职场文书
2016银行求职自荐信
2016/01/28 职场文书
vue3中的组件间通信
2021/03/31 Vue.js
Go语言实现Snowflake雪花算法
2021/06/08 Golang