今天看了一下 Jquery权威指南这本书的插件，提到Jquery插件分为两种 1 对象级别插件 是给Jquery添加对象方法 调用方法是 $.fn.方法名 2 类级别插件 即给Jquery添加新的全局函数 相当于给Jquery类本生添加方法，典型的是 $.AJAX(); 今天也写了一个tab插件 支持鼠标移动和 点击 当然目前常见的只有这两种 当然如果有其他的事件 你可以自定义事件！我用的是对象级别写插件的 对象级别插件 调用的方式是：$("#ID名称"或者"类名称").插件名称({switchingMode:"click"}); 或者 mouseover , 我引用结构还是以前的tab选显卡的结构 样式也是一样的！

下面是HTML结构及CSS

<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><htmlxmlns="http://www.w3.org/1999/xhtml"><head><metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/><title>无标题文档</title><scripttype="text/javascript"src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script><styletype="text/css">ul,li,div{margin:0;padding:0;} ul,li{list-style:none;} .tabWrap{width:450px;margin:0auto50px;overflow:hidden;} .tab{background:#F93;overflow:hidden;width:450px;} .tabli{float:left;width:150px;color:#fff;text-align:center;cursor:pointer;height:22px;line-height:22px;} .tabli.on{background:#F60;} .tabContent.p-content{padding:20px;border:1pxsolid#ddd;border-top:0none;} .tabContent.hide{display:none;} </style><scriptsrc="jQuery.plug.tab.js"type="text/javascript"></script></head><body><divclass="tabWrap"id="tabWrap"> <ulclass="tab"> <li>选项卡1</li> <li>选项卡2</li> <li>选项卡3</li> </ul> <divclass="tabContent"> <divclass="p-content">1111</div> <divclass="p-contenthide">222</div> <divclass="p-contenthide">3333</div> </div> </div> <scripttype="text/javascript">$("#tabWrap").tabsPlug({switchingMode:"mouseover"}); </script></body></html>

调用的方式 如上图所示：

JS

//JavaScriptDocument /** 用法：$("#ID名称").tabsPlug({switchingMode:"click"}); 参数解释：switchingMode是面板切换的模式，如switchingMode:"mouseover"则鼠标移动至选项卡切换面板,默认为click。 整体tabs骨架不变，依然是常用的结构如下： <divclass="tabWrap"id="tabWrap"> <ulclass="tab"> <li>选项卡1</li> <li>选项卡2</li> <li>选项卡3</li> </ul> <divclass="tabContent"> <divclass="p-content">1111</div> <divclass="p-contenthide">222</div> <divclass="p-contenthide">3333</div> </div> </div> 样式：此样式为默认无任何效果样式，可根据需要修改插件样式 插件分为1对象级别插件2类别插件 对象级别插件调用的方式是：$("#ID名称").插件名称({switchingMode:"click"});或者mouseover 类别插件：$.定义的方法(); 下面是对象级别插件 */;(function($){ $.fn.extend({ "tabsPlug":function(options){ vardefaults={switchingMode:"click"};//定义默认切换模式为click也可以自定义mouseover varopts=$.extend({},defaults,options);//将defaults和options参数合并到{} varobj=$(this); varcurrentIndex=0; $(".tabli:first",obj).addClass("on"); /*obj对象为当前调用该插件方法的对象。而后面bind里面的clickIndex=$(".tabli",obj).index($(this));意思就是obj对象下面的ul中的li元素索引index($(this))这里的$(this)则是在li元素中找到当前li元素的索引。*/$(".tabli").bind(opts.switchingMode,function(){ if(currentIndex!=$(".tabli",obj).index($(this))){ currentIndex=$(".tabli",obj).index($(this)); $(".tabli",obj).removeClass("on") $(this).addClass("on"); $(".p-content",obj).eq(currentIndex).show().siblings().hide(); } }); return$(this); } }) })(jQuery);

在页面上这样调用 是：$("#ID名称").插件名称({switchingMode:"click"}); 或者 mouseover 默认情况下 $("#ID名称").插件名称() 即调用点击 当要调用鼠标移上去时候 这样调用就可以了$("#ID名称").插件名称({switchingMode:"mouseover"});其实对象级别插件的写法是 ;(function($){$.fn.extend({})})(jQuery) 这样的结构 当然还有一种写法 是 $.fn.插件名称！代码里面都有注释：下面我们来分析下这个插件代码：

1 ;(function($){$.fn.extend({})})(jQuery) 这样的固定结构 不用说啊 不明白的地方可以google下 然后定义一个函数并且带了一个参数 目地是为了自定义事件类型！

2var defaults = {switchingMode : "click"};这句话意思是 定义默认类型是点击事件$("#ID名称").插件名称() 这样调用 默认情况下是点击 如果想要其他事件 可以这样调用是：$("#ID名称").插件名称({switchingMode:"mouseover或者其他事件类型"});

3var opts = $.extend({},defaults,options);这句话代码的意思是将defaults和options参数合并到{}这里面来然后赋值给一个变量 同时改变了{}这里面的 结构.

4 $(".tab li").bind(opts.switchingMode,function(){
if(currentIndex != $(".tab li",obj).index($(this))){
currentIndex = $(".tab li",obj).index($(this));
$(".tab li",obj).removeClass("on")
$(this).addClass("on");
$(".p-content",obj).eq(currentIndex).show().siblings().hide();
}
}); 这样一段代码 bind里面的clickIndex = $(".tab li", obj).index($(this));意思就是obj对象下面的ul中的li元素索引index($(this))这里的$(this)则是在li元素中找到当前li元素的索引。接下来代码就不用多说啊！

附件：http://down.51cto.com/data/2359396