Jquery plugins: how to access options?

Question

Currently I'm writing a jQuery plugin with some options.

An example simplified piece of code from a web page:

<div id="div1"></div>
<div id="div2"></div>

$(document).ready(function(){
    $("#div1").myFunc({width: 100, height: 100});
    $("#div2").myFunc({width: 200, height: 200});
});

And here's a (again simplified) plugin code:

(function($) {
 $.fn.myFunc = function(options) {
  // extending default settings
  var options = $.extend( {
   width: 300,
   height: 200
  }, options);

     return this.each(function() {
      // doing something for example with #div1
         $(this).click(function() {
          // here I need to access ANOTHER (e.g. #div2) object's options
          // how can I do it?
         });
     });
 }
})(jQuery);

Well, the question is in the listing - how can I access another object's options from inside the plugin's function? Something like $("#div2").options.width

Answer 1

Simple answer is: you can't. The options object passed in to the plugin in each instance is used to assign values to properties of a locally declared object, options which will not be accessible outside of the plugin function's scope.

You might come up with some ways to do what what you want, for example, additional properties of the options object that you pass in.

Answer 2

(function($) {
 $.fn.myFunc = function(options) {
  var options = $.extend( {
   width: 300,
   height: 200
  }, options);

     return this.each(function() {

         $(this).bind('click', {myOptions: options}, function(event) {
              optionsHere = event.data.myOptions;
         });
     });
 }
})(jQuery);

"In cases where that is not possible, you can pass additional data as the second parameter (and the handler function as the third)..."

jQuery bind

Answer 3

You can accomplish this by using jQuery's .data(key, val) method to set those options before you access them in your plugin:

  // set 'options' for '#div2'
  $("#div2").data('options', {width: 500, height: 500});

  // get 'options' for '#div2' (this would be in your plugin code)
  var opts = $('#div2').data('options');
  alert('options.height:' + opts.height + '\n'
        'options.width:' + opts.width);

As you are storing data to a dictionary-like object, you can set pretty much any kind of data you want to it:

  $("#div2").data('priority', 2);
  $("#div2").data('flagColors', ['red', 'white', 'blue']);
  $("#div2").data('parts', {arm: 2, legs: 2});

...and retrieve it later like so:

  var foo = $("#div2").data('priority');
  var foo2 = $("#div2").data('flagColors');
  var foo3 = $("#div2").data('parts');

Behind the scenes, jQuery adds a single expando-property to the DOM element of your jQuery selection (an internally generated UUID value), the value of which is a unique key into jQuery.cache, which is basically where all your data is being stored to/retrieved from.

To cleanup, call the .removeData(key) (if no key is passed, all data is removed).

Answer 4

Why not add a method to your plugin that returns the options object?