javascript – jQuery插件 – 如何添加/绑定事件

(function($)
{
    $.tippedOff = function(SELEctor,setTings)
    {
        var config = {
            'top':0,'left':0,'wait':3000
        };
        if(setTings){$.extend(config,setTings);}

        var $elem = $(SELEctor);
        if($elem.length > 0)
        {
            $elem.each(function()
            {
                $(this).css({"color":"#F00"});
            })
        }

        return this;
    };
})(jQuery);

在创建插件时,很容易使事情过于复杂,所以尽量保持简单.

我已经为您提供了tippedOff插件的两个示例.这两个插件也是jsfiddle demo.

第一个使用原始代码(无意义更改)：

$.tippedOff = function(SELEctor,setTings);}

        var $elem = $(SELEctor);
        if($elem.length > 0)
        {
            $elem.each(function()
            {
              //bind mouseenter,mouSELEave,click event
                $(this).css({"color":"#F00"})
                .mouseenter(function(){
                  $(this).css({"color":"green"});
                })
                .mouSELEave(function(){
                  $(this).css({"color":"#F00"});
                })
                .click(function(){
                  $(this).html('clicked');
                });

            })
        }

        return this;
    };

但是,这个是基于您的原始代码.基本上,我已经使用these tips重建了你的原始代码.这就是我亲自去做的事情.我还向您提供了以下细分所做的更改. (重大变化)：

$.fn.tippedOff = function(setTings) {
      var config = $.extend( {
          'top':0,'wait':3000,'color': 'orange','hoverColor': 'blue'
      },setTings);

      return this.each(function() {
          $this = $(this);
          $this.css({ 'color': config.color})
          .mouseenter(function(){
             $this.css({ 'color': config.hoverColor });
          })
          .mouSELEave(function(){
             $this.css({ 'color': config.color });
          })
          .click(function(){
             $this.html('clicked');
          });
      });
    }

—————————————-

分解：

原始代码：

$.tippedOff = function(SELEctor,setTings) {

更改：

$.fn.tippedOff = function( setTings ) {

@L_675_28@：

$.tippedOff和$.fn.tippedOff之间的差异很大！将插件添加到$.fn命名空间而不是$namespace将阻止您必须提供选择器并简化生活.

我个人喜欢this answer,其中@Chad声明：

原始代码：

if(setTings){$.extend(config,setTings);}

更改：

var config = $.extend( {
          'top':0,'wait':3000
      },setTings);

@L_675_28@：

拥有if语句是多余的. .extend()为您完成所有工作.

原始代码：

var $elem = $(SELEctor);
        if($elem.length > 0)
        {
            $elem.each(function()
            {
                $(this).css({"color":"#F00"});
            })
        }

        return this;

更改：

return this.each(function() {
          $this = $(this);
          $this.css({ 'color': config.color});
});

@L_675_28@：

使用return this.each(function(){})是一种很好的做法并保持可链接性.不仅如此,您将不再需要担心选择器的长度.

*注意：如果要添加其他事件,请在插件中使用不同的方法：jQuery Doc Reference – Authoring Plugins.

我希望这有帮助,如果您有任何问题,请告诉我！