使用Bootstrap Tabs选项卡Ajax加载数据实现

使用Bootstrap Tabs选项卡Ajax加载数据实现

本文实例为大家分享了Bootstrap Tabs选项卡Ajax加载数据的具体代码，供大家参考，具体内容如下

HTML代码(仅展示了部分关键性代码)

  主页

(current)

  试卷库

  我的收藏

  关于

实现思路:

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标签响应

}

http://

这次总算是成功了!

看下演示图:

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。