1

divに4つの矢印を追加したいだけです:

ここに画像の説明を入力

私はそれを動作させました： http://jsfiddle.net/ctNDr/

しかし、jquery プラグインを作成しようとすると、バグが発生します: http://jsfiddle.net/DY3EJ/

これは出力です：

<img class="arrows" src="arrow-top.png" alt="Arrow-Top" style="height: 26px; width: 20px; top: 50px; left: 480480px; position: absolute; display: none;">
<img class="arrows" src="arrow-right.png" alt="Arrow-Top" style="position: absolute; display: none;">
<img class="arrows" src="arrow-bottom.png" alt="Arrow-Top" style="left: 480480px; position: absolute; display: none;">
<img class="arrows" src="arrow-left.png" alt="Arrow-Top" style="height: 20px; width: 26px; top: 50250px; left: 480px; position: absolute; display: none;">

何か案が？

4

2 に答える 2

1

プラグイン オーサリング ガイドをご覧ください。このようにプラグインの名前を設定する必要があります。$.fn.yourplugin

(function( $ ){

  $.fn.myPlugin = function() {

    // there's no need to do $(this) because
    // "this" is already a jquery object

    // $(this) would be the same as $($('#element'));

    this.fadeIn('normal', function(){

      // the this keyword is a DOM element

    });

  };
})( jQuery );
于 2012-04-18T12:55:15.630 に答える
1

いくつかの問題が発生していましたが、最終的に機能させることができました。this.each()目的を果たせなかったので、関数を削除しました。また、上、右、下、左の計算を括弧で囲む必要がありました。視覚的な目的で、jsFiddle で、.arrows { background-color: red; }処理する画像がなかったのでクラスを作成しました。

注意事項:

  1. options.MouseOver使用されることはありません。

  2. options.Fadeプラグインでの処理方法により、最初の呼び出しにoptions.FadeSpeed基づいています。.AddArrow().hover()

  3. You may want to consider adding .stop(true,true) before your fadeIn/fadeOut call on hover to eliminate animation queuing.

Click here to view jsFiddle demo:

(function( $ ){

    $.fn.AddArrow = function(options) {

        var defaults = {
            ArrowHeight: '32',
            ArrowWidth: '32',
            ArrowPath: 'images/arrow.png',
            Orientation: 'Top',
            Fade: true,
            FadeSpeed: 300,
            MouseOver: true            
        };

        var o = $.extend(defaults, options);
        var pos = this.position();
        var width = this.width();
        var height = this.height();

        switch (o.Orientation) {
            case "Top":
                this.append($('<img>', { 
                    src: o.ArrowPath, 
                    alt: "Arrow-Top",
                    class: "arrows",
                    style: "height: "+o.ArrowHeight+"px; width: "+o.ArrowWidth+"px; top: "+pos.top+"px; left: "+((width / 2) + pos.left)+"px; position: absolute; display: none;"
                }));
                break;
            case "Right":
                this.append($('<img>', { 
                    src: o.ArrowPath, 
                    alt: "Arrow-Right",
                    class: "arrows",
                    style: "height: "+o.ArrowHeight+"px; width: "+o.ArrowWidth+"px; top: "+(pos.top + (height / 2))+"px; left: "+(width + (pos.left - o.ArrowWidth))+"px; position: absolute; display: none;"
            }));
                break;
            case "Bottom":
                this.append($('<img>', { 
                    src: o.ArrowPath, 
                    alt: "Arrow-Bottom",
                    class: "arrows",
                    style: "height: "+o.ArrowHeight+"px; width: "+o.ArrowWidth+"px; top: "+(pos.top + (height - o.ArrowHeight))+"px; left: "+((width / 2) + pos.left)+"px; position: absolute; display: none;"
                }));
                break;
            case "Left":
                this.append($('<img>', { 
                    src: o.ArrowPath, 
                    alt: "Arrow-Left",
                    class: "arrows",
                    style: "height: "+o.ArrowHeight+"px; width: "+o.ArrowWidth+"px; top: "+(pos.top + (height / 2))+"px; left: "+pos.left+"px; position: absolute; display: none;"
                }));
                break;
        }

        if(o.Fade) {         
            this.hover(function() {
                $(".arrows").fadeIn(o.FadeSpeed);
            }, function() {
                $(".arrows").fadeOut(o.FadeSpeed);
            });
        }

    }

})( jQuery );
于 2012-04-18T13:28:36.130 に答える