Bootstrap 基於Bootstrap和JQuery實現動態打開和關閉tab頁

基於Bootstrap和JQuery實現動態打開和關閉tab頁

 

by:授客 QQ：1033553122

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方法

}

});