CODEWITHSUNDEEP
jqueryjquery-plugins
Codecraft
Codecraft

Reputation: 8296

Custom JQuery plugin - how to get/maintain user defined options?

I've a simple(lightweight) div slider that I wrote some time ago, and because I use it in various different projects - the time has come to wrap it into its own plugin (at the risk of it not being so lightweight anymore!).

I've been reading, and copying from http://docs.jquery.com/Plugins/Authoring since this is popping my plugin cherry, and it makes sense (mostly) but something is eluding me. Here's my plugin code: 

(function( $ ) {

    //List of callable methods
    var methods = {
        init : function(options) {

            var settings = $.extend({

                optionOne   : 'aaa',
                optionTwo   : 'bbb',
                optionThree : 'ccc',
                optionFour  : 'ddd'

            }, options);        

        },

        error : function(message) {
            alert(message);            
        },        

        showSettings : function() { 
            //This bit... how to show whats in 'settings' defined in init?
        }

    }

    $.fn.ccSlider = function( method ) {

        //Calling methods
        if (methods[method]) {
            //If plugin is called with a recognised method, run that.
            return methods[ method ].apply( this, Array.prototype.slice.call( arguments, 1 ));
        } else if (typeof method === 'object' || !method) {
            //if plugin is called without a method, run the init() function
            return methods.init.apply( this, arguments );
        } else {
            //Run the error() function to catch all else.
            return methods.error("ccSlider: Method '"+method+"' does not exist!");            
        }
    };

})( jQuery );

Everything here is working as expected, but I can't go on to write the methods I need, but only because I can't figure out how to access the content of 'settings' outside of the init() method.

I was using 'showSettings' as a test... how would I write a showSettings method that popped up and told me what the value of a specified setting (like say, optionTwo) is?

Upvotes: 1

Views: 1185

Answers (1)

omerkirk
omerkirk

Reputation: 2527

You got the architecture right, however methods and settings should be both global to your plugin. 

(function( $ ) {
   var defaults = {
        optionOne   : 'aaa',
        optionTwo   : 'bbb',
        optionThree : 'ccc',
        optionFour  : 'ddd'
   } //if there are any

   var settings = {}; //you can reach the settings from any where in your plugin now
   //List of callable methods
   var methods = {
      init : function(options) {
         //initialize the settings in your init function and you are good to go
         settings = $.extend({},defaults,options);        
      },

      error : function(message) {
        alert(message);            
      },        

      showSettings : function() { 
        //This bit... how to show whats in 'settings' defined in init?
      }

  }

  //your plugin code here like in your post but now you can use the settings variable      we defined in your plugin
});

Upvotes: 1

Related Questions