使用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 相关文章推荐
ExtJs Excel导出并下载IIS服务器端遇到的问题
Sep 16 Javascript
jquery实现鼠标拖动图片效果示例代码
Jan 09 Javascript
JS 弹出层 定位至屏幕居中示例
May 21 Javascript
JS倒计时代码汇总
Nov 25 Javascript
了不起的node.js读书笔记之例程分析
Dec 22 Javascript
详解XMLHttpRequest(一)同步请求和异步请求
Sep 14 Javascript
angular十大常见问题
Mar 07 Javascript
react中的ajax封装实例详解
Oct 17 Javascript
vue.js-div滚动条隐藏但有滚动效果的实现方法
Mar 03 Javascript
微信小程序自定义组件实现环形进度条
Nov 17 Javascript
vue-resourc发起异步请求的方法
Feb 11 Javascript
实现一个简单得数据响应系统
Nov 11 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
不用mod_rewrite直接用php实现伪静态化页面代码
2008/10/04 PHP
回帖脱衣服的图片实现代码
2014/02/15 PHP
php使用curl和正则表达式抓取网页数据示例
2014/04/13 PHP
php+js iframe实现上传头像界面无跳转
2014/04/29 PHP
PHP中header函数的用法及其注意事项详解
2016/06/13 PHP
PHP生成及获取JSON文件的方法
2016/08/23 PHP
php事件驱动化设计详解
2016/11/10 PHP
三个思路解决laravel上传文件报错:413 Request Entity Too Large问题
2017/11/13 PHP
nicejforms——美化表单不用愁
2007/02/20 Javascript
FusionCharts图表显示双Y轴双(多)曲线
2012/11/22 Javascript
javascript中关于&amp;&amp; 和 || 表达式的小技巧分享
2015/04/10 Javascript
详解Vue.js动态绑定class
2016/12/20 Javascript
bootstrap手风琴折叠示例代码分享
2017/05/22 Javascript
echarts大屏字体自适应的方法步骤
2019/07/12 Javascript
详解基于Wepy开发小程序插件(推荐)
2019/08/01 Javascript
javascript实现计算器功能
2020/03/30 Javascript
基于vue项目设置resolves.alias: '@'路径并适配webstorm
2020/12/02 Vue.js
python处理文本文件实现生成指定格式文件的方法
2014/07/31 Python
以windows service方式运行Python程序的方法
2015/06/03 Python
Python数据结构与算法之图的最短路径(Dijkstra算法)完整实例
2017/12/12 Python
pandas 中对特征进行硬编码和onehot编码的实现
2019/12/20 Python
Python爬虫爬取、解析数据操作示例
2020/03/27 Python
Spring @Enable模块驱动原理及使用实例
2020/06/23 Python
python接入支付宝的实例操作
2020/07/20 Python
python向xls写入数据(包括合并,边框,对齐,列宽)
2021/02/02 Python
CSS3 简单又实用的5个属性
2010/03/04 HTML / CSS
英国最大的香水商店:The Fragrance Shop
2018/07/06 全球购物
The North Face官方旗舰店:美国著名户外品牌
2020/09/28 全球购物
国际贸易专业个人求职信范文分享
2013/12/14 职场文书
大学生个人事迹材料
2014/01/21 职场文书
事假请假条范文
2014/04/11 职场文书
小学生操行评语
2014/04/22 职场文书
教师对学生的评语
2014/04/28 职场文书
优质护理服务演讲稿
2014/05/07 职场文书
技术负责人岗位职责
2015/02/10 职场文书
golang判断key是否在map中的代码
2021/04/24 Golang