使用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 相关文章推荐
fckeditor 获取文本框值的实现代码
Feb 09 Javascript
javascript生成json数据简单示例分享
Feb 14 Javascript
解决用jquery load加载页面到div时,不执行页面js的问题
Feb 22 Javascript
探索Vue.js component内容实现
Nov 03 Javascript
Angular4学习之Angular CLI的安装与使用教程
Jan 04 Javascript
基于cropper.js封装vue实现在线图片裁剪组件功能
Mar 01 Javascript
Nuxt.js实现校验访问浏览器类型的中间件
Aug 24 Javascript
angular6的响应式表单的实现
Oct 10 Javascript
微信小程序网络层封装的实现(promise, 登录锁)
May 08 Javascript
基于layPage插件实现两种分页方式浅析
Jul 27 Javascript
Vue路由对象属性 .meta $route.matched详解
Nov 04 Javascript
Javascript中Math.max和Math.max.apply的区别和用法详解
Aug 24 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
提示Trying to clone an uncloneable object of class Imagic的解决
2011/10/27 PHP
destoon常用的安全设置概述
2014/06/21 PHP
php生成静态html页面的方法(2种方法)
2015/09/14 PHP
PHP生成word文档的三种实现方式
2016/11/14 PHP
PHP自动补全表单的两种方法
2017/03/06 PHP
php实现保存周期为1天的购物车类
2017/07/07 PHP
支持汉转拼和拼音分词的PHP中文工具类ChineseUtil
2018/02/23 PHP
PHP安装扩展mcrypt以及相关依赖项深入讲解
2021/03/04 PHP
Javascript实例教程(19) 使用HoTMetal(2)
2006/12/23 Javascript
Javascript YUI 读码日记之 YAHOO.util.Dom - Part.3
2008/03/22 Javascript
分享一个自己写的table表格排序js插件(高效简洁)
2011/10/29 Javascript
JavaScript中的迭代器和生成器详解
2014/10/29 Javascript
jQuery中:gt选择器用法实例
2014/12/29 Javascript
jquery实现textarea输入框限制字数的方法
2015/01/15 Javascript
js代码验证手机号码和电话号码是否合法
2015/07/30 Javascript
JavaScript  cookie 跨域访问之广告推广
2016/04/20 Javascript
gulp-htmlmin压缩html的gulp插件实例代码
2016/06/06 Javascript
使用ajaxfileupload.js实现上传文件功能
2016/08/13 Javascript
Bootstrap的fileinput插件实现多文件上传的方法
2016/09/05 Javascript
基于vue 添加axios组件,解决post传参数为null的问题
2018/03/05 Javascript
ng-events类似ionic中Events的angular全局事件
2018/09/05 Javascript
vue自定义全局共用函数详解
2018/09/18 Javascript
Vue Element UI + OSS实现上传文件功能
2019/07/31 Javascript
python实现发送带附件的邮件代码分享
2020/09/22 Python
详解Django ORM引发的数据库N+1性能问题
2020/10/12 Python
python 模拟登录B站的示例代码
2020/12/15 Python
俄罗斯旅游网站:Tripadvisor俄罗斯
2017/03/21 全球购物
英国领先的狗和宠物美容专家:Christies Direct
2017/04/03 全球购物
美国知名的隐形眼镜电商:Contacts America
2019/11/19 全球购物
腾讯广告词
2014/03/19 职场文书
2014年电教工作总结
2014/12/19 职场文书
公司地址变更通知
2015/04/25 职场文书
放牛班的春天观后感
2015/06/01 职场文书
革命电影观后感
2015/06/18 职场文书
2016年中学清明节活动总结
2016/04/01 职场文书
Python接口自动化之文件上传/下载接口详解
2022/04/05 Python