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

前端  /  管理员 发布于 5年前   408

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>

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页的实例代码,希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！

如果你觉得本文对你有帮助，欢迎转载，烦请注明出处，谢谢！