本文实例为大家分享了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(); }); });
终于完成"color: #800000">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标签响应 }
这次总算是成功了!
看下演示图:
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
华山资源网 Design By www.eoogi.com
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
华山资源网 Design By www.eoogi.com
暂无评论...
更新日志
2024年09月25日
2024年09月25日
- 纯音入心系列纯音乐《古筝与现代音乐的交织》1CD[MP3][96MB]
- 王俪婷.2011-ROMANCE【华研国际】【WAV+CUE】
- 狮子合唱团.2016-LION(引进版)【华纳】【WAV+CUE】
- 范文芳.1996-FNNTASY【HYPE】【WAV+CUE】
- 纯音入心系列纯音乐《韵味古筝曲》1CD[MP3][146.2MB]
- 纯音入心系列纯音乐《古筝系列-传统乐曲》1CD[MP3][974.7MB]
- 纯音入心系列纯音乐《古筝系列-弦凝指咽声停处》1CD[MP3][656.5MB]
- 群星.1994-大烂片2辑【派森】【WAV+CUE】
- 吴倩莲.1997-望爱【EMI百代】【WAV+CUE】
- 杨千嬅.2002-万紫千红演唱会2CD(2024环球红馆40复刻系列)【环球】【WAV+CUE】
- 郭采洁.2015-Begin.Again爱造飞鸡【华纳】【FLAC分轨】
- 许志安.2011-ON.AND.ON【东亚】【WAV+CUE】
- 潘秀琼.1994-木兰从军【名将】【WAV+CUE】
- 纯音入心系列纯音乐《古筝系列-当流行乐遇到古筝》1CD[MP3][1.9GB]
- 纯音入心系列纯音乐《精选古筝名曲100首》1CD[MP3][388.7MB]