经验首页 前端设计 程序设计 Java相关 移动开发 数据库/运维 软件/图像 大数据/云计算 其他经验
当前位置:技术经验 » JS/JS库/框架 » jQuery » 查看文章
Bootstrap 基于Bootstrap和JQuery实现动态打开和关闭tab页
来源:cnblogs  作者:授客  时间:2019/6/10 13:40:00  对本文有异议

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

 

by:授客 QQ1033553122

  1. 1.   测试环境

JQuery-3.2.1.min.j

 

Bootstrap-3.3.7-dist

 

win7

 

  1. 2.   实践

 

HTML代码片段

  1.  
  1. <div class="container-fluid">
  1. <div class="row">
  1. <!--添加左侧菜单栏 -->
  1. <div class="col-xs-2 col-sm-2 col-md-2 col-lg-2">
  1. <div class="pannel-group" id="accordion">
  1. <div id="left-nav" class="panel panel-default">
  1. <div class="panel-heading">
  1. <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>
  1. </div>
  1. <div id="tag20" class="panel-collapse collapse in">
  1. <div class="panel-body">
  1. <ulclass="navnav-list">
  1. <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>
  1. <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>
  1. </ul>
  1. </div>
  1. </div>
  1. </div>
  1. </div>
  1. </div>
  1.  
  1.  
  1. <!--添加tab页面 -->
  1. <div class="col-xs-10 col-sm-10 col-md-10 col-lg-10">
  1. <ulid="navtab" class="navnav-tabs">
  1. <!--通过js获取 tab-->
  1. </ul>
  1.  
  1. <!-- tab页面的内容 -->
  1. <div id="tabContent" class="tab-content">
  1. <!--通过js获取 tab对应的页面内容-->
  1. </div>
  1. </div>
  1.  
  1. </div>
  1. </div>

 

</body>

</html>

 

 

JS代码片段

  1.  
  1. /**
  1. * 增加tab标签页
  1. * @param options
  1. * menuIDtab标签页对应的左侧导航菜单在数据库表中的id,作为tab元素id的组成部分
  1. * tabName       tab标签页名称
  1. * tabUrl        tab装载url
  1. * tabContentID  tab标签页的页面内容所在的父级元素(div容器)
  1. *
  1. * @returns {boolean}
  1. */
  1. function addTab(options) {
  1. setBreadcrumb(options.level1, options.level2, options.tabName);
  1. //tabUrl:当前tab所指向的URL地址
  1. varisExists= isTabExists(options.menuID);
  1. if(isExists){ // 如果tab标签页已打开,则选中、激活
  1. $("#tab-a-" + options.menuID).click(); // 注意,必须是点击 a标签才起作用
  1. } else {
  1. // 新增 tab 标签页
  1.         //按钮图标 '<i class="glyphiconglyphicon-remove"></i></a>'
  1. $("#" + tabFatherElementID).append(
  1. '<li role="presentation" id="tab-li-' + options.menuID + '">' +
  1. '    <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>' +
  1. '</li>');
  1.  
  1. // 设置 tab标签页的内容
  1. 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>';
  1.  
  1. $("#" + 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;

    }

}

  1.  
  1.  
  1. /***
  1. * 判断tab页是否已经打开
  1. * @paramtabName当前tab的名称
  1. * @returns {boolean}
  1. */
  1. function isTabExists(menuID){
  1. var tab = $('#tab-li-' + menuID + ' > #tab-a-' + menuID);
  1. return tab.length>0;
  1. }
  1.  

/**

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

}

  1.  
  1.  
  1. /**
  1. * 设置tab标签对应的iframe页面高度
  1. */
  1. function changeFrameHeight(){
  1. var iframes = document.getElementsByName('tabIframe');
  1. var contentContainer= $('#' + tabContentID); // 获取tab标签对应的页面div容器对象 // 可能会出现获取不到的情况
  1. var offsetTop= 0;
  1. if(contentContainer.offset()) {
  1. offsetTop= contentContainer.offset().top;  //容器距离document顶部的距离
  1. }
  1.  
  1. $.each(iframes, function(index, iframe){
  1. var h = window.innerHeight|| document.documentElement.clientHeight|| document.body.clientHeight;
  1. iframe.height= h - offsetTop;// 这里offsetTop可以替换成一个比较合理的常量值
  1.  
  1.     });
  1. }
  1.  
  1. /**
  1. * 浏览器窗口大小发生变化时,自动调整iframe页面高度
  1. * 浏览器等因素导致改变浏览器窗口大小时,会发生多次resize事件,导致频繁调用changeFrameHeight()* 所以函数中添加了延迟事件
  1. */
  1. $(function(){
  1. var resizeTimer= null;
  1. window.onresize=function(){
  1. if(resizeTimer) {
  1. clearTimeout(resizeTimer); // 取消上次的延迟事件
  1. }
  1. resizeTimer= setTimeout('changeFrameHeight()', 500);  // //延迟500毫秒执行changeFrameHeight方法
  1. }
  1. });
  1.  
  1.  

原文链接:http://www.cnblogs.com/shouke/p/10995213.html

 友情链接:直通硅谷  点职佳  北美留学生论坛

本站QQ群:前端 618073944 | Java 606181507 | Python 626812652 | C/C++ 612253063 | 微信 634508462 | 苹果 692586424 | C#/.net 182808419 | PHP 305140648 | 运维 608723728

W3xue 的所有内容仅供测试,对任何法律问题及风险不承担任何责任。通过使用本站内容随之而来的风险与本站无关。
关于我们  |  意见建议  |  捐助我们  |  报错有奖  |  广告合作、友情链接(目前9元/月)请联系QQ:27243702 沸活量
皖ICP备17017327号-2 皖公网安备34020702000426号