jQuery插件的方法

Question

我正在尝试为自定义复选框和单选按钮制作一个 jQuery 插件。

(function($)
{
    $.fn.checkboxRadio = function(options)
    {
        var defaults = some;
        ...

        return this.each(function()
        {
            var button = $(this);
            ...
        });
    }
})(jQuery);

$('input').checkboxRadio(options);现在可以使用了

如何在不更改当前范围的情况下添加方法 check，以便可能使用 $('input').checkboxRadio('check') 之类的东西？

如何处理自定义方法并在我的插件中获取其名称？

Answer 1

这里是官方jquery plugin guide。

关于包装函数的部分可以找到here ("Plugin Methods")（这个例子是一个可能的工具提示插件）：

(function( $ ){
  var methods = {
    init : function(options) { ... },
    show : function() { ... },
    hide : function() { ... },
    update : function(content) { ... }
  };

  $.fn.tooltip = function( method ) {

    // Method calling logic
    if ( methods[method] ) {
      return methods[ method ].apply( this, Array.prototype.slice.call( arguments, 1 ));
    } else if ( typeof method === 'object' || ! method ) {
      return methods.init.apply( this, arguments );
    } else {
      $.error( 'Method ' +  method + ' does not exist on jQuery.tooltip' );
    }    
  };
})(jQuery);

---

[更新]解释指南中的methods[ method ].apply( this, Array.prototype.slice.call( arguments, 1 )) 行：

如果您从 javascript 代码中调用 $(selector).tooltip('update', 'hello')，您希望最终调用 update 方法，将 'hello' 作为 content 参数传递，this 设置为 $(selector) 持续时间为来电。

这就是这条线所关心的：

• 如果method == 'update'，methods[method]是update方法，
• arguments 将等于 ['update', 'hello']，您必须删除第一个元素才能获取要传递给方法的参数；这正是Array.prototype.slice.call(arguments, 1) 所做的，
• myFunc.apply(obj, argsArray) 调用函数myFunc，将argsArray 作为参数传递，并在调用期间将this 设置为obj。

因此，在您的方法中，您可以调用 this.each(...) 来遍历所有选择器的项目，例如：

update: function(content) {
  this.each(function(){ $(this).data('tooltip.content', content); });
  return this;
}

Answer 2

你可以像这样连接插件方法：

(function($) {
    $.fn.checkboxRadio = function(options) {
        var defaults = {
            check: 'check'
    }

        return this.each(function() {
            var o = options;
            var _this = $(this);

            if( o.check === 'check' ) {
                 _this.attr('checked','checked');
            }else if ( o.check === 'uncheck' ) {
                 _this.removeAttr('checked');
            }
        });
    }
})(jQuery);

用户文档应该是你想要的：$('input').checkboxRadio({check:'check'});