0

最初の jQuery プラグインを完成させた後、このプラグインの開発を開始しました。しかし、どういうわけかこのプラグインは動作しません..プラグイン作成のすべてのルールに従っていると確信しているため、何が問題なのか本当にわかりません。

編集:「機能しない」とは、Web ページの要素に何も起こらないことを意味します。エラーを返すことさえありません。それはうまくいきません。

jQuery プラグインは、通常の JavaScript ソースに基づいています。実際の例はこちら
で、jsfiddleはこちらで確認できます。

例は、jQuery プラグインではなく、javascript で作成されています

これは私のプラグインです

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

そして、その2番目のパラメーターはそれをsetTimeout：に渡します。

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

しかし、あなたのメソッドは呼び出されますstartLoader()

余談ですが、文字列をsetTimeout/に渡さないようにする必要がありますsetInterval。変装したその評価と評価は悪です！

于 2012-12-04T14:30:28.463 に答える
0

jquery-uiはオプションですか？

独自のウィジェットの作成を学びたいだけの場合は、「これ」が何を参照しているかを学び、一般に「簡単ではない」方法で物事を行う場合は、この答えを無視してください:)

これが仕事のためであり、家に帰るのを妨げる場合は、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 に答える