CODEWITHSUNDEEP
jqueryjquery-plugins
SGI
SGI

Reputation: 473

Jquery plugins: how to access options?

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

Upvotes: 11

Views: 12479

Answers (5)

LobsterMan
LobsterMan

Reputation: 1208

see this answer the second part solves the issue without restructuring your plugin. Basically make your options global, and they will be accessible once initialized for the first time

Upvotes: 0

Wes Nolte
Wes Nolte

Reputation: 866

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

Upvotes: 0

emparq
emparq

Reputation: 136

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).

Upvotes: 12

Andrew Rumm
Andrew Rumm

Reputation: 1278

(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

Upvotes: 2

Russ Cam
Russ Cam

Reputation: 125498

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.

Upvotes: 1

Related Questions