Question

I need your help again 🙂

I’m trying to do a plugin with jQuery specifications.
So I started reading this: http://docs.jquery.com/Plugins/Authoring

The document is cool and give nice patterns to follow.

But i have a problem with my plugin.

My plugin appends a div and bind some events to diferents features.

Sometimes i need to accés to the options var but… the problem is, if i do the opt var global it take the last object created options.

And if i put it in the init method, i can’t use it in other actions.

I need each new object can acces only his own option set.

(function( $ ) {
//plugin methods
var methods = {
    init : function( options ) {


        //default options
        var opt = $.extend({
            'id'            : 'test',
            'title'         : 'Test window',
            'type'          : 'normal',
            'text'          : 'test test! <br/> 123',
            'shines'        : '',
            'head_shines'   : '',
            'body_shines'   : '',
            'bottom_bar'    : true
        }, options);

        //shine or not shine? that's the matter
        if (opt.shines != '') {
            opt.shines = "shiny";
            opt.head_shines = " shine_head";
            opt.body_shines = " shine_body";
        }

        //maintaining Chainability
        return this.each(function() {
            var $this = $(this); // $this is now JQuery object

            //creating the bottom bar
            if (opt.bottom_bar == true && $("#bottom_bar").length == 0) {
                $this.append('<div id="bottom_bar"></div>');
            }
            //creating the new window
            $this.append("<div style='display: none;' class='window "+opt.shines+"' id='"+opt.id+"'>...boring html...</div>");

            //append new window to the bar
            $("#bottom_bar").append("<div style='display: none' class='section' id='s_"+opt.id+"'>"+opt.title+"</div>");

            //get a object of the window to interact with
            var $window = $("#"+opt.id);

            //show the windows
            $window.fadeIn().draggable();
            $("#s_"+opt.id).fadeIn();

            //attach the events to the windows
            $window.find('.close').one('click.ventana', methods.close);

            $window.find('.max').on('click.ventana', methods.maximize);

            $window.find('.min').on('click.ventana', methods.minimize);
            $("#s_"+opt.id).on('click.ventana', methods.minimizeBar);
        });

    },
    close : function() {},
    maximize : function() {}, //i want acces my opts here!
    minimize : function() {},
    minimizeBar: function() {} //or here... etc
}; //end methods

//creating the plugin
$.fn.ventana = function( method ) {
    if ( methods[method] ) { //if we call a method...
        return methods[ method ].apply( this, Array.prototype.slice.call( arguments, 1 ) );
    } else if ( typeof method == 'object' || !method ) { //if not, we use init
        return methods.init.apply( this, arguments);
    } else { //method don't exists (console error)
        $.error( 'Method ' + method + ' does not exists in jQuery.ventana');
    }
};

}) ( jQuery );

The problem is, if i put where is the first comment:

//plugin methods

this:

//globals define
var opt;

I only get the last object opts…

Example creating new windows

$('body').ventana( {
    'id'    : 'master',
    'title' : 'Afegir Finestres',
    'text'  : 'test'
});
$('body').ventana( {
    'id'    : 'master1',
    'title' : 'Afegir Finestres1',
});

I just gonna get the master1 opts in both objects

Answer 1

You could use data to store the options object to be retrieved later.

// store it
$this.data("options", opt);

// ...

// use it later
var opt = $this.data("options");