CODEWITHSUNDEEP
javascriptjqueryjquery-plugins
Throttlehead
Throttlehead

Reputation: 1945

Jquery plugin writing: How do I use the options in my code?

So I'm converting a plugin. Originally I had a traditional javascript function with some variables I pass in, but I wanted to make it a full Jquery plugin with options. The documentation shows you how to set them up, but not how to use them in your code. Here's a bit of the code:

jQuery.fn.placeholderRX = function(options) {
    var settings = jQuery.extend({
        hoverColor: '#fff',
        addClass: 'null',
        textColor: '#FBFBFB'        
    }, options);

    var $this = $(this);

    $this.children('.inputSpan').each(function() {      
            $(this).children('.inputText').hover( 
                function() {
                    $input.children('.input').css('background-color', hoverColor);
                },
                function() {
                    $input.children('.input').css('background-color', revertColor);
                }
            );
        }       
    });
};

How would I pass that color option value to the hover function beneath it? Or more simply, can I just pass the option value to a variable?

Upvotes: 0

Views: 53

Answers (3)

marc
marc

Reputation: 71

The following should work:

$input.children('.input').css('background-color', settings.hoverColor);

Or what jcreamer898 said works as well:

$input.children('.input').css('background-color', settings['hoverColor']);

Upvotes: 2

jcreamer898
jcreamer898

Reputation: 8189

This should work...

$input.children('.input').css('background-color', settings['hoverColor'])

Upvotes: 1

James Allardice
James Allardice

Reputation: 165951

You have declared a variable called settings. You can access the hoverColor property of that object with settings.hoverColor:

$input.children('.input').css('background-color', settings.hoverColor);

The options argument to your plugin will be an object too. When you pass that in, the extend method will merge the contents of the options object and the "defaults" object, and you assign the result of that merge to settings.

Upvotes: 3

Related Questions