一步一步制作jquery插件Tabs实现过程


Posted in Javascript onJuly 06, 2010

tabs是现在网页应用最广的一种效果,jquery插件和非jquery插件也有不少,有一些朋友问我怎么用jquery.ui.tabs的ajax怎么只请求服务器一次原来我想其实很简单,看看官方的API就了解,不过我在回复这些朋友之前,用firebug查看了官方的ui.tabs发现,声明了ajax缓存,每点一个tabs时,仍然会有服务器请求这应该是服务器缓存,而不是实际上我们要求的只ajax一次,不再请求服务器了接下来我找了一下其它的tabs插件,基本上没有符合要求的,不是太庞大就是太简单,太过庞大的话不如用ui.tabs,文档和代码规范上都是可靠的因此,自制一个简洁的tabs插件还是有必要的在设计之前,先整理好思路,实现tabs,自动轮换,ajax等主要功能,然后是dom的排列形式,这里采用传统的
<div id="tabs">

<ul>

<li><a href="#tabs1">tabs1</a></li>

<li><a href="#tabs2" rel="ajax.htm">tabs2</a></li>

</ul>

<div id="tabs1">Hello World!</div>

<div id="tabs2"></div>
</div>
一个li对应一个div的方式,当ajax时,添加一个a的rel属性,并将内容写入对应的div中,再去掉rel属性,这样就只请求服务器一次,接下来都是div已经写入的内容了
我这里没有使用cookie,可以结合jquery.cookie插件,这样即使用户关闭网页下次再打开,也不用请求服务器了
一,首先写个jquery插件的闭包,园子里这两天有个朋友写了javascript的闭包概念,挺好的,有兴趣的朋友去看看

(function ($) { 
//code here 
})(jQuery);

二,插件命名,这里命名为aTabs,这样绑定的时候可以用$(...).aTabs(),本人英文名Allen,所以用a字头命名了~
$.fn.aTabs = function (options) { 
//api 
//main function 
}

三,把想好的功能写成API,供外部修改
$.fn.aTabs.defaults = { 
firstOn: 0, 
className: 'selected', 
eventName: 'all', //click,mouserover,all 
loadName: '加载中...', //ajax等待字符串 
fadeIn: 'normal', 
autoFade: false, 
autoFadeTime: 3 
}; 
var opts = $.extend({}, $.fn.aTabs.defaults, options); //这里可以将外部输入的代替掉默认的值,$.extend作用详见 <A href="http://api.jquery.com/jQuery.extend/">http://api.jquery.com/jQuery.extend/</A>,看不懂英文的直接看其中的例子就行

四,编写主体功能,说明在代码中看注释
return this.each(function () { //这里为每个绑定dom插件 
var target = $(this); 
var div = target.children().not("ul,span"); //所有的tabs显示体div 
var tabs = target.find('ul:eq(0) li'); //所有的tabs头部索引 
function Tabs() { 
if ($(this).hasClass(opts.className)) { 
return false; 
} 
tabsShow(div, $(this)); 
return false; 
} 
function tabsShow(div, li, index) { 
div.stop(true, true).hide(); 
//自动轮换用 
if (typeof (index) == "number") { 
if (li.find("a").attr("rel")) ajax(div, li); 
$(div[index]).stop(true,true).fadeIn(opts.fadeIn); 
tabs.stop(true, true).removeClass(opts.className); 
$(tabs[index]).stop(true, true).addClass(opts.className); 
} 
//非自动轮换 
else { 
var tabBody = div.filter(li.find("a").attr("href")); 
if (li.find("a").attr("rel")) ajax(div, li); 
tabBody.stop(true,true).fadeIn(opts.fadeIn); 
tabs.stop(true, true).removeClass(opts.className); 
li.stop(true, true).addClass(opts.className); 
} 
} 
function ajax(div, li) {//这里是关键ajax,通过操作rel的方式实现只请求服务器一次 
var href = li.find("a").attr("href"); 
var rel = li.find("a").attr("rel"); //ajax请求url 
var i = div.filter(href); //当前div 
if (rel) { //如果ajax请求url不为空,只ajax一次 
i.html(opts.loadName); 
$.ajax({ 
url: rel, 
cache: false, 
success: function (html) { 
i.html(html); 
}, 
error: function () { 
i.html('加载错误,请重试!'); 
} 
}); 
li.find("a").removeAttr("rel"); //只ajax一次 
} 
} 
if (opts.autoFade) { 
var index = opts.firstOn + 1; 
setInterval(function () { 
if (index >= div.length) { 
index = 0; 
} 
tabsShow(div, $(this), index++); 
}, opts.autoFadeTime * 1000); 
} 
tabs.bind(opts.eventName == 'all' ? 'click mouseover' : opts.eventName, Tabs) //绑定事件 
.filter(':first').trigger(opts.eventName == 'all' ? 'click' : opts.eventName); //自动触发事件 
});

