Method for jQuery plugin

Question

I'm trying to make a jQuery plugin for custom checkboxes and radio buttons.

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

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

It can be used now by $('input').checkboxRadio(options);

How do I add a method check without changing current scope, to make a possible usage of something like $('input').checkboxRadio('check')?

How to handle a custom method and get its name inside my plugin?

this answer might help: http://stackoverflow.com/a/11339046/1428241 — Barlas Apaydin, Jan 30 '13 at 21:52
In addition - I would like to keep current code style, with no usage of `$.extend` — Mark, Jan 30 '13 at 21:55
you can write a switch in to plugin and gave chanse to choose users from defaults. — Barlas Apaydin, Jan 30 '13 at 21:55

LeGEC · Accepted Answer · 2013-01-30T22:49:26.553

Here is the official jquery plugin guide.

The part about wrapping functions is found here ("Plugin Methods") (the example is a would-be tooltip plugin) :

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

[update] explaining the methods[ method ].apply( this, Array.prototype.slice.call( arguments, 1 )) line in the guide :

If you call $(selector).tooltip('update', 'hello') from your javascript code, you want to end up calling the update method, passing 'hello' as the content argument, with this set to $(selector) for the duration of the call.

That is what this line takes care of :

if method == 'update', methods[method] is the update method,
arguments will be equal to ['update', 'hello'], you have to drop the first element to get the arguments you want to pass to your method ; this is exactly what Array.prototype.slice.call(arguments, 1) does,
myFunc.apply(obj, argsArray) calls the function myFunc, passing argsArray as the arguments, and setting this to obj for the duration of the call.

So inside your methods, you can call this.each(...) to iterate over all of the selector's items, e.g. :

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

Not sure what we're doing by this code `methods[ method ].apply( this, Array.prototype.slice.call( arguments, 1 ))` — Mark, Jan 30 '13 at 22:24
Where all the logic goes (.each, etc), if there is no method `show/hide/update`? Seems `init` will be used instead - how do I use `each` inside it, to handle each input of the target object? — Mark, Jan 30 '13 at 22:27
So the question for this solution is, how do I get `this` of `$.fn.tooltip` inside current methods? — Mark, Jan 30 '13 at 22:29

score 0 · Answer 2 · answered Jan 30 '13 at 22:09

0

You can connect plugin methods like this:

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

and user document should be like what you want: $('input').checkboxRadio({check:'check'});

answered Jan 30 '13 at 22:09

Barlas Apaydin

7,233
11
55
86

this seems to be not a right solution, because start options would be overwritten. To use it, I have to give all the other options with conjunction of "check: check". – Mark Jan 30 '13 at 22:22
@Steve i am trying to explain the logic of this, you can edit the values/functions whatever you like. – Barlas Apaydin Jan 30 '13 at 22:26
There is a way to read `check` and if it exists, do something without call of the other options. But, it's not a solution I would like to see in my plugin, thanks anyway. – Mark Jan 30 '13 at 22:33

Method for jQuery plugin

2 Answers2