当前位置: 萬仟网 > IT编程>开发语言>Jquery > Bootstrap 基于Bootstrap和JQuery实现动态打开和关闭tab页

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

2019年06月10日  | 萬仟网IT编程  | 我要评论
基于Bootstrap和JQuery实现动态打开和关闭tab页 by:授客 QQ:1033553122 JQuery-3.2.1.min.j Bootstrap-3.3.7-dist win7 HTML代码片段 </body> </html> JS代码片段 $("#tab-a-" + options ...

基于bootstrapjquery实现动态打开和关闭tab

 

by:授客 qq1033553122

  1. 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>&nbsp;&nbsp;项目管理<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>&nbsp;&nbsp;项目管理1</a></li>
<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>
</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方法
}
});
 
 

如您对本文有疑问或者有任何想说的,请点击进行留言回复,万千网友为您解惑!

相关文章:

验证码:
Copyright © 2017-2021  萬仟网 保留所有权利. 粤ICP备17035492号-1
站长QQ:2386932994 | 联系邮箱:2386932994@qq.com