JQuery如何自定义插件

首先，写单独的JS文件：

 

 

 

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34

// JavaScript Document <span style="color:#FF0000;"><strong>//$.fn 是扩展插件的方法</strong></span> (function($){   //形成闭包，将作用域进行限定                                 $.fn.miaovTab=function(){                           var This=this;             $(this).find('input').click(function(){                               $(This).find('input').attr('class','');                 $(This).find('p').fadeOut();                                                     $(this).attr('class','active');                 $(This).find('p').eq($(this).index()).fadeIn();                               });                                         };                                      })(jQuery);

 

 

 

 

然后，我们在页面中，加入如下代码：

<script type=text/javascript src=E:各类工程文件BS学习jqueryjqueryjquery-1.7.2.min.js>

 </script>

<script language=JavaScript type=text/javascript src=JS插件示例.js></script>

<script> $(function(){ $('#p1').miaovTab(); });</script>

11111

22222

33333

当我们在浏览器中查看时，可以点击3个按钮，做出Tab的切换效果。