使用Bootstrap Tabs選項卡Ajax加載數據實現

2024-09-01 08:33:49

字體：大中小

來源：轉載

供稿：網友

本文實例為大家分享了Bootstrap Tabs選項卡Ajax加載數據的具體代碼，供大家參考，具體內容如下

HTML代碼(僅展示了部分關鍵性代碼)

<li class="active"> <a href="#home" data-toggle="tab" name="menu-ctrl">  <span class="glyphicon glyphicon-home"> </span> 主頁  <span class="sr-only">(current)</span>  </a></li><li> <a href="#test-paper">  <span class="glyphicon glyphicon-list-alt"> </span> 試卷庫 </a></li><li> <a href="#favorite">  <span class="glyphicon glyphicon-bookmark"> </span> 我的收藏 </a></li><li> <a href="#about"> <span class="glyphicon glyphicon-info-sign"> </span> 關于 </a></li> <!--- /. Nav tabs---><div id="myTabContent" class="tab-content"> <!-- 試卷庫頁面 --> <div class="tab-pane fade" id="test-paper"></div> <!-- 收藏頁面 --> <div class="tab-pane fade" id="favorite"></div> <!-- 關于頁面 --> <div class="tab-pane fade" id="about"></div> <!-- 用戶信息頁面 --> <div class="tab-pane fade" id="user-info-page"></div></div> <!--- /.tab-content ---->

實現思路:

1.使用JavaScript激活tab選項卡:

$("a[href=['#about']").click(function(e){ $(this).tab('show'); e.preventDefault(); //阻止a標簽的默認行為});

2.使用jQuery的load()方法異步加載 tab-pane容器中的內容;

$('#about').load('pages/about.jsp');

大功告成!

那么接下來對上面的思路進行簡單的封裝

JavaScript代碼:

/** * 激活tab選項卡并使用ajax異步加載內容 * @param {Object} tabsId* @param {Object} url */function showTabs(tabsId,url) { $("a[href='#"+tabsId+"']").tab('show'); var $tabContent = $('#'+tabsId); if($tabContent.length < 100) { $tabContent.load(url); //console.info(tabsId + ' load done!'); }}//依次為每個tab導航a標簽添加單擊事件$('a[href="#test-paper"]').click(function(e) { showTabs('test-paper','pages/test-paper.jsp'); e.preventDefault();});//$('a[href=..]')...//..//.. 這么長的代碼!!

考慮到每個a標簽的綁定的都是click事件,只是參數不同而已, 可以嘗試著把tabs的數據用json數組存儲起來;

//準備tabs數據var tabsData = [{ "id" : "test-paper", "url" : "pages/test-paper.jsp"},{ "id" : "favorite", "url" : "pages/favorite.jsp"},{ "id" : "about", "url" : "pages/about.jsp"},{ "id" : "user-info-page", "url" : "pages/user-info.jsp"}];//遍歷json數組,循環添加a標簽click事件:$(tabsData).each(function(){ //console.info(this.id + "--->" + this.url); $("a[href='#"+this.id+"']").click(function(e) { showTabs(this.id,this.url); e.preventDefault(); });});

終于完成? No!實測運行中沒有任何效果;這法子貌似行不通啊!原因暫時還在研究中(..)

這時我想到了jQuery的bind()函數:

bind(type,[data],fn);

//fn: 綁定到每個匹配元素的事件上面的處理函數
//可以嘗試把每個tab的參數通過data傳遞到外部的function中,用作每個a標簽的click響應函數

改寫后的$.each()循環:

$(tabsData).each(function(){ //console.info(this.id + "--->" + this.url); $("a[href='#"+this.id+"']").bind('click',{ id : this.id, url : this.url },tabsHandler);});function tabsHandler(event) { var data = event.data; showTabs(data.id,data.url); return false; //阻止默認a標簽響應}

這次總算是成功了!

看下演示圖:

Bootstrap,Tabs,選項卡,Ajax