启动停止jquery插件

时间:2010-07-08 01:05:24

标签: jquery jquery-plugins

我想写一个jQuery插件,它将在循环时间间隔内改变x background-position。 $('#element').pluginName(); - 启动循环操作

然后我希望$('#element').stopFunction();$('#element').pluginName().stopFunction();

停止它

有可能吗?你能给我一个如何写它的小费吗?



编辑(我的解决方案):

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

此链接非常有用:http://www.virgentech.com/blog/2009/10/building-object-oriented-jquery-plugin.html

3 个答案:

答案 0 :(得分:1)

您可以先阅读jQuery Authoring

答案 1 :(得分:0)

当然,有可能,你可以做一些事情,比如使用setInterval并将结果存储在元素的.data中......如果你问这个问题,你应该花一点时间学习js的基础知识和jquery在处理该项目之前。

答案 2 :(得分:0)

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

会使您的插件可用于调用$('#element').pluginName()

现在,关于间隔,您可以这样做:

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

然后用它清理它:

clearInterval( holder );

唯一的问题是你必须对范围非常谨慎。让holder成为一个全局变量应该可以解决问题,但我建议您通过阅读this before来学习一些性感的jutsus。