2

jQueryUI は便利な CSS フレームワークを提供します: http://jqueryui.com/docs/Theming/API

jQueryUI の CSS クラス (ui-widget-content、ui-widget-header など) を使用するだけで、http://jqueryui.com/ThemeRoller からテーマ設定可能な html スニペットを簡単に作成できます。

アプリの設計で欠けていることがある機能は、jquery-UI の CSS クラスから css プロパティを再利用することですが、すべてのプロパティを再利用するわけではありません。を使用することで簡易再利用が可能none !importantです。

たとえば、背景や境界線なしで前景のみを取得したい場合は、次のようにしますcolor。.ui-widget-content

<style>
.no-background { background: none !important; }
.no-border { border: none !important; }
</style>
<div class="ui-widget-content no-background no-border">
  hi world :)
</div>

しかし、 を取得して、自分の CSS クラスで として再利用する簡単な方法はありbackground-colorますか?.ui-widget-headercolor

私はこれに対して、やや手短で汚い解決策を作成しました。それは、JavaScript と DOM 操作を使用してスタイル タグを埋めることです。

JSBin: http://jsbin.com/ijuxar/7/edit

HTML コード:

<style class="computedStyles"></style>
<div class="cssHelper ui-helper-hidden-accessible" style="visibility: hidden">
  <div class="ui-widget-header"></div>
  <div class="ui-widget-content"></div>
  <div class="ui-state-default"></div>
  <div class="ui-widget-header ui-state-active"></div>
  <div class="ui-widget-header ui-state-hover"></div>
</div>
<h1 class="ui-color-2">Hi World</h1>

JS コード:

$(document).ready(function () {
  var css= '', i, colors = [
      $('.cssHelper .ui-widget-content').css('color'),
      $('.cssHelper .ui-widget-header').css('background-color'),
      $('.cssHelper .ui-state-hover').css('background-color'),
      $('.cssHelper .ui-state-default').css('background-color'),
      $('.cssHelper .ui-widget-header.ui-state-active').css('background-color')
  ];
  for (i = 0; i < colors.length; i += 1) {
      css += '.ui-color-' + (i + 1) + ' { color: ' + colors[i] + '}\n';
  }
  $('style.computedStyles:first').text(css);
});

JavaScript による解決策はやや悪いと感じます。さらに、一部のブラウザではFOUCが発生します。

プレーンな CSS および/またはサーバーサイド ツール (SASS/LESS/...) を使用して実行することは可能ですか?

4

2 に答える 2

1

CSS はカスケーディング スタイル シートの略です。これは、クラスによって設定されたスタイルが「カスケード」されることを意味します

したがって、独自のcssファイルがあり、jquery cssの後に含める場合。jquery css をオーバーライドします。同様に、2 つのクラスを html 要素にアタッチすると、2 番目のクラスのスタイルが最初のスタイルを上書きします。

CSS クラスの特定のスタイルを上書きするもう 1 つの方法は、CSS で !important インジケーターを使用することです。!important とマークされたものは、出現順序に関係なく、何かによって上書きされることはありません。

だからあなたの質問に答えるために。独自の css ファイルで、次のように色を指定するクラスを作成します。

.myColour{
    background-:none!important;
    border:none!important;
}

要素を次のようにクラス化します。

<div class="ui-widget-content myColour" >
  hi world :)
</div>
于 2012-08-29T19:00:06.390 に答える
1

あなたもlessで質問にタグを付けたので、それを使用できると思います。おそらく完璧ではありませんが、現在使用しているものよりもクリーンです。

スタイル宣言 B 内でクラス名 A を使用して、A からクラス B にすべてのスタイル プロパティを適用できることはおそらくご存知でしょう。Mixin と呼ばれます: http://lesscss.org/#-mixins

最初にミックスインを使用し、後でそのプロパティを上書きすることで、目的を達成できると思います。構文は次のようになります。

master.less:

@import "jquery-ui.less"

 ... 

.myCustomWidget {
  .ui-widget-content;
  background: none;
  border: none;
}

...

jquery-ui.css の拡張子を .less に変更して、 @import ステートメントをそのままにしておくのではなく、less コンパイラに実際にファイルを含めるようにしたことに注意してください。css も有効なので、必要な作業はこれだけです。

次に、less を css にコンパイルすると、追加のクラスを必要とせずに、HTML で apply を使用できる単一のクラス .myCustomWidget が得られます。また、別のテーマなどを適用して jquery-ui.css を変更した場合は、変更を組み込むために master.less を再コンパイルするだけで済みます。(less ファイルをローカルまたはサーバー側でプリコンパイルすることを強くお勧めします。クライアント側で js によって行うのではなく、スタイルが js に依存するのを防ぐためです)

また、コンパイルされた master.css ファイルに完全に含まれるため、HTML で実際の jquery-ui.css ファイルにリンクする必要がなくなることにも注意してください。これは、ページ リクエストが 1 つ少なくなることを意味し、パフォーマンス ボーナスが得られるはずです。

于 2012-08-30T11:19:40.920 に答える