基于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方法
}
});
 
 

Bootstrap 基于Bootstrap和JQuery实现动态打开和关闭tab页的更多相关文章

  1. Bootstrap技术: 如何给nav导航组件的tab页增加关闭按钮以及动态的添加和关闭tab页

    先给出示例html代码 <div> <!-- Nav tabs --> <ul class="nav nav-tabs" role="tab ...

  2. 在bootstrap ace样式框架上修改的后台管理型模板(Tab页后台管理模板)

    后台管理模板开始用frameset布局,但是有时候会遮挡比如上面导航或者左边导航的二级三级弹出菜单,因为宽度被限制了,所以有时候就用easyui或者ext的,但是样式不好看,然后看到了bootstra ...

  3. JQuery动态添加多个tab页标签

    jQuery是一个兼容多浏览器的js库,核心理念是write less,do more(写的更少,做的更多),jQuery使用户能更方便地处理HTML documents.events.实现动画效果, ...

  4. 使用原生js与jQuery分别实现一个简单的tab页签

    tab页签通常适用于空间有限而内容较多同时兼顾页面美观度不给用户一种信息过量视觉疲劳的情形.使用面非常广,下面我们用两种方法简单实现之. 首先,构建页面元素.页签的可点击部分我们通常用列表来承载,包括 ...

  5. Easyui 实现点击不同树节点打开不同tab页展示不同datagrid表数据设计

    实现点击不同树节点打开不同tab页展示不同datagrid表数据设计 by:授客 QQ:1033553122 测试环境 jquery-easyui-1.5.3 需求描述 如上图, 1.点击左侧树,叶子 ...

  6. 基于Bootstrap+jQuery.validate Form表单验证实践

    基于Bootstrap jQuery.validate Form表单验证实践 项目结构 :     github 上源码地址:https://github.com/starzou/front-end- ...

  7. 基于Bootstrap的JQuery TreeView树形控件,数据支持json字符串、list集合(MVC5)<二>

    上篇博客给大家介绍了基于Bootstrap的JQuery TreeView树形控件,数据支持json字符串.list集合(MVC5)<一>, 其中的两种方式都显得有些冗余.接着上篇博客继续 ...

  8. 基于Bootstrap的DropDownList的JQuery组件的完善版

    在前文 创建基于Bootstrap的下拉菜单的DropDownList的JQuery插件 中,实现了DropDownList的JQuery组件,但是留有遗憾.就是当下拉菜单出现滚动条的时候,滚动条会覆 ...

  9. 基于Bootstrap的超酷jQuery开关按钮插件

    aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAAAJgAAAA2CAIAAAC0tsfoAAAB/0lEQVR4nO3bQWrCQBTGcc/mbVz0DD

随机推荐

  1. CVPR 2019轨迹预测竞赛冠军方法总结

    背景 CVPR 2019 是机器视觉方向最重要的学术会议,本届大会共吸引了来自全世界各地共计 5160 篇论文,共接收 1294 篇论文,投稿数量和接受数量都创下了历史新高,其中与自动驾驶相关的论文. ...

  2. C#中使用Path、Directory、Split、Substring实现对文件路径和文件名的常用操作实例

    场景 现在有一个文件路径 E:\\BTSData\\2019-11\\admin_20180918_1_1_2 需要获取最后的文件名admin_20180918_1_1_2 需要获取文件的上层目录20 ...

  3. TopCoder12729 「SRM589Medium」GearsDiv1 二分图最小点覆盖

    问题描述 \(N\) 个齿轮每个齿轮有颜色(RGB),有些齿轮之间会咬合,你需要删除尽量少的齿轮并给每种颜色安排方向使得咬合齿轮不同向.问最多保留多少个齿轮.保证不存在两个相同颜色的齿轮咬合. sub ...

  4. 面试连环炮系列(十):一个线程调用两次start会怎么样

    一个线程调用两次start会怎么样 Java的线程是不允许启动两次的,第二次调用必然会抛出IllegalThreadStateException,这是一种运行时异常. 谈谈线程的生命周期和状态转移 新 ...

  5. 使用 Redis 进行阅读数统计并定时持久化

    之前,统计每篇博文的阅读数的方式是经过筛选去重之后直接更新数据库,并发压力直接传导到数据库,假设1秒有1000个并发请求,传统方案会在1秒内并发进行1000次数据库更新操作. 为了降低数据库的并发压力 ...

  6. Laravel Validator

    Controller use Validator; public function Validators(){ $rules = [ 'title' => 'required|max:255', ...

  7. iviewer插件

    jQuery-iviewer插件的使用 iviewer是一个具有缩放和图像旋转功能的图像查看小部件. 在jQuery官网下载后,有很多文件. 直接把文件夹解压拖到项目里. 然后再html中引入主要的文 ...

  8. centos重启出现type Control-D to continue【fsck使用】

    VMware vSphere克隆异常/dev/sda2:UNEXPECTED INCONSISTENCY; RUN fsck MANUALLY.(i.e.,without -a or -p optio ...

  9. SQL Server解惑——为什么你的查询结果超出了查询时间范围

    废话少说,直接上SQL代码(有兴趣的测试验证一下),下面这个查询语句为什么将2008-11-27的记录查询出来了呢?这个是同事遇到的一个问题,个人设计了一个例子. USE AdventureWorks ...

  10. 不能绑定到端口号:9194原因:Cannot assign requested address: JVM_Bind

    晚上将老服务器程序从win2008部署在新的云服务器win2012上,其实就是复制过去改改配置,启动时突然报不能绑定到端口号:9194原因:Cannot assign requested addres ...