基于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插件ImgAreaSelect实现头像上传预览和裁剪功能实例讲解一
May 26 jQuery
JavaScript自执行函数和jQuery扩展方法详解
Oct 27 jQuery
jQuery幻灯片插件owlcarousel参数说明中文文档
Feb 27 jQuery
jQuery实现输入框的放大和缩小功能示例
Jul 21 jQuery
jQuery实现上下滚动公告栏详细代码
Nov 21 jQuery
jQuery事件多次绑定与解绑问题实例分析
Feb 19 jQuery
JS秒杀倒计时功能完整实例【使用jQuery3.1.1】
Sep 03 jQuery
jquery 键盘事件 keypress() keydown() keyup()用法总结
Oct 23 jQuery
jQuery事件模型默认行为执行顺序及trigger()与 triggerHandler()比较实例分析
Apr 30 jQuery
jQuery HTML css()方法与css类实例详解
May 20 jQuery
jQuery实现图片切换效果
Oct 19 jQuery
jQuery实现简单评论区功能
Oct 26 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
php做下载文件的实现代码及文件名中乱码解决方法
2011/02/03 PHP
php_pdo 预处理语句详解
2016/11/21 PHP
浅析PHP 中move_uploaded_file 上传中文文件名失败
2019/04/17 PHP
JS 自定义带默认值的函数
2011/07/21 Javascript
关于IE中getElementsByClassName不能用的问题解决方法
2013/08/26 Javascript
js replace替换所有匹配的字符串
2014/02/13 Javascript
关闭页面window.location事件未执行的原因及解决方法
2014/09/01 Javascript
ie8模式下click无反应点击option无反应的解决方法
2014/10/11 Javascript
jQuery中parents()和parent()的区别分析
2014/10/28 Javascript
js实现简单锁屏功能实例
2015/05/27 Javascript
AngularJS入门教程之AngularJS表达式
2016/04/18 Javascript
JavaScript——DOM操作——Window.document对象详解
2016/07/14 Javascript
完美实现八种js焦点轮播图(下篇)
2020/04/20 Javascript
js利用for in循环获取 一个对象的所有属性以及值的实例
2017/03/30 Javascript
vue使用stompjs实现mqtt消息推送通知
2017/06/22 Javascript
详解Angular Reactive Form 表单验证
2017/07/06 Javascript
Three.js利用orbit controls插件(轨道控制)控制模型交互动作详解
2017/09/25 Javascript
vue中post请求以a=a&amp;b=b 的格式写遇到的问题
2018/04/27 Javascript
浅谈vue引用静态资源需要注意的事项
2018/09/28 Javascript
详解ES6 系列之异步处理实战
2018/10/26 Javascript
vue 如何使用递归组件
2020/10/23 Javascript
Python中实现的RC4算法
2015/02/14 Python
python中如何正确使用正则表达式的详细模式(Verbose mode expression)
2017/11/08 Python
用Python下载一个网页保存为本地的HTML文件实例
2018/05/21 Python
django的model操作汇整详解
2019/07/26 Python
python 实现矩阵按对角线打印
2019/11/29 Python
Python3实现将一维数组按标准长度分隔为二维数组
2019/11/29 Python
python kafka 多线程消费者&amp;手动提交实例
2019/12/21 Python
Ubuntu权限不足无法创建文件夹解决方案
2020/11/14 Python
关于HTML5的22个初级技巧(图文教程)
2012/06/21 HTML / CSS
英国最大的纸工艺品商店:CraftStash
2018/12/01 全球购物
意大利火车票和铁路通行证专家:ItaliaRail
2019/01/22 全球购物
岗位廉洁从政承诺书
2014/03/27 职场文书
《大自然的语言》教学反思
2014/04/08 职场文书
应聘教师求职信范文
2015/03/20 职场文书
nginx 反向代理之 proxy_pass的实现
2021/03/31 Servers