jQuery Plugin - calling a public function / method

Question

I have an image slider plugin that I've made that I want to extend some of the functionality of. I would like to make it so you can call the next method by calling the following like the jQuery UI does:

$("#elemID").imageSlider("next");

I'm kind of at a loss on how to get this done. Here is what I have so far with some of the guts missing for space.

(function($) {  
$.fn.imageSlider = function (options) {
    var options = $.extend({}, $.fn.imageSlider.defaults, options),
        obj = $(this),                          // Set it here so we only look for it once
        objID = obj.attr('id'),
        sliderName = objID + '_slider',
        total = 0,
        counterID = objID + '_ct';

    // Private Methods
    var initialize = function () {          
        if (options.jsonObject === null) {
            processAjax();
        } else {
            process(options.jsonObject);
        }

        return obj;
    }

    // Executes an AJAX call
    var processAjax = function () {
        $.ajax({
            url: options.jsonScript,
            type: 'GET',
            data: options.ajaxData,
            dataType: 'json',
            success: function (data) {
                process(data);
            },
            complete: function (jqXHR, textStatus) {
                if (options.onComplete !== $.noop) {
                    options.onComplete.call();
                }
            }
        });
    }

    var process = function (data) {
        // Generates the HTML
    }

    var changeImage = function (me, target, ops) {
        //rotate the image
    }

    $.fn.imageSlider.next = function (elemID) {
        // Currently how I call next on the slider
    }

    return initialize();
}


$.fn.imageSlider.defaults = {
    // options go here
    }
})(jQuery)

Leopd · Accepted Answer · 2011-08-09 16:21:19Z

1

The standard way to do this (see docs) is to create an object called methods with stores each of your methods by name, and the actual extension looks up the the method to call by name and runs it. Like...

(function( $ ){

  var methods = {
    init : function( options ) { // THIS },
    process : function( ) { // IS   },
    changeImage : function( ) { // GOOD },
    next : function( content ) { // !!! }
  };

  $.fn.imageSlider = 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.imageSlider' );
    }    

  };

})( jQuery );

answered Aug 9, 2011 at 16:21

Leopd

43k32 gold badges138 silver badges173 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

tomoguisuru Over a year ago

Thanks! I must have looked at that a million times and just never realized it.

Collectives™ on Stack Overflow

jQuery Plugin - calling a public function / method

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related