CODEWITHSUNDEEP
jqueryjquery-plugins
czerasz
czerasz

Reputation: 14280

start stop jquery plugin

I wahnt to write a jQuery plugin which will change the x background-position in an looped time interval. $('#element').pluginName(); - starts the looped action

Then I wahnt to stop it by $('#element').stopFunction(); or $('#element').pluginName().stopFunction();

Is it possible? Can You give me a tip how to write it?



EDIT (my solution):

var LoadingAjax = function(element, options){
    var element = $(element);
    var object = this;
    var defaults = {
            width: 30,
            gap : 1,
            interval : 100,
            maxFrame: 8
    };
    var settings = $.extend(defaults, options || {});
    var timer;
    var frame = 1;
    var is_loading;

    // Public method
    this.startAnimate = function(){
        console.log('start animate');
        is_loading = true;
        timer = setTimeout(loop, settings.interval);
    };
    this.stopAnimate = function(){
        console.log('stop animate');
        is_loading = false;
        clearTimeout(timer);
    };
    this.isLoading = function(){
        return is_loading;
    }
    // Private method
    var loop = function(){
        console.log('frame: '+frame);
        if(frame < defaults.maxFrame){
            element.css('background-position', '-'+(frame*(defaults.width+defaults.gap))+'px 0');
            frame++;
        }
        else{
            element.css('background-position', '0 0');
            frame = 1;
        }
        timer = setTimeout(loop, settings.interval);
    };
};
$.fn.loadingAjax = function(options){
    return this.each(function(){
        var element = $(this);
        // Return early if this element already has a plugin instance
        if (element.data('loader')) return;

        // pass options to plugin constructor
        var plugin_instance = new LoadingAjax(this, {});

        // Store plugin object in this element's data
        element.data('loader', plugin_instance);
    });
};

$(document).ready(function(){
    $('a#start').click(function(){
        var loadingElement = $('.loading.ajax');
        loadingElement.loadingAjax();
        var plugin_instance = loadingElement.data('loader');
        if(plugin_instance.isLoading() === true){
            plugin_instance.stopAnimate();
        }
        else{
            plugin_instance.startAnimate();
        }
    });
});

This link was very helpful: http://www.virgentech.com/blog/2009/10/building-object-oriented-jquery-plugin.html

Upvotes: 0

Views: 677

Answers (3)

Erik Escobedo
Erik Escobedo

Reputation: 2803

$.fn.pluginName = function(){
    return this.each( function(){
        //Something cool and fancy happens here.

        //Remember you can have access to the element using the variable 'this'.
    }
}

will make your plugin available for calling $('#element').pluginName()

Now, about the intervals, you can make like this:

var holder = setInterval( function(){
    //The code here repeats every half a second.
}, 500 );

And then clean it with this:

clearInterval( holder );

The only problem is you have to be very cautious with the scope. Making holder a global variable should do the trick, but I recommend you take the chance for learning some sexy jutsus by reading this before.

Upvotes: 0

Matt Evanoff
Matt Evanoff

Reputation: 966

sure, it is possible, you could do something like use setInterval and store the result on the .data of the element...if you are asking the question though you should probably spend a little more time learning the basics of js and jquery before tackling that project.

Upvotes: 0

Reigel Gallarde
Reigel Gallarde

Reputation: 65284

you could start by reading jQuery Authoring.

Upvotes: 1

Related Questions