基于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 相关文章推荐
JS/jquery实现一个网页内同时调用多个倒计时的方法
Apr 27 jQuery
jquery实现放大镜简洁代码(推荐)
Jun 08 jQuery
如何将 jQuery 从你的 Bootstrap 项目中移除(取而代之使用Vue.js)
Jul 17 jQuery
jQuery选择器之基本选择器用法实例分析
Feb 19 jQuery
jQuery选择器之基本过滤选择器用法实例分析
Feb 19 jQuery
Vue CLI3.0中使用jQuery和Bootstrap的方法
Feb 28 jQuery
javascript(基于jQuery)实现鼠标获取选中的文字示例【测试可用】
Oct 26 jQuery
jQuery+PHP+Ajax实现动态数字统计展示功能
Dec 25 jQuery
jQuery操作动画完整实例分析
Jan 10 jQuery
jquery制作的移动端购物车效果完整示例
Feb 24 jQuery
jQuery 移除事件的方法
Jun 20 jQuery
html5以及jQuery实现本地图片上传前的预览代码实例讲解
Mar 01 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 文件上传后缀名与文件类型对照表(几乎涵盖所有文件)
2010/05/16 PHP
pdo中使用参数化查询sql
2011/08/11 PHP
javascript 单选框,多选框美化代码
2008/08/01 Javascript
JavaScript 在各个浏览器中执行的耐性
2009/04/06 Javascript
jQuery 插件 将this下的div轮番显示
2009/04/09 Javascript
Prototype源码浅析 String部分(三)之HTML字符串处理
2012/01/15 Javascript
js中array的sort()方法使用介绍
2014/02/20 Javascript
jQuery选择器简明总结(含用法实例,一目了然)
2014/04/25 Javascript
简单谈谈jQuery(function(){})与(function(){})(jQuery)
2014/12/19 Javascript
JS组件Bootstrap Table表格多行拖拽效果实现代码
2015/12/08 Javascript
不得不分享的JavaScript常用方法函数集(上)
2015/12/23 Javascript
JS焦点图,JS 多个页面放多个焦点图的实例
2016/12/08 Javascript
详解js产生对象的3种基本方式(工厂模式,构造函数模式,原型模式)
2017/01/09 Javascript
jQuery实现CheckBox全选、全不选功能
2017/01/11 Javascript
JS原型与原型链的深入理解
2017/02/15 Javascript
使用AngularJS2中的指令实现按钮的切换效果
2017/03/27 Javascript
Angular directive递归实现目录树结构代码实例
2017/05/05 Javascript
详解node HTTP请求客户端 - Request
2017/05/05 Javascript
NodeJS实现不可逆加密与密码密文保存的方法
2018/03/16 NodeJs
微信小程序实现工作时间段选择
2019/02/15 Javascript
微信小程序 弹窗输入组件的实现解析
2019/08/12 Javascript
[53:44]DOTA2-DPC中国联赛 正赛 PSG.LGD vs Magma BO3 第一场 1月31日
2021/03/11 DOTA
Python中规范定义命名空间的一些建议
2016/06/04 Python
Python编程把二叉树打印成多行代码
2018/01/04 Python
python re模块findall()函数实例解析
2018/01/19 Python
python爬虫之urllib3的使用示例
2018/07/09 Python
Python3.5内置模块之os模块、sys模块、shutil模块用法实例分析
2019/04/27 Python
python迭代器常见用法实例分析
2019/11/22 Python
HTML5注册页面示例代码
2014/03/27 HTML / CSS
如何写出好的Java代码
2014/04/25 面试题
人事行政主管岗位职责
2013/12/22 职场文书
建筑专业毕业生自荐信
2014/05/25 职场文书
公司行政管理制度范本
2015/08/05 职场文书
优秀新员工事迹材料
2019/05/13 职场文书
详解Python类和对象内容
2021/06/22 Python
Python pandas之求和运算和非空值个数统计
2021/08/07 Python