1、打两个括号 ()()
2、在第二个括号里面加入"jQuery"
()(jQuery)3、在第一个括号里面写一个匿名函数,传参是一个$
(function($){})(jQuery)4、在function($){}写:$.fn.插件名,如$.fn.tabs,这里的fn表示本插件是需要一个dom对象的插件
5、在刚才的$.fn.tabs后面“=”一个传参的(有参)匿名函数
$.fn.tabs = function(options){ }6、在刚才的匿名函数里面定义一个对象,对象的属性就是插件需要传递的参数,默认值就是插件参数的默认值:
$.fn.tabs = function(options){ var defaults = { currentStyle : "current", contentList : "content_list" } }7、将传递的参数,继承刚才定义的对象defaults
$.fn.tabs = function(options){ var defaults = { currentStyle : "current", contentList : "content_list" } options = $.extend(defaults,options); }8、将你写的代码,封装起来,得到下面的代码:
(function($){ $.fn.tabs = function(options){ var defaults = { currentStyle : "current", contentList : "content_list" } options = $.extend(defaults,options); $(this).mouseover(function(){ $(this).addClass(options.currentStyle).siblings().removeClass(options.currentStyle); var _index = $(this).index(); $("."+options.contentList).eq(_index).show().siblings().hide(); }) } })(jQuery)9.调用插件
$("#nav_des li").tabs({ currentStyle : "current456", contentList : "con" });这里是一个tab选项卡插件,传递两个参数,一个是tab的当前class样式,一个是tab选项卡的类容容器class名。