0

在我完成我的第一个 jQuery 插件后，我开始开发这个。但是不知何故这个插件不起作用..我真的不明白出了什么问题，因为我确信我遵循了插件制作的所有规则。

编辑：“不起作用”是指网页上的元素没有任何反应。它甚至不返回错误。它只是行不通。

jQuery 插件基于普通的 javascript 源代码：您可以在这里看到一个工作示例和一个
jsfiddle

这些示例是用 javascript 制作的，而不是 jQuery 插件

这是我的插件

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

2 回答 2

2

你的代码说：

new imageLoader(loaderImage, 'startAnimation()');

第二个参数将其传递给setTimeout：

 genImage.onload = function() {loaderTimeout = setTimeout(start, 0)};

但是你的方法被称为startLoader()

顺便说一句：您应该避免将字符串传递给setTimeout/ setInterval。它的 eval 变相和eval 是邪恶的！

于 2012-12-04T14:30:28.463 回答
0

jquery-ui 是一个选项吗？

如果您只是想学习编写自己的小部件，了解“this”引用的内容，并且通常以“不容易”的方式做事，那么请忽略这个答案:)

如果这是为了工作并阻止你回家，我强烈推荐jquery-ui 小部件工厂。试试这个（去开会，如果我能有时间的话，会扔一个 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(){}
});
于 2012-12-04T14:48:39.843 回答