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

最新推荐文章于 2022-07-31 17:02:41 发布

kaikai4

最新推荐文章于 2022-07-31 17:02:41 发布

阅读量558

点赞数

分类专栏： js

js 专栏收录该内容

69 篇文章 1 订阅

订阅专栏

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

[html]view plaincopy 
   
 (function($) {  
     $.fn.accordion = function() {  
         // 添加插件代码  
     };  
 })(jQuery);  

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

插件代码

[html]view plaincopy 
   
 (function($) {  
   $.fn.accordion = function(options) {  
     return this.each(function() {  
       var dts = $(this).children('dt');  
       dts.click(onClick);  
       dts.each(reset);  
     });  
    
     function onClick() {  
       $(this).siblings('dt').each(hide);  
       if($(this).next().is(":hidden")){  
         $(this).next().slideDown('fast');  
         return false;  
       }  
       if($(this).next().is(":visible")){  
          $(this).next().slideUp('fast');  
         return false;  
       }  
         
     }  
    
     function hide() {  
       $(this).next().slideUp('fast');  
     }  
    
     function reset() {  
       $(this).next().hide();  
     }  
   }  
 })(jQuery);  

页面代码

[html]view plaincopy 
   
 <!DOCTYPE HTML>  
 <html>  
 <head>  
     <title>自定义你的插件</title>  
     <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>  
     <script src="aa.js"></script>//插件js  
 <script>  
 $(function(){  
     //调用你的自定义插件  
       $('dl#my-accordion').accordion();//调用插件  
 });  
 </script>  
 </head>  
 <body>  
     <dl class="accordion" id="my-accordion">  
       <dt>Section 1</dt>  
         <dd>Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam.</dd>  
       <dt>Section 2</dt>  
         <dd>Vestibulum a velit eu ante scelerisque vulputate.</dd>  
       <dt>Section 3</dt>  
         <dd>Nam mi. Proin viverra leo ut odio. Curabitur malesuada.</dd>  
       <dt>Section 4</dt>  
         <dd>Vivamus nisi metus, molestie vel, gravida in, condimentum sit amet, nunc.</dd>  
 </dl>  
 </body>  
 </html>  

效果如下

这就是我们想要的效果

kaikai4

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jquery插件编写（以折叠面板为例）

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

扫一扫