jquery插件编写(以折叠面板为例)

页面导航:首页 > 网络编程 > JavaScript > jquery插件编写(以折叠面板为例)

jquery插件编写(以折叠面板为例)

来源: 作者: 时间:2016-02-01 09:32 【

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

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

(function($) {
    $.fn.accordion = function() {
        // 添加插件代码
    };
})(jQuery);

 

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

 

插件代码

 

(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);

 

页面代码



<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>
Section 1
Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam.
Tags:

文章评论

最 近 更 新
热 点 排 行
Js与CSS工具
代码转换工具

<