Bootstrap 基于Bootstrap和JQuery实现动态打开和关闭tab页

基于Bootstrap和JQuery实现动态打开和关闭tab页

by:授客 QQ：1033553122

1. 测试环境

JQuery-3.2.1.min.j

Bootstrap-3.3.7-dist

win7

2. 实践

HTML代码片段

代码语言：javascript复制

<div class="container-fluid">

代码语言：javascript复制

<div class="row">

代码语言：javascript复制

<!--添加左侧菜单栏 -->

代码语言：javascript复制

<div class="col-xs-2 col-sm-2 col-md-2 col-lg-2">

代码语言：javascript复制

<div class="pannel-group" id="accordion">

代码语言：javascript复制

<div id="left-nav" class="panel panel-default">

代码语言：javascript复制

<div class="panel-heading">

代码语言：javascript复制

<h4 class="panel-title"><a data-toggle="collapse" class="nav-header collapsed" data-parent="#accordion" href="#tag20"><iclass="glyphiconglyphicon-cog"></i>&nbsp;&nbsp;项目管理<span class="pull-right glyphiconglyphicon-chevron-toggle"></span></a></h4>

代码语言：javascript复制

</div>

代码语言：javascript复制

<div id="tag20" class="panel-collapse collapse in">

代码语言：javascript复制

<div class="panel-body">

代码语言：javascript复制

<ulclass="navnav-list">

代码语言：javascript复制

<li class="active"><a href="#" onclick="addTab({'menuID':'21', 'father':'navtab', 'tabName':'项目管理1', 'tabContentID':'tabContent', 'tabUrl':'/testulr'})"><iclass="glyphiconglyphicon-cog"></i>&nbsp;&nbsp;项目管理1</a></li>

代码语言：javascript复制

<li class="active"><a href="#" onclick="addTab({'menuID':'22', 'father':'navtab', 'tabName':'项目管理2', 'tabContentID':'tabContent', 'tabUrl':''})"><iclass="glyphiconglyphicon-cog"></i>&nbsp;&nbsp;项目管理2</a></li>

代码语言：javascript复制

</ul>

代码语言：javascript复制

</div>

代码语言：javascript复制

</div>

代码语言：javascript复制

</div>

代码语言：javascript复制

</div>

代码语言：javascript复制

</div>

代码语言：javascript复制

<!--添加tab页面 -->

代码语言：javascript复制

<div class="col-xs-10 col-sm-10 col-md-10 col-lg-10">

代码语言：javascript复制

<ulid="navtab" class="navnav-tabs">

代码语言：javascript复制

<!--通过js获取 tab-->

代码语言：javascript复制

</ul>

代码语言：javascript复制

<!-- tab页面的内容 -->

代码语言：javascript复制

<div id="tabContent" class="tab-content">

代码语言：javascript复制

<!--通过js获取 tab对应的页面内容-->

代码语言：javascript复制

</div>

代码语言：javascript复制

</div>

代码语言：javascript复制

</div>

代码语言：javascript复制

</div>

</body>

</html>

JS代码片段

代码语言：javascript复制

/**

代码语言：javascript复制

 * 增加tab标签页

代码语言：javascript复制

 * @param options：

代码语言：javascript复制

 * menuIDtab标签页对应的左侧导航菜单在数据库表中的id，作为tab元素id的组成部分

代码语言：javascript复制

 * tabName       tab标签页名称

代码语言：javascript复制

 * tabUrl        tab“装载”的url

代码语言：javascript复制

 * tabContentID  tab标签页的页面内容所在的父级元素（div容器）

代码语言：javascript复制

 * @returns {boolean}

代码语言：javascript复制

*/

代码语言：javascript复制

function addTab(options) {

代码语言：javascript复制

setBreadcrumb(options.level1, options.level2, options.tabName);

代码语言：javascript复制

//tabUrl:当前tab所指向的URL地址

代码语言：javascript复制

varisExists= isTabExists(options.menuID);

代码语言：javascript复制

if(isExists){ // 如果tab标签页已打开，则选中、激活

代码语言：javascript复制

$("#tab-a-"   options.menuID).click(); // 注意，必须是点击 a标签才起作用

代码语言：javascript复制

} else {

代码语言：javascript复制

// 新增 tab 标签页

代码语言：javascript复制

        //按钮图标 '<i class="glyphiconglyphicon-remove"></i></a>'

代码语言：javascript复制

$("#"   tabFatherElementID).append(

代码语言：javascript复制

'<li role="presentation" id="tab-li-'   options.menuID   '">'

代码语言：javascript复制

'    <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>'

代码语言：javascript复制

'</li>');

代码语言：javascript复制

// 设置 tab标签页的内容

代码语言：javascript复制

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>';

代码语言：javascript复制

$("#"   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;

}

代码语言：javascript复制

/***

代码语言：javascript复制

 * 判断tab页是否已经打开

代码语言：javascript复制

 * @paramtabName当前tab的名称

代码语言：javascript复制

 * @returns {boolean}

代码语言：javascript复制

*/

代码语言：javascript复制

function isTabExists(menuID){

代码语言：javascript复制

var tab = $('#tab-li-'   menuID   ' > #tab-a-'   menuID);

代码语言：javascript复制

return tab.length>0;

代码语言：javascript复制

/**

* 关闭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(); // 移除内容

}

代码语言：javascript复制

/**

代码语言：javascript复制

 * 设置tab标签对应的iframe页面高度

代码语言：javascript复制

*/

代码语言：javascript复制

function changeFrameHeight(){

代码语言：javascript复制

var iframes = document.getElementsByName('tabIframe');

代码语言：javascript复制

var contentContainer= $('#'   tabContentID); // 获取tab标签对应的页面div容器对象 // 可能会出现获取不到的情况

代码语言：javascript复制

var offsetTop= 0;

代码语言：javascript复制

if(contentContainer.offset()) {

代码语言：javascript复制

offsetTop= contentContainer.offset().top;  //容器距离document顶部的距离

代码语言：javascript复制

$.each(iframes, function(index, iframe){

代码语言：javascript复制

var h = window.innerHeight|| document.documentElement.clientHeight|| document.body.clientHeight;

代码语言：javascript复制

iframe.height= h - offsetTop;// 这里offsetTop可以替换成一个比较合理的常量值

代码语言：javascript复制

});

代码语言：javascript复制

/**

代码语言：javascript复制

* 浏览器窗口大小发生变化时，自动调整iframe页面高度

代码语言：javascript复制

* 浏览器等因素导致改变浏览器窗口大小时，会发生多次resize事件，导致频繁调用changeFrameHeight()，* 所以函数中添加了延迟事件

代码语言：javascript复制

*/

代码语言：javascript复制

$(function(){

代码语言：javascript复制

var resizeTimer= null;

代码语言：javascript复制

window.onresize=function(){

代码语言：javascript复制

if(resizeTimer) {

代码语言：javascript复制

clearTimeout(resizeTimer); // 取消上次的延迟事件

代码语言：javascript复制

resizeTimer= setTimeout('changeFrameHeight()', 500);  // //延迟500毫秒执行changeFrameHeight方法

代码语言：javascript复制

});

代码语言：javascript复制

bootstrap jquery 编程算法

0 人点赞