0

私はJqueryプラグインを開発しており、柔軟性を持たせるためにスクリプト内に多くのcss値を設定する必要があります。

これは次のようになります。

...var loadingBarInsideFWidth = loadingBarWidth - 4;
var loadingBarInsideWidth;
$(holder).find('.round').css({
'width':setRoundWidth,
'height':setRoundWidth
});
$(holder).find('.pointer').css({
'width':setPointerWidth,
'height':setPointerWidth,
'left':rotCenter,
'top':rotCenter*2
});...

約70行のコードについても同様です。大丈夫かどうか尋ねたかっただけですか、それとももっと良い方法がありますか？

どうも

外部cssファイルがあることを確認してください。これらの値はすべて、プリローダーと、含まれている要素のサイズに相対的ないくつかのナビゲーション要素の位置とサイズに関するものです。

4

4 に答える 4

1

これらすべてのスタイルをcssファイルから追加できます...そしてプラグインをcssファイルに含めることができます...このように、プラグインは他の人がルックアンドフィールに合わせてカスタマイズすることもでき、javascript/jqueryで再生されませんコード。

于 2012-07-13T14:14:29.980 に答える
1

CSSとJSを分離したいと思います。すべてのスタイルをファイルに入れ、オンデマンドで動的にロードします。

それがあなたが望むものでない場合は、次のように書くことができます。

(function(){
   // do some caching
   $holder = $(holder);

   function _css(elem,rules){
      $holder.find(elem).css(rules);
   }

    _css(".round",{'width':setRoundWidth, 'height':setRoundWidth});
})();

または、さらに区別するために、スタイルをオブジェクトに入れて、それを繰り返し処理します。これにより、より「CSS」のようになります。

(function(){
   // do some caching
   $holder = $(holder);
   styles = {
       ".round":  { 'width' :setRoundWidth,
                    'height':setRoundWidth
                  },
       ".pointer":{ 'width' :setPointerWidth,
                    'height':setPointerWidth,
                    'left'  :rotCenter,
                    'top'   :rotCenter*2
                  }
   }
   for (var elem in styles){
      if (styles.hasOwnProperty(elem)) $holder.find(elem).css(styles[elem]);
   }
})();
于 2012-07-13T14:17:24.703 に答える
1

JSから70のCSSスタイルを追加すると、それをDOM内の要素に適用する場合、多くのリフロー/再ペイントが発生します。

プラグインに専用のCSSシートを同梱したくない場合は、動的なCSSシート要素にスタイルを直接書き込むことを検討してください。

<style>これを行うには、タグをDOMスクリプトで記述してそこにスタイルを配置するか、ページ内のリンクされたスタイルシートの1つをハイジャックします。http://www.javascriptkit.com/domref/stylesheet.shtmlを参照してください。

于 2012-07-13T14:18:00.420 に答える
0

cssスタイルをスタイルシートのクラスに入れます。

次に、必要に応じてそのクラスを要素に追加するだけです。

jQuery(".myElement").addClass("myClass");
于 2012-07-13T14:18:08.470 に答える