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


Posted in Javascript onDecember 23, 2016

本文实例为大家分享了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加载数据实现

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript中万恶的function实例分析
May 25 Javascript
一个封装js代码-----展开收起效果示例
Jul 03 Javascript
jquery获取当前点击对象的value方法
Feb 28 Javascript
jQuery判断当前点击的是第几个li的代码
Sep 26 Javascript
简单谈谈node.js 版本控制 nvm和 n
Oct 15 Javascript
Webpack中css-loader和less-loader的使用教程
Apr 27 Javascript
JavaScript限制在客户区可见范围的拖拽(解决scrollLeft和scrollTop的问题)(2)
May 17 Javascript
详解vue.js数据传递以及数据分发slot
Jan 20 Javascript
vue2.0 element-ui中el-select选择器无法显示选中的内容(解决方法)
Aug 24 Javascript
深入浅析Vue.js 中的 v-for 列表渲染指令
Nov 19 Javascript
浅谈Vue.js中如何实现自定义下拉菜单指令
Jan 06 Javascript
详解微信小程序回到顶部的两种方式
May 09 Javascript
ionic开发中点击input时键盘自动弹出
Dec 23 #Javascript
JS敏感词过滤代码
Dec 23 #Javascript
关于JS Lodop打印插件打印Bootstrap样式错乱问题的解决方案
Dec 23 #Javascript
基于BootStrap栅格栏系统完成网站底部版权信息区
Dec 23 #Javascript
JS判断鼠标进入容器的方向与window.open新窗口被拦截的问题
Dec 23 #Javascript
Bootstrap和Java分页实例第一篇
Dec 23 #Javascript
Node.js利用Net模块实现多人命令行聊天室的方法
Dec 23 #Javascript
You might like
PHP HTML JavaScript MySQL代码如何互相传值的方法分享
2012/09/30 PHP
PHP简单计算两个时间差的方法示例
2017/06/20 PHP
php中html_entity_decode实现HTML实体转义
2018/06/13 PHP
js判断变量是否空值的代码
2008/10/26 Javascript
兼容ie、firefox的图片自动缩放的css跟js代码分享
2012/01/21 Javascript
解析使用js判断只能输入数字、字母等验证的方法(总结)
2013/05/14 Javascript
node.js中的fs.fchownSync方法使用说明
2014/12/16 Javascript
js绘制圆形和矩形的方法
2015/08/05 Javascript
localStorage实现便签小程序
2016/11/28 Javascript
微信小程序 扎金花简单实例
2017/02/21 Javascript
深入浅出webpack教程系列_安装与基本打包用法和命令参数详解
2017/09/10 Javascript
原生JS实现循环Nodelist Dom列表的4种方式示例
2018/02/11 Javascript
vue element-ui table组件动态生成表头和数据并修改单元格格式 父子组件通信
2019/08/15 Javascript
Layui 数据表格批量删除和多条件搜索的实例
2019/09/04 Javascript
three.js利用gpu选取物体并计算交点位置的方法示例
2019/11/25 Javascript
微信小程序手动添加收货地址省市区联动
2020/05/18 Javascript
解决Vue的文本编辑器 vue-quill-editor 小图标样式排布错乱问题
2020/08/03 Javascript
[01:16:16]DOTA2-DPC中国联赛定级赛 RNG vs Phoenix BO3第二场 1月8日
2021/03/11 DOTA
python算法学习之基数排序实例
2013/12/18 Python
python 标准差计算的实现(std)
2019/07/29 Python
解决安装python3.7.4报错Can''t connect to HTTPS URL because the SSL module is not available
2019/07/31 Python
tensorflow 获取checkpoint中的变量列表实例
2020/02/11 Python
django日志默认打印request请求信息的方法示例
2020/05/17 Python
python如何编写win程序
2020/06/08 Python
详解CSS3新增的背景属性
2019/12/25 HTML / CSS
详解android与HTML混合开发总结
2018/06/06 HTML / CSS
如何开启linux的ssh服务
2013/06/03 面试题
美术师范毕业生自荐信
2013/11/16 职场文书
澳大利亚商务邀请函
2014/01/17 职场文书
人力资源主管职责范本
2014/03/05 职场文书
学生会竞选演讲稿
2014/04/24 职场文书
房地产广告策划方案
2014/05/15 职场文书
学习朴航瑛老师爱岗敬业先进事迹思想汇报
2014/09/17 职场文书
2016寒假社会实践心得体会范文
2015/10/09 职场文书
2019年12月24日平安夜祝福语集锦
2019/12/24 职场文书
《废话连篇——致新手》——chinapizza
2022/04/05 无线电