2

このテスト プラグインは、次のように動作するはずです: 要素をクリックすると、要素が下に移動します。そのような単純な。

jQuery.fn.moveDown = function(howMuch){
    $(this).css("border", "1px solid black");
    $(this).click(function(){

        $(this).css("position", "relative");
        $(this).animate({top: '+='+howMuch});
    }); 
}

問題は、要素をクリックすると、クリックされた要素だけでなく、プラグインが適用された他のすべての要素も移動することです。

これに対する解決策は何ですか？

4

3 に答える 3

5

プラグインのオーサリングについては、この方法を試してみてください。

編集: これは jsFiddle の例です。

プラグイン:

(function($){
    $.fn.extend({
        YourPluginName: function(options) {
                var defaults = {
                      howMuch:'600',
                      animation: '',//users can set/change these values
                      speed: 444,
                      etc: ''
                }
        };

       options = $.extend(defaults, options);

       return this.each(function() {
          var $this = $(this);              
          var button = $('a', $this);// this represents all the 'a' selectors;
                                            // inside user's plugin definition.

          button.click(function() {
            $this.animate({'top':options.howMuch});//calls options howMuch value
          });
       });
})(jQuery);

ユーザー文書:

$(function() {
   $('#plugin').YourPluginName({
     howMuch:'1000' //you can give chance users to set their options for plugins
   });
});

<div id="plugin">
  <a>1</a>
  <a>2</a>
  <a>3</a>
</div>
于 2012-07-05T06:44:10.613 に答える
0

ここでは、引数を使用して単純なプラグインを作成する手順を提案したいと思います。

JS

(function($) {
    $.fn.myFirstPlugin = function( options ) {

        // Default params
        var params = $.extend({
            text     : 'Default Title',
            fontsize : 10,
        }, options);
        return $(this).text(params.text);

    }
}(jQuery));

ここでは、呼び出されるデフォルト オブジェクトを追加し、関数paramsを使用してオプションのデフォルト値を設定しますextend。したがって、空の引数を渡すと、代わりにデフォルト値が設定されます。それ以外の場合は設定されます。

HTML

$('.cls-title').myFirstPlugin({ text : 'Argument Title' });

続きを読む: JQuery プラグインの作成方法

元の回答 ここで、引数を使用して単純なプラグインを作成する手順を提案したいと思います

于 2016-04-07T06:14:23.580 に答える