使用Bootstrap Tabs選項(xiàng)卡Ajax加載數(shù)據(jù)實(shí)現(xiàn)
本文實(shí)例為大家分享了Bootstrap Tabs選項(xiàng)卡Ajax加載數(shù)據(jù)的具體代碼,供大家參考,具體內(nèi)容如下
HTML代碼(僅展示了部分關(guān)鍵性代碼)
<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> 關(guān)于 </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> <!-- 關(guān)于頁面 --> <div class="tab-pane fade" id="about"></div> <!-- 用戶信息頁面 --> <div class="tab-pane fade" id="user-info-page"></div> </div> <!--- /.tab-content ---->
實(shí)現(xiàn)思路:
1.使用JavaScript激活tab選項(xiàng)卡:
$("a[href=['#about']").click(function(e){ $(this).tab('show'); e.preventDefault(); //阻止a標(biāo)簽的默認(rèn)行為 });
2.使用jQuery的load()方法異步加載 tab-pane容器中的內(nèi)容;
$('#about').load('pages/about.jsp');
大功告成!
那么接下來對(duì)上面的思路進(jìn)行簡單的封裝
JavaScript代碼:
/** * 激活tab選項(xiàng)卡并使用ajax異步加載內(nèi)容 * @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!'); } } //依次為每個(gè)tab導(dǎo)航a標(biāo)簽添加單擊事件 $('a[href="#test-paper"]').click(function(e) { showTabs('test-paper','pages/test-paper.jsp'); e.preventDefault(); }); //$('a[href=..]')... //.. //.. 這么長的代碼!!
考慮到每個(gè)a標(biāo)簽的綁定的都是click事件,只是參數(shù)不同而已, 可以嘗試著把tabs的數(shù)據(jù)用json數(shù)組存儲(chǔ)起來;
//準(zhǔn)備tabs數(shù)據(jù) 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數(shù)組,循環(huán)添加a標(biāo)簽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!實(shí)測運(yùn)行中沒有任何效果;這法子貌似行不通啊!原因暫時(shí)還在研究中(..)
這時(shí)我想到了jQuery的bind()函數(shù):
bind(type,[data],fn);
//fn: 綁定到每個(gè)匹配元素的事件上面的處理函數(shù)
//可以嘗試把每個(gè)tab的參數(shù)通過data傳遞到外部的function中,用作每個(gè)a標(biāo)簽的click響應(yīng)函數(shù)
改寫后的$.each()循環(huán):
$(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; //阻止默認(rèn)a標(biāo)簽響應(yīng) }
這次總算是成功了!
看下演示圖:
以上就是本文的全部內(nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
- bootstrap選項(xiàng)卡擴(kuò)展功能詳解
- 簡單實(shí)現(xiàn)bootstrap選項(xiàng)卡效果
- bootstrap選項(xiàng)卡使用方法解析
- bootstrap導(dǎo)航、選項(xiàng)卡實(shí)現(xiàn)代碼
- Bootstrap選項(xiàng)卡動(dòng)態(tài)切換效果
- BootStrap tab選項(xiàng)卡使用小結(jié)
- 精彩的Bootstrap案例分享 重點(diǎn)在注釋!(選項(xiàng)卡、柵格布局)
- 很棒的Bootstrap選項(xiàng)卡切換效果
- 全面解析Bootstrap中tab(選項(xiàng)卡)的使用方法
- bootstrap實(shí)現(xiàn)tab選項(xiàng)卡切換
相關(guān)文章
JavaScript中this的用法及this在不同應(yīng)用場景的作用解析
由于其運(yùn)行期綁定的特性,JavaScript 中的 this 含義要豐富得多,它可以是全局對(duì)象、當(dāng)前對(duì)象或者任意對(duì)象,這完全取決于函數(shù)的調(diào)用方式,這篇文章主要給大家介紹了JavaScript中this的用法及this在不同應(yīng)用場景的作用解析,一起看看吧2017-04-04js表單元素checked、radio被選中的幾種方法(詳解)
下面小編就為大家?guī)硪黄猨s表單元素checked、radio被選中的幾種方法(詳解)。小編覺得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-08-08Base64(二進(jìn)制)圖片編碼解析及在各種瀏覽器的兼容性處理
這篇文章主要介紹了Base64(二進(jìn)制)圖片編碼解析及在各種瀏覽器的兼容性處理,需要的朋友可以參考下2017-02-02JS 實(shí)現(xiàn)獲取驗(yàn)證碼 倒計(jì)時(shí)功能
這篇文章主要介紹了JS 實(shí)現(xiàn)獲取驗(yàn)證碼 倒計(jì)時(shí)功能,非常不錯(cuò),具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2018-10-10JavaScript中對(duì)象的不同創(chuàng)建方法
js對(duì)象與一般的面向?qū)ο蟮某绦蛟O(shè)計(jì)語言有所不同的。js中的對(duì)象是基本原型的。下面給大家介紹js中對(duì)象的不同創(chuàng)建方法,非常不錯(cuò),感興趣的朋友一起學(xué)習(xí)吧2016-08-08javascript瀏覽器用戶代理檢測腳本實(shí)現(xiàn)方法
下面小編就為大家?guī)硪黄猨avascript瀏覽器用戶代理檢測腳本實(shí)現(xiàn)方法。小編覺得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-10-10