利用jquery插件制作Tabs切换教程(1/2)
自动轮换，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>
首先写个jquery插件的闭包，园子里这两天有个朋友写了网页特效的闭包概念，挺好的，有兴趣的朋友去看看
www.zzzyk.com 代码如下:
(function ($) {
//code here
})(jquery);
二，插件命名，这里命名为atabs，这样绑定的时候可以用$(...).atabs()，本人英文名allen，所以用a字头命名了~
代码如下:
$.fn.atabs = function (options) {
//api
//main function
}
三，把想好的功能写成api，供外部修改
www.zzzyk.com 代码如下:
$.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>，看不懂英文的直接看其中的例子就行
四，编写主体功能，说明在代码中看注释
www.zzzyk.com 代码如下:
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);
}
补充：网页制作,jquery
