我想写一个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
答案 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。