Accessing jQuery script outside function

Question

I activate a jQuery script like this:

$('#an-id').drawbox();

This is the jQuery script (the important part):

(function($)
{
$.fn.extend(
{
    drawbox: function()
    {

        // Default options
        var defaults = {
            caption:       'Caption',
            // Canvas properties
            lineWidth:     3,
            lineCap:       'round',
            lineJoin:      'round',
            miterLimit:    10,
            strokeStyle:   'green',
            fillStyle:     'none',
            shadowOffsetX: 0.0,
            shadowOffsetY: 0.0,
            shadowBlur:    0.0,
            shadowColor:   'none',
        }

        options = $.extend(defaults);

        return this.each(function()
        {

            //etc

The script runs fine, but I want to later get the 'options' value in a separate script. I'm guessing the options setting is set and stored in the function and can be retrieved later.

I've tried things like:

$('#an-id').drawbox.options

...but can't seem to get it.

This: options = $.extend(defaults); looks very wrong to me. I think you need "options" to be a parameter to the function, and then that line should look like options = $.extend({}, defaults, options); As you've got it now, "options" is an implicit global (bad) and it'll be set to be a reference to the global jQuery object. — Pointy
– Pointy, Commented Apr 24, 2013 at 21:10
You need to get the options by parameter, and merge the param options with the property defaults, overwriting the defaults properties with options properties, or lefting default if options are empty — Marcelo Rodovalho
– Marcelo Rodovalho, Commented Apr 24, 2013 at 21:16

anson · Accepted Answer · 2013-04-24 21:22:30Z

You have your drawbox() method, but it seems you currently have it setup to only execute one internal function. To do what you want, you must setup your plugin to allow multiple methods...

The general jquery approved method of doing this is to include all of your methods into a methods object, inside your plugin code, where the function init is your default function, like so...

var methods = {
  "getOptions" : function(){ return options; },

  "init" : function(){
    return this.each(function(){
      //your current code goes here (what happens when you call $().drawbox)
    });
  }
}

Now, you must include the following code, or something similar, to get your plugin to call the methods you want...

  $.fn.drawbox = function(method){
    if(methods[method]){
      return methods[method].apply(this, Array.prototype.slice.call(arguments, 1));
    }else if(!methods[method]){
      return methods.init.apply(this, arguments);
    }else{
      $.error('Method ' +  method + ' does not exist on jQuery.drawbox');
    }      
  };

Notice what this does. When .drawbox() is called, the above executes, if no parameter is passed, your init function is called. If a parameter is passed, such as drawbox('getOptions'), the getOptions method (in the methods object) is executed.

This way you can return any variables that are inside the scope of your plugin, similar in concept to normal getter/setters. You also need to remove the line drawbox : function(){... in your current code, as the above replaces this.

Marcelo Rodovalho · Accepted Answer · 2013-04-24 21:19:22Z

1

Look:

(function($) {
    $.fn.yourPlugin = function(options) {
         options= jQuery.extend({ opt: 1, opt2: 2 }, options);
         // the escope of your plugin....
    }
})(jQuery);

You need to get the options by parameter, and merge the param options with the property defaults, overwriting the defaults properties with options properties, or lefting default if options are empty

answered Apr 24, 2013 at 21:19

Marcelo Rodovalho

9331 gold badge16 silver badges27 bronze badges

Comments

Ahmed El Kilani · Accepted Answer · 2013-04-24 21:20:54Z

1

drawbox is a function, so this line is invalid:

$('#an-id').drawbox.options

and calling $('#an-id').drawbox() will execute the code each time which is incorrect.

You have to use parameters in the constructor method so that you can return the options like this

$('#an-id').drawbox('options')

look at the accordion implementation, i think it does something like what you need:

http://api.jqueryui.com/accordion/#method-option

answered Apr 24, 2013 at 21:20

Ahmed El Kilani

3451 silver badge8 bronze badges

Collectives™ on Stack Overflow

Accessing jQuery script outside function

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related