démarrer arrêter le plugin jquery

Question

Je veux écrire un plugin jQuery qui change la position du fond x dans un intervalle de temps en boucle. $('#element').pluginName(); - lance l'action en boucle

Alors je voulais l'arrêter en $('#element').stopFunction(); o $('#element').pluginName().stopFunction();

Est-ce possible ? Pouvez-vous me donner un conseil pour l'écrire ?

EDIT (ma 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();
        }
    });
});

Ce lien a été très utile : http://www.virgentech.com/blog/2009/10/building-object-oriented-jquery-plugin.html

Answer 1

Vous pouvez commencer par lire Création de jQuery .

Answer 2

Bien sûr, c'est possible, vous pourriez faire quelque chose comme utiliser setInterval et stocker le résultat dans le .data de l'élément... si vous posez la question, vous devriez probablement passer un peu plus de temps à apprendre les bases de js et jquery avant de vous attaquer à ce projet.

Answer 3

$.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'.
    }
}

rendra votre plugin disponible pour appeler $('#element').pluginName()

Maintenant, pour les intervalles, vous pouvez faire comme ça :

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

Et ensuite, nettoyez-le avec ça :

clearInterval( holder );

Le seul problème est que vous devez être très prudent avec la lunette. Fabrication de holder une variable globale devrait faire l'affaire, mais je vous recommande de saisir la chance d'apprendre quelques jutsus sexy en lisant ce avant .