1

現時点では、jQuery プラグインでデフォルト設定とカスタム設定を使用する方法を理解しようとしています。ユニバーサル クラスを使用してプラグインのデフォルト設定を要素に適用できるようにしたいのですが、代わりに ID を選択してそれらの要素の一部をさらにカスタマイズします。例: http://jsfiddle.net/srkPT/2/ 

     <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
        <html xmlns="http://www.w3.org/1999/xhtml">
        <head>
        <title>Untitled Document</title>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

        <style type="text/css">
        .box {width:200px; height:200px; padding:50px; margin:40px; border:1px solid; float:left;}​
        </style>

        <script type="text/javascript" src="http://code.jquery.com/jquery-1.5.min.js"></script>
        </head>

        <body>

       <div class="box">Box 1 - </div>

    <div id="one" class="box">Box 2 - </div>

    <div id="two" class="box">Box 3 - </div>

    <div class="box">Box 4 - </div>

        <script type="text/javascript">

    (function($) {


        $.fn.myPlugin = function(params) {

            var defaults = {

                background: '#ddd',

                content: 'foo'

            };

            var params = $.extend(defaults, params);

            return this.each(function() {

                $(this).css('background-color', params.background)

                .append(params.content + ' ');

            }); //RETURN this EACH

        }; //fn myPlugin

    })(jQuery);


        $(function(){

        $('.box').myPlugin();

            $('#one').myPlugin({content:'bar'});

            $('#two').myPlugin({background:'yellow'});

        });//document READY​

        </script>

        </body>
        </html>

これを実行すると、#one と #two に 2 ロットのコンテンツが追加されます。その理由は理解できます。プラグインは、.box (#one と #two を含む) を含むすべての要素でトリガーし、div #one と #two で 2 回目の実行を行い、新しいコンテンツを一番上に追加します。

セレクターでフィルターを変更または実行したり、html に追加のクラスを追加したりせずに、これを回避する実用的な方法はありますか?同じ要素にプラグインを 2 回適用しませんか? 前もって感謝します。

アップデート

czarchaic の提案のおかげで、これが機能しました。例: http://jsfiddle.net/srkPT/3/

ただし、特定の順序で適用されるプラグインに依存します。今のところは満足していますが、どの順序で適用しても目的の効果が得られる方法を誰か考えていただければ幸いです。みんなの助けに感謝します。

4

2 に答える 2

4

データ属性を設定してテストできます。

$.fn.myPlugin=function(){
  return this.each( function(){
    if ( $( this ).data( 'test' ) ){
      return false;
    }
    $( this ).data( 'test', true );
    // plugin code
  });
};
于 2012-06-16T19:11:11.197 に答える
0

いくつかの選択肢:

1) 要素に追加のクラスを追加し、クラスに基づいてプラグインを呼び出します

$('.box.yellow').myPlugin({background:'yellow'});

2) マークアップに属性を追加data-し、それらが存在する場合はプラグイン内でチェックし、それに応じてプラグイン内で html を変更します

<div class="box" data-bgColor="yellow">Box 1 - </div>

次にプラグインで：

 if( $(this).data('bgColor')){
      $(this).doSomething();
 }

アプローチは、プラグインの全体的な複雑さや使用頻度によって部分的に異なります

于 2012-06-16T19:12:55.237 に答える