javascript - 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 插件指南。

关于包装函数的部分可以在这里找到（“插件方法”）（这个例子是一个可能的工具提示插件）：

(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 ))指南中的行：

如果您$(selector).tooltip('update', 'hello')从您的 javascript 代码中调用，您希望最终调用该update方法，'hello'作为content参数传递，并在调用期间this设置$(selector)为。

这就是这条线所关心的：

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

因此，在您的方法中，您可以调用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'});