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

2023-08-22 12:25:04 73

/** *增加tab标签页 *@paramoptions： *menuIDtab标签页对应的左侧导航菜单在数据库表中的id，作为tab元素id的组成部分 *tabNametab标签页名称 *tabUrltab“装载”的url *tabContentIDtab标签页的页面内容所在的父级元素（div容器） * *@returns{boolean} */ functionaddTab(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标签页 //按钮图标'' $("#"+tabFatherElementID).append( ''+ ''+options.tabName+'×'+''+ ''); //设置tab标签页的内容 varcontent=''; $("#"+options.tabContentID).append(''+content+''); $("#tab-a-"+options.menuID).click();//选中打开的tab currentIframID='iframe'+options.menuID; } } /*** *判断tab页是否已经打开 *@paramtabName当前tab的名称 *@returns{boolean} */ functionisTabExists(menuID){ vartab=$('#tab-li-'+menuID+'>#tab-a-'+menuID); returntab.length>0; } /** *关闭tab标签页 *@parambutton */ functioncloseTab(button){ //通过所点击的x按钮，找到对应li标签的id varli_id=$(button).parent().parent().attr('id'); varid=li_id.replace('tab-li-',''); varli_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(); }elseif(li_active.next()[0]){//如果当前tab标签之前不存在tab标签，并且在其之后存在tab标签，则激活后一个tab标签页 li_active.next().find("a").click(); } } //关闭TAB $("#"+li_id).remove(); $("#tab-content-"+id).remove();//移除内容 } /** *设置tab标签对应的iframe页面高度 */ functionchangeFrameHeight(){ variframes=document.getElementsByName('tabIframe'); varcontentContainer=$('#'+tabContentID);//获取tab标签对应的页面div容器对象//可能会出现获取不到的情况 varoffsetTop=0; if(contentContainer.offset()){ offsetTop=contentContainer.offset().top;//容器距离document顶部的距离 } $.each(iframes,function(index,iframe){ varh=window.innerHeight||document.documentElement.clientHeight||document.body.clientHeight; iframe.height=h-offsetTop;//这里offsetTop可以替换成一个比较合理的常量值 }); } /** *浏览器窗口大小发生变化时，自动调整iframe页面高度 *浏览器等因素导致改变浏览器窗口大小时，会发生多次resize事件，导致频繁调用changeFrameHeight()，*所以函数中添加了延迟事件 */ $(function(){ varresizeTimer=null; window.onresize=function(){ if(resizeTimer){ clearTimeout(resizeTimer);//取消上次的延迟事件 } resizeTimer=setTimeout('changeFrameHeight()',500);////延迟500毫秒执行changeFrameHeight方法 } });

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

热门推荐

随机推荐