使用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实现的分页函数
Feb 07 Javascript
js实现网站首页图片滚动显示
Feb 04 Javascript
浅析JavaScript中两种类型的全局对象/函数
Dec 05 Javascript
在Firefox下js select标签点击无法弹出
Mar 06 Javascript
JS控制FileUpload的上传文件类型实例代码
Oct 07 Javascript
js数组去重的hash方法
Dec 22 Javascript
JavaScript实现定时页面跳转功能示例
Feb 14 Javascript
jQuery表格(Table)基本操作实例分析
Mar 10 Javascript
mongoose设置unique不生效问题的解决及如何移除unique的限制
Nov 07 Javascript
浅谈Vue组件及组件的注册方法
Aug 24 Javascript
PostgreSQL Node.js实现函数计算方法示例
Feb 12 Javascript
vue实现移动端省市区选择
Sep 27 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中使用Imagick实现图像直方图的实现代码
2011/08/30 PHP
php 判断服务器操作系统的类型
2014/02/17 PHP
Yii框架参数化查询中IN查询只能查询一个的解决方法
2017/05/20 PHP
jquery tools系列 expose 学习
2009/09/06 Javascript
JQuery中使用Ajax赋值给全局变量异常的解决方法
2014/01/10 Javascript
为jquery的ajaxfileupload增加附加参数的方法
2014/03/04 Javascript
js中的onchange和onpropertychange (onchange无效的解决方法)
2014/03/08 Javascript
jQuery操作表格(table)的常用方法、技巧汇总
2014/04/12 Javascript
jquery通过visible来判断标签是否显示或隐藏
2014/05/08 Javascript
jquery实现html页面 div 假分页有原理有代码
2014/09/06 Javascript
jquery中checkbox全选失效的解决方法
2014/12/26 Javascript
Node.js的包详细介绍
2015/01/14 Javascript
Javascript闭包(Closure)详解
2015/05/05 Javascript
详解JavaScript中的every()方法
2015/06/08 Javascript
vue router下的html5 history在iis服务器上的设置方法
2017/10/18 Javascript
微信小程序自定义带价格显示日历效果
2018/12/29 Javascript
vue模仿网易云音乐的单页面应用
2019/04/24 Javascript
微信小程序 this.triggerEvent()的具体使用
2019/12/10 Javascript
基于JavaScript实现表格隔行换色
2020/05/08 Javascript
python使用tornado实现简单爬虫
2018/07/28 Python
在python中pandas的series合并方法
2018/11/12 Python
Python 使用 Pillow 模块给图片添加文字水印的方法
2019/08/30 Python
Python小整数对象池和字符串intern实例解析
2020/03/21 Python
python 制作python包,封装成可用模块教程
2020/07/13 Python
英国最大的独立家具零售商:Furniture Village
2016/09/06 全球购物
Betsey Johnson官网:妖娆可爱的连衣裙及鞋子、手袋和配件
2016/12/30 全球购物
Expedia印度:您的一站式在线旅游网站
2017/08/24 全球购物
软件测试题目
2013/02/27 面试题
大专生简历的自我评价
2013/11/26 职场文书
《难忘的泼水节》教学反思
2014/02/27 职场文书
访谈节目策划方案
2014/05/15 职场文书
拓展训练激励口号
2014/06/17 职场文书
中学生社会实践教育活动总结
2015/05/06 职场文书
2015年出纳年终工作总结
2015/05/14 职场文书
2016大学生暑期社会实践心得体会
2016/01/14 职场文书
浅析InnoDB索引结构
2021/04/05 MySQL