使用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代码
Aug 13 Javascript
一个简单的js渐显(fadeIn)渐隐(fadeOut)类
Jun 19 Javascript
邮箱下拉自动填充选择示例代码附图
Apr 03 Javascript
使用不同的方法结合/合并两个JS数组
Sep 18 Javascript
jQuery基础知识小结
Dec 22 Javascript
使用vue.js实现联动效果的示例代码
Jan 10 Javascript
JavaScript中值类型和引用类型的区别
Feb 23 Javascript
把JavaScript代码改成ES6语法不完全指南(分享)
Sep 10 Javascript
在vue中使用jointjs的方法
Mar 24 Javascript
Vue指令指令大全
Feb 09 Javascript
vue router带参数页面刷新或回退参数消失的解决方法
Feb 27 Javascript
Vue Element UI + OSS实现上传文件功能
Jul 31 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 中文乱码解决办法总结分析
2009/07/30 PHP
PHP学习之正则表达式
2011/04/17 PHP
Laravel解决nesting level错误和隐藏index.php的问题
2019/10/12 PHP
safari,opera嵌入iframe页面cookie读取问题解决方法
2010/06/23 Javascript
js对象关系图 方便dom操作
2012/03/18 Javascript
JS实现随机乱撞彩色圆球特效的方法
2015/05/05 Javascript
javascript实现跨域的方法汇总
2015/06/25 Javascript
js实现点击切换TAB标签实例
2015/08/21 Javascript
JS图片定时翻滚效果实现方法
2016/06/21 Javascript
jQuery过滤选择器经典应用
2016/08/18 Javascript
Jquery组件easyUi实现表单验证示例
2016/08/23 Javascript
React通过父组件传递类名给子组件的实现方法
2017/11/13 Javascript
Vue 幸运大转盘实现思路详解
2019/05/06 Javascript
JavaScript使用localStorage存储数据
2019/09/25 Javascript
微信小程序页面渲染实现方法
2019/11/06 Javascript
VUE中使用HTTP库Axios方法详解
2020/02/05 Javascript
JS实现手风琴特效
2020/11/08 Javascript
JavaScript实现下拉列表
2021/01/20 Javascript
NodeJS和浏览器中this关键字的不同之处
2021/03/03 NodeJs
python 设置文件编码格式的实现方法
2017/12/21 Python
Python面向对象编程之继承与多态详解
2018/01/16 Python
python中的闭包函数
2018/02/09 Python
Python 利用内置set函数对字符串和列表进行去重的方法
2018/06/29 Python
python查找指定文件夹下所有文件并按修改时间倒序排列的方法
2018/10/21 Python
Python全面分析系统的时域特性和频率域特性
2020/02/26 Python
python pandas dataframe 去重函数的具体使用
2020/07/20 Python
python数据抓取3种方法总结
2021/02/07 Python
浅谈CSS3 动画卡顿解决方案
2019/01/02 HTML / CSS
HTML5新增的表单元素和属性实例解析
2014/07/07 HTML / CSS
美国的Eastbay旗下的运动款子品牌:Final-Score
2018/01/01 全球购物
房地产开盘策划方案
2014/02/10 职场文书
学习十八届三中全会精神实施方案
2014/02/17 职场文书
婚庆公司计划书
2014/09/15 职场文书
HR必备:超全面的薪酬待遇管理方案!
2019/07/12 职场文书
关于HTML编码导致的乱码问题
2021/09/04 HTML / CSS
PostgreSQL数据库去除重复数据和运算符的基本查询操作
2022/04/12 PostgreSQL