您的位置：首页 > Web前端 > JQuery

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

2015-07-27 16:41 537 查看

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

页面代码

<!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>

效果如下

这就是我们想要的效果

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航