最后,将以上整合,tabs插件就诞生了,下面是全部源码:
/* 
* 作者:黑曜石 
*/ 
(function ($) { 
$.fn.aTabs = function (options) { 
$.fn.aTabs.defaults = { 
firstOn: 0, 
className: 'selected', 
eventName: 'all', //click,mouserover,all 
loadName: '加载中...', //ajax等待字符串 
fadeIn: 'normal', 
autoFade: false, 
autoFadeTime: 3 
}; 
var opts = $.extend({}, $.fn.aTabs.defaults, options); 
return this.each(function () { 
var target = $(this); 
var div = target.children().not("ul,span"); //所有的tabs显示体div 
var tabs = target.find('ul:eq(0) li'); //所有的tabs头部索引 
function Tabs() { 
if ($(this).hasClass(opts.className)) { 
return false; 
} 
tabsShow(div, $(this)); 
return false; 
} 
function tabsShow(div, li, index) { 
div.stop(true, true).hide(); 
//自动轮换用 
if (typeof (index) == "number") { 
if (li.find("a").attr("rel")) ajax(div, li); 
$(div[index]).stop(true,true).fadeIn(opts.fadeIn); 
tabs.stop(true, true).removeClass(opts.className); 
$(tabs[index]).stop(true, true).addClass(opts.className); 
} 
//非自动轮换 
else { 
var tabBody = div.filter(li.find("a").attr("href")); 
if (li.find("a").attr("rel")) ajax(div, li); 
tabBody.stop(true,true).fadeIn(opts.fadeIn); 
tabs.stop(true, true).removeClass(opts.className); 
li.stop(true, true).addClass(opts.className); 
} 
} 
function ajax(div, li) { 
var href = li.find("a").attr("href"); 
var rel = li.find("a").attr("rel"); //ajax请求url 
var i = div.filter(href); //当前div 
if (rel) { //如果ajax请求url不为空,只ajax一次 
i.html(opts.loadName); 
$.ajax({ 
url: rel, 
cache: false, 
success: function (html) { 
i.html(html); 
}, 
error: function () { 
i.html('加载错误,请重试!'); 
} 
}); 
li.find("a").removeAttr("rel"); //只ajax一次 
} 
} 
if (opts.autoFade) { 
var index = opts.firstOn + 1; 
setInterval(function () { 
if (index >= div.length) { 
index = 0; 
} 
tabsShow(div, $(this), index++); 
}, opts.autoFadeTime * 1000); 
} 
tabs.bind(opts.eventName == 'all' ? 'click mouseover' : opts.eventName, Tabs) //绑定事件 
.filter(':first').trigger(opts.eventName == 'all' ? 'click' : opts.eventName); //自动触发事件 
}); 
}; 
})(jQuery);
Javascript 相关文章推荐
JS获取各种浏览器窗口大小的方法
Jan 14 Javascript
JS与jQ读取xml文件的方法
Dec 08 Javascript
浅析angularJS中的ui-router和ng-grid模块
May 20 Javascript
KVM虚拟化技术之使用Qemu-kvm创建和管理虚拟机的方法
Oct 05 Javascript
详解javascript中对数据格式化的思考
Jan 23 Javascript
理解 Node.js 事件驱动机制的原理
Aug 16 Javascript
如何使用VuePress搭建一个类型element ui文档
Feb 14 Javascript
vue slot与传参实例代码讲解
Apr 28 Javascript
React学习之受控组件与数据共享实例分析
Jan 06 Javascript
js HTML DOM EventListener功能与用法实例分析
Apr 27 Javascript
解决idea开发遇到javascript动态添加html元素时中文乱码的问题
Sep 29 Javascript
nginx配置域名后的二级目录访问不同项目的配置操作
Nov 06 Javascript
jQuery基础知识filter()和find()实例说明
Jul 06 #Javascript
jQuery中filter(),not(),split()使用方法
Jul 06 #Javascript
jQuery选择没有colspan属性的td的代码
Jul 06 #Javascript
jquery 查找新建元素代码
Jul 06 #Javascript
jquery 3D球状导航的文章分类
Jul 06 #Javascript
Javascript Function对象扩展之延时执行函数
Jul 06 #Javascript
JavaScript经典效果集锦
Jul 06 #Javascript
You might like
虫族 Zerg 魔法科技
2020/03/14 星际争霸
php自动识别文件编码并转换为UTF-8的方法
2014/06/12 PHP
php+mysql实现数据库随机重排实例
2014/10/17 PHP
基于OpenCart 开发支付宝,财付通,微信支付参数错误问题
2015/10/01 PHP
Codeigniter中集成smarty和adodb的方法
2016/03/04 PHP
php构造方法中析构方法在继承中的表现
2016/04/12 PHP
PHP实现在数据库百万条数据中随机获取20条记录的方法
2017/04/19 PHP
Yii框架分页实现方法详解
2017/05/20 PHP
PHP基于DOMDocument解析和生成xml的方法分析
2017/07/17 PHP
详细对比php中类继承和接口继承
2018/10/11 PHP
jquery构造器的实现代码小结
2011/05/16 Javascript
jquery实现简单的拖拽效果实例兼容所有主流浏览器
2013/06/21 Javascript
javascript Array.prototype.slice的使用示例
2013/11/14 Javascript
Javascript 读取操作Sql中的Xml字段
2014/10/09 Javascript
jQuery实现本地预览上传图片功能
2016/01/08 Javascript
jQuery控制div实现随滚动条滚动效果
2016/06/07 Javascript
JavaScript设计模式之单体模式全面解析
2016/09/09 Javascript
Angular的自定义指令以及实例
2016/12/26 Javascript
js实现简单的手风琴效果
2017/02/27 Javascript
ES6中参数的默认值语法介绍
2017/05/03 Javascript
React Native 搭建开发环境的方法步骤
2017/10/30 Javascript
详解如何在微信小程序开发中正确的使用vant ui组件
2018/09/13 Javascript
解决Vue中的生命周期beforeDestory不触发的问题
2020/07/21 Javascript
js对象属性名驼峰式转下划线的实例代码
2020/09/17 Javascript
python实现用于测试网站访问速率的方法
2015/05/26 Python
详解pyppeteer(python版puppeteer)基本使用
2019/06/12 Python
python对文件的操作方法汇总
2020/02/28 Python
python实现数字炸弹游戏
2020/07/17 Python
Python3.9最新版下载与安装图文教程详解(Windows系统为例)
2020/11/28 Python
在html页面中取得session中的值的方法
2020/08/11 HTML / CSS
加拿大建筑和装修专家:Reno-Depot
2017/12/21 全球购物
巴西电子产品购物网站:Saldão da Informática
2018/01/09 全球购物
美国在线眼镜店:GlassesShop
2018/11/15 全球购物
平面设计专业求职信
2014/08/09 职场文书
农业项目合作意向书
2015/05/08 职场文书
2016年学校“6﹒26国际禁毒日”宣传活动总结
2016/04/05 职场文书