jquery插件编写（以折叠面板为例）

时间：2022-10-11 08:10:22

创建一个 jQuery 插件所推荐的方法是，先创建一个允许使用美元符号 ($) 的包装器函数。在默认情况下，美元符号可能与其他 JavaScript 框架发生冲突，如果将插件包装在一个函数中，就不会出现冲突。所以推荐使用下面代码创建jQuery插件：

[html]  view plain copy
  1. (function($) {  
  2.     $.fn.accordion = function() {  
  3.         // 添加插件代码  
  4.     };  
  5. })(jQuery);  


上面代码，jQuery 关键字被应用到包装器函数中，这允许您在插件中使用美元符号，就像使用 fn 属性时那样。包装器函数就绪后，就可以在整个插件的任何地方使用美元符号代替 jQuery 关键字，不会干扰其他第三方插件。


插件代码

[html]  view plain copy
  1. (function($) {  
  2.   $.fn.accordion = function(options) {  
  3.     return this.each(function() {  
  4.       var dts = $(this).children('dt');  
  5.       dts.click(onClick);  
  6.       dts.each(reset);  
  7.     });  
  8.    
  9.     function onClick() {  
  10.       $(this).siblings('dt').each(hide);  
  11.       if($(this).next().is(":hidden")){  
  12.         $(this).next().slideDown('fast');  
  13.         return false;  
  14.       }  
  15.       if($(this).next().is(":visible")){  
  16.          $(this).next().slideUp('fast');  
  17.         return false;  
  18.       }  
  19.         
  20.     }  
  21.    
  22.     function hide() {  
  23.       $(this).next().slideUp('fast');  
  24.     }  
  25.    
  26.     function reset() {  
  27.       $(this).next().hide();  
  28.     }  
  29.   }  
  30. })(jQuery);  

页面代码

[html]  view plain copy
  1. <!DOCTYPE HTML>  
  2. <html>  
  3. <head>  
  4.     <title>自定义你的插件</title>  
  5.     <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>  
  6.     <script src="aa.js"></script>//插件js  
  7. <script>  
  8. $(function(){  
  9.     //调用你的自定义插件  
  10.       $('dl#my-accordion').accordion();//调用插件  
  11. });  
  12. </script>  
  13. </head>  
  14. <body>  
  15.     <dl class="accordion" id="my-accordion">  
  16.       <dt>Section 1</dt>  
  17.         <dd>Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam.</dd>  
  18.       <dt>Section 2</dt>  
  19.         <dd>Vestibulum a velit eu ante scelerisque vulputate.</dd>  
  20.       <dt>Section 3</dt>  
  21.         <dd>Nam mi. Proin viverra leo ut odio. Curabitur malesuada.</dd>  
  22.       <dt>Section 4</dt>  
  23.         <dd>Vivamus nisi metus, molestie vel, gravida in, condimentum sit amet, nunc.</dd>  
  24. </dl>  
  25. </body>  
  26. </html>  

效果如下


jquery插件编写（以折叠面板为例）jquery插件编写（以折叠面板为例）


这就是我们想要的效果


标签：

相关文章