基于Bootstrap和JQuery實(shí)現(xiàn)動(dòng)態(tài)打開(kāi)和關(guān)閉tab頁(yè)的實(shí)例代碼
1. 測(cè)試環(huán)境
JQuery-3.2.1.min.j
Bootstrap-3.3.7-dist
win7
1.2. 實(shí)踐
HTML代碼片段
<div class="container-fluid"> <div class="row"> <!--添加左側(cè)菜單欄 --> <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> 項(xiàng)目管理<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':'項(xiàng)目管理1', 'tabContentID':'tabContent', 'tabUrl':'/testulr'})"><iclass="glyphiconglyphicon-cog"></i> 項(xiàng)目管理1</a></li> <li class="active"><a href="#" onclick="addTab({'menuID':'22', 'father':'navtab', 'tabName':'項(xiàng)目管理2', 'tabContentID':'tabContent', 'tabUrl':''})"><iclass="glyphiconglyphicon-cog"></i> 項(xiàng)目管理2</a></li> </ul> </div> </div> </div> </div> </div> <!--添加tab頁(yè)面 --> <div class="col-xs-10 col-sm-10 col-md-10 col-lg-10"> <ulid="navtab" class="navnav-tabs"> <!--通過(guò)js獲取 tab--> </ul> <!-- tab頁(yè)面的內(nèi)容 --> <div id="tabContent" class="tab-content"> <!--通過(guò)js獲取 tab對(duì)應(yīng)的頁(yè)面內(nèi)容--> </div> </div> </div> </div> </body> </html>
JS代碼片段
/** * 增加tab標(biāo)簽頁(yè) * @param options: * menuIDtab標(biāo)簽頁(yè)對(duì)應(yīng)的左側(cè)導(dǎo)航菜單在數(shù)據(jù)庫(kù)表中的id,作為tab元素id的組成部分 * tabName tab標(biāo)簽頁(yè)名稱(chēng) * tabUrl tab“裝載”的url * tabContentID tab標(biāo)簽頁(yè)的頁(yè)面內(nèi)容所在的父級(jí)元素(div容器) * * @returns {boolean} */ function addTab(options) { setBreadcrumb(options.level1, options.level2, options.tabName); //tabUrl:當(dāng)前tab所指向的URL地址 varisExists= isTabExists(options.menuID); if(isExists){ // 如果tab標(biāo)簽頁(yè)已打開(kāi),則選中、激活 $("#tab-a-" + options.menuID).click(); // 注意,必須是點(diǎn)擊 a標(biāo)簽才起作用 } else { // 新增 tab 標(biāo)簽頁(yè) //按鈕圖標(biāo) '<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>'); // 設(shè)置 tab標(biāo)簽頁(yè)的內(nèi)容 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(); // 選中打開(kāi)的tab currentIframID= 'iframe' + options.menuID; } } /*** * 判斷tab頁(yè)是否已經(jīng)打開(kāi) * @paramtabName當(dāng)前tab的名稱(chēng) * @returns {boolean} */ function isTabExists(menuID){ var tab = $('#tab-li-' + menuID + ' > #tab-a-' + menuID); return tab.length>0; } /** * 關(guān)閉tab標(biāo)簽頁(yè) * @param button */ function closeTab(button) { //通過(guò)所點(diǎn)擊的x 按鈕,找到對(duì)應(yīng)li標(biāo)簽的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) { // 如果關(guān)閉的是當(dāng)前處于選中狀態(tài)的TAB if (li_active.prev()[0]) { // 如果當(dāng)前tab標(biāo)簽之前存在tab標(biāo)簽,則激活前一個(gè)標(biāo)簽頁(yè)(前后順序?qū)?yīng)左右順序 li_active.prev().find("a").click(); } else if (li_active.next()[0]) { // 如果當(dāng)前tab標(biāo)簽之前不存在tab標(biāo)簽,并且在其之后存在tab標(biāo)簽,則激活后一個(gè)tab標(biāo)簽頁(yè) li_active.next().find("a").click(); } } //關(guān)閉TAB $("#" + li_id).remove(); $("#tab-content-" + id).remove(); // 移除內(nèi)容 } /** * 設(shè)置tab標(biāo)簽對(duì)應(yīng)的iframe頁(yè)面高度 */ function changeFrameHeight(){ var iframes = document.getElementsByName('tabIframe'); var contentContainer= $('#' + tabContentID); // 獲取tab標(biāo)簽對(duì)應(yīng)的頁(yè)面div容器對(duì)象 // 可能會(huì)出現(xiàn)獲取不到的情況 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可以替換成一個(gè)比較合理的常量值 }); } /** * 瀏覽器窗口大小發(fā)生變化時(shí),自動(dòng)調(diào)整iframe頁(yè)面高度 * 瀏覽器等因素導(dǎo)致改變?yōu)g覽器窗口大小時(shí),會(huì)發(fā)生多次resize事件,導(dǎo)致頻繁調(diào)用changeFrameHeight(),* 所以函數(shù)中添加了延遲事件 */ $(function(){ var resizeTimer= null; window.onresize=function(){ if(resizeTimer) { clearTimeout(resizeTimer); // 取消上次的延遲事件 } resizeTimer= setTimeout('changeFrameHeight()', 500); // //延遲500毫秒執(zhí)行changeFrameHeight方法 } });
總結(jié)
以上所述是小編給大家介紹的基于Bootstrap和JQuery實(shí)現(xiàn)動(dòng)態(tài)打開(kāi)和關(guān)閉tab頁(yè)的實(shí)例代碼,希望對(duì)大家有所幫助,如果大家有任何疑問(wèn)請(qǐng)給我留言,小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持!
如果你覺(jué)得本文對(duì)你有幫助,歡迎轉(zhuǎn)載,煩請(qǐng)注明出處,謝謝!
- bootstrap可編輯下拉框jquery.editable-select
- bootstrap jquery dataTable 異步ajax刷新表格數(shù)據(jù)的實(shí)現(xiàn)方法
- 基于BootStrap環(huán)境寫(xiě)jQuery tabs插件
- bootstrap+jquery項(xiàng)目引入文件報(bào)錯(cuò)的解決方法
- bootstrap+jQuery 實(shí)現(xiàn)下拉菜單中復(fù)選框全選和全不選效果
- Spring shiro + bootstrap + jquery.validate 實(shí)現(xiàn)登錄、注冊(cè)功能
- vue中如何引入jQuery和Bootstrap
- Bootstrap jquery.twbsPagination.js動(dòng)態(tài)頁(yè)碼分頁(yè)實(shí)例代碼
相關(guān)文章
跟我一起學(xué)寫(xiě)jQuery插件開(kāi)發(fā)方法(附完整實(shí)例及下載)
jQuery如此流行,各式各樣的jQuery插件也是滿(mǎn)天飛。你有沒(méi)有想過(guò)把自己的一些常用的JS功能也寫(xiě)成jQuery插件呢?如果你的答案是肯定的,那么來(lái)吧!和我一起學(xué)寫(xiě)jQuery插件吧!2010-04-04JQuery UI DatePicker中z-index默認(rèn)為1的解決辦法
用到JQuery UI的DatePicker時(shí),發(fā)現(xiàn)如果頁(yè)面有其他z-index比較大的控件,datepicker就會(huì)被遮住而不能操作。2010-09-09使用JS或jQuery模擬鼠標(biāo)點(diǎn)擊a標(biāo)簽事件代碼
這篇文章主要介紹了使用JS或jQuery模擬鼠標(biāo)點(diǎn)擊a標(biāo)簽事件代碼,需要的朋友可以參考下2014-03-03jQuery+CSS實(shí)現(xiàn)的table表格行列轉(zhuǎn)置功能示例
這篇文章主要介紹了jQuery+CSS實(shí)現(xiàn)的table表格行列轉(zhuǎn)置功能,涉及jQuery事件響應(yīng)及頁(yè)面元素屬性動(dòng)態(tài)操作相關(guān)實(shí)現(xiàn)技巧,需要的朋友可以參考下2018-01-01web前端開(kāi)發(fā)JQuery常用實(shí)例代碼片段(50個(gè))
本文給大家展示50個(gè)jquery代碼片段,這些代碼能夠給你的javascript項(xiàng)目提供幫助,需要的朋友快來(lái)學(xué)習(xí)一下吧2015-08-08原生js實(shí)現(xiàn)addclass,removeclass,toggleclasss實(shí)例
下面小編就為大家?guī)?lái)一篇原生js實(shí)現(xiàn)addclass,removeclass,toggleclasss實(shí)例。小編覺(jué)得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起 小編過(guò)來(lái)看看吧2016-11-11jQuery EasyUI API 中文文檔 DateTimeBox日期時(shí)間框
jQuery EasyUI API 中文文檔 DateTimeBox日期時(shí)間框,需要的朋友可以參考下。2011-10-10