How do i create a function to return a value in a javascript plugin?

Question

i have this countdown timer

(function($){

    var options = {
        display_as_text     : false,
    remaining : 0,
        separator           : ':',
        significant_days    : 3,
    display_on_complete : null, // id of element to display when countdown is complete
    hide_on_complete : null // hide the timer once it hits zero
    };

    $.fn.countdown = function (config_options)
    {
        /*
         * Initialise
         *
         * Prepare data and trigger regular execution of code
         *
         * @param   container   Reference to DOM element where counter will be displayed
         */
        var initialise = function (container){

        }

        var update = function (seconds_remaining){          

        }

and i need to access the update and reset the time based on a value i send in but i dont know how to access it. Here is how i instantiate the plugin

$('#timer').countdown({remaining : 1000});

but how do i call the update to update the seconds...I tried to set it to a variable and call it but no go...any ideas

mu is too short · Accepted Answer · 2012-04-22 19:43:45Z

The most common approach (that I've seen) is to do things jQuery-UI style:

$(selector).plugin({...}) binds the plugin and allows chaining in the usual fashion.
$(selector).plugin('method') calls method as an accessor.
$(selector).plugin('method', arg) calls method as a mutator with the specified arg.

So in your case, you'd want to add a bit of argument parsing logic to your plugin so that you could say things like $(selector).countdown('update', 11).

You can use $.isPlainObject and arguments to figure out how the plugin was called and pull apart the variable length argument list:

$.fn.countdown = function(options) {
    if(!$.isPlainObject(options)) {
        var stdarg = Array.prototype.slice.call(arguments);
        if(stdarg[0] == 'update' && stdarg.length > 1) {
            return this.each(function() {
                // Set up value using stdarg[1]
            });
        }
        // ...
    }

    return this.each(function() {
        // Bind as usual
    });
};

And a simple demo (reality would of course be cleaner and better organized): http://jsfiddle.net/ambiguous/DEVBD/

David Hellsing · Accepted Answer · 2012-04-22 19:22:57Z

I’m not sure you want to retrieve the seconds remaining or call the update function inside the plugin. But either way It’s impossible to tell if this is included in the plugin without looking at the full source.

You can always add a custom API to the plugin if you manipulate it, using something like this inside the plugin scope:

$(this).data('countdown', {
    update: update
});

Then call it using:

$('#timer').data('countdown').update(12345);

The same idea would work for getting internal variables, such as seconds remaining, f.ex: (assuming that the internal variable is called seconds_remaining):

$(this).data('countdown', {
    getSecondsRemaining: function() {
        return seconds_remaining;
    }
});

And then:

$('#timer').data('countdown').getSecondsRemaining();

Collectives™ on Stack Overflow

How do i create a function to return a value in a javascript plugin?

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related