17

1 つのアプリケーションで複数の jQuery UI テーマを整理して実装するのに役立つテクニック/ヒント/トリックを誰かが持っていますか?

スタイルのオーバーライドを強制する最も確実な方法と思われるため、使用!importantすることにしましたが、この方法はあまり望ましくありません。

4

3 に答える 3

31

はい、しかしそれはあなたが何を意味するかによります。

要素 A をテーマ X でスタイル設定し、要素 B をテーマ Y でスタイル設定するとします。jQuery テーマ ローラーにはこの機能が組み込まれています。テーマをダウンロードする場合 (ここ)、右側の[高度なテーマ設定]をクリックします。ここでは、「CSS Scope」を設定できます。これにより、特定のテーマから jQuery UI クラス (つまりui-corners-allなど) を適用できます。このオプションについての説明は次のとおりです。

このフィールドを使用すると、CSS スコープを指定して、テーマをページの特定の部分に限定できます。これは、ページで複数のテーマを使用する場合に役立ちます。CSS スコープを指定しない場合、テーマはページ上のすべての UI 要素に適用されます。

ほとんどの場合、CSS スコープを指定する必要はありません。注意: CSS スコープを指定すると、サンプル ページはダウンロードに含まれません。

テーマ フォルダー名を変更することもできます。

このフィールドでは、ダウンロードのテーマ フォルダーの名前を指定できます。これは、1 つのページで複数のテーマを使用する予定がある場合に役立ちます。デフォルトは「テーマ」です。

ただし、いくつかのテーマから少しずつ借りてまったく新しいテーマを作成する場合は、CSS と画像ファイルを自分で編集する (推奨されません) か、テーマ ローラー ツールを使用して独自のテーマを作成するという 2 つのオプションがあります。

使い方：

CSS スコープは単なる CSS セレクターです。テーマ X は、 class を持つすべての要素にのみ適用する必要があるとしましょうaClass。この場合、CSS Scope は になります.aClass。したがって、テーマ X から要素に丸みを帯びた角を追加する場合 (CSS Scope が に設定されていると仮定.aClass)、HTML は次のようになります。

<div class='ui-rounded-corners aClass'>
    Content    
</div>
于 2010-11-22T21:44:32.263 に答える
10

この手法を、本文にオーバーレイして追加されるUIウィジェット（ダイアログ、日付ピッカー、オートコンプリートなど）に適用すると、いくつかの問題が発生します。

オートコンプリートの場合、次のようにして、スコープクラスを持つ親要素を取得できます。オートコンプリート自体のULにscoppedクラスを追加するだけでは不十分です。

jQuery('.autocomplete').autocomplete({
    source: function(request, response){
        {....}
    },
    create: function(event, ui) {
        jQuery('.ui-autocomplete').wrap('<span class="xxSCOPPEDCLASSxx"></span>');
    }
});
于 2011-03-25T20:40:41.930 に答える
5

searched for hours, and finally found the way to do it from the FilamentGroup, complete with tutorial and working examples.

于 2011-02-05T16:39:38.543 に答える