在我完成第一个jQuery PLug-In后，我开始开发这个。但不知怎的，这个插件不起作用..我真的不明白什么是错的，因为我确信我遵循了插件制作的所有规则。
编辑：通过“不工作”我的意思是网页上的元素没有任何反应。它甚至不会返回错误。它只是不起作用。
jQuery插件基于普通的javascript源： 你可以看到一个有效的例子here 和jsfiddle here
示例是使用javascript而不是jQuery Plug-In
完成的这是我的插件
;(function($){
// We name the function loader
$.fn.loader = function (options) {
// Default settings - can be replaced by options
var defaults = {
speed: 5,
width: 50,
height: 50,
totalFrames: 19,
frameWidth: 50,
color: 'white',
loaderTimeout: false,
index: 0,
Xpos: 0,
frameDelay: 0
}
// Extend the options and defaults to variables
var opts = $.extend(defaults, options);
// We locate the loader Image
var loaderImage = '../../_resources/loading/loading_sprites_'+ opts.color + '_' + opts.height + '.png';
// Now start the Function
return this.each(function() {
// The original element is defined with a variable
var element = $(this);
var frameDelay = opts.frameDelay;
// We start out by defining the beginning of the animation
function startLoader() {
// The element is giving the right width and height to contain
// the loading animation, and the loaderImage source as background
element.width(opts.width).height(opts.height).css('background-image', 'url('+loaderImage+')');
// We calculate the Frames Per Second
FPS = Math.round(100/opts.speed);
frameDelay = 1 / FPS;
// And start the animation
setTimeout('continueAnimation()', frameDelay / 1000);
}
// To keep the animation on going we need to define a function
// that continuesly repeat the sprites
function continueAnimation() {
var Xpos = opts.Xpos;
var index = opts.index;
// The X-position is defined based on how wide the frame is
Xpos += opts.frameWidth;
// index is defined by continuelsy counting
index += 1;
// if index counts to more or equal to the amount of frames defined
if (index >= opts.totalFrames) {
Xpos = 0; // ... we set the X-position to be 0
index = 0; // ... and the index too
}
// We change the position og the sprite to give the illusion
// of an animation going on
element.css('background-position', Xpos + 'px 0');
// And finally we are going to ask our function to repeat itself.
setTimeout('continueAnimation()', frameDelay * 1000);
}
// Before anything we want the sprites to be pre-loaded
function imageLoader(source, start) {
var loaderTimeout = opts.loaderTimeout;
// First we clear Timout
clearTimeout(loaderTimeout);
loaderTimeout = 0;
// Then we generate a new image (the sprites)
genImage = new Image();
// When the image is loaded we want to start the animation
genImage.onload = function() {loaderTimeout = setTimeout(start, 0)};
// If we can't locate the sprite image, we prepare an error function
genImage.onerror = new Function('alert(\'Could not load the image\')');
// And we define the image source
genImage.src = source;
}
// This command starts the whole animation
new imageLoader(loaderImage, 'startAnimation()');
});
}
})(jQuery);
我这样称呼我的插件：
$(document).ready(function() {
$('.loader').loader({
color: 'blue'
})
});
答案 0 :(得分：2)
您的代码说：
new imageLoader(loaderImage, 'startAnimation()');
第二个参数将其传递给setTimeout：
genImage.onload = function() {loaderTimeout = setTimeout(start, 0)};
但您的方法称为startLoader()
顺便说一句：你应该避免将字符串传递给setTimeout / setInterval。它的伪装和eval is evil!
答案 1 :(得分：0)
是jquery-ui的选项吗？
如果您只是想学习编写自己的小部件，请了解“这个”引用的内容，并且通常以“不容易”的方式执行操作，然后忽略此答案：）
如果这是为了工作并阻止你回家，我强烈推荐jquery-ui widget factory。试试这个（去参加一个会议，如果我能给他们时间的话，他会投入一个jsfiddle）：
$(document).ready(function() {
$('.loader').loader({
color: 'blue'
})
});
$.widget("pj.loader",{
options:{
speed: 5,
width: 50,
height: 50,
totalFrames: 19,
frameWidth: 50,
color: "white",
loaderTimeout: false,
index: 0,
Xpos: 0,
frameDelay: 0,
imgBase: "../../_resources/loading/loading_sprites_"
},
//called once and only once per widget
_create: function(){
var self = this,
selectedElement = self.element;
self.options.loaderImage = self.options.imgBase + self.options.color + '_' + self.options.height + '.png';
self.imageLoader(self.options.loaderImage, self.startAnimation);
},
startAnimation : function(){
var self = this;
// The element is giving the right width and height to contain
// the loading animation, and the loaderImage source as background
element.width(self.options.width).height(self.options.height).css('background-image', 'url('+self.options.loaderImage+')');
// We calculate the Frames Per Second
FPS = Math.round(100/self.options.speed);
self.options.frameDelay = 1 / FPS;
// And start the animation
setTimeout(self.continueAnimation, self.options.frameDelay / 1000);
},
continueAnimation : function(){
var self = this,
Xpos = self.options.Xpos,
index = self.options.index;
// The X-position is defined based on how wide the frame is
Xpos += self.options.frameWidth;
// index is defined by continuelsy counting
index += 1;
// if index counts to more or equal to the amount of frames defined
if (index >= self.options.totalFrames) {
Xpos = 0; // ... we set the X-position to be 0
index = 0; // ... and the index too
}
// We change the position og the sprite to give the illusion
// of an animation going on
element.css('background-position', Xpos + 'px 0');
// And finally we are going to ask our function to repeat itself.
setTimeout('continueAnimation()', frameDelay * 1000);
},
imageLoader : function(source, start){
var self = this,
loaderTimeout = self.options.loaderTimeout;
// First we clear Timout
clearTimeout(loaderTimeout);
loaderTimeout = 0;
// Then we generate a new image (the sprites)
genImage = new Image();
// When the image is loaded we want to start the animation
genImage.onload = function() {loaderTimeout = setTimeout(start, 0)};
// If we can't locate the sprite image, we prepare an error function
genImage.onerror = new Function('alert(\'Could not load the image\')');
// And we define the image source
genImage.src = source;
},
//optional, called every time $('selector').loader() is called
_init: function(){},
//recommended optional, called on $('loader.selector').remove() or similar.
//you should undo all your changes / events in create
_destroy: function(){}
});