複数のjQuery UIテーマを適用する方法

StackOverflow https://stackoverflow.com/questions/4250458

質問

1つのアプリケーションで複数のjQuery UIテーマを整理および実装するのに役立つテクニック/ヒント/トリックはありますか？

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

役に立ちましたか？

解決

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

テーマXを使用して要素Aをスタイル化し、テーマYを備えた要素Bが必要だとしましょう。JQueryテーマローラーにはこの機能が組み込まれています。テーマをダウンロードするとき（ここ）、 クリック 高度なテーマ設定 右側に。ここでは、「CSSスコープ」を設定できます。これにより、jQuery UIクラスを適用できます（すなわち ui-corners-all, 、など）特定のテーマから。これが彼らがこのオプションに対して提供する説明です：

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

ほとんどの状況では、CSSスコープを指定する必要はありません。注：CSSスコープを提供している場合、ダウンロードにはサンプルページが含まれていません。

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

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

ただし、いくつかのテーマからビットとピースを借用する新しいテーマを作成する場合は、2つのオプションがあります。CSSと画像ファイルを自分で編集する（推奨されない）か、テーマローラーツールを使用して独自のツールを作成します。

使い方：

CSSスコープは、CSSセレクターにすぎません。テーマXはクラスのあるすべての要素にのみ適用する必要があるとしましょう。 aClass. 。この場合、CSSスコープはそうです .aClass. 。したがって、テーマXから要素に丸い角を追加する場合（CSSスコープがに設定されていると仮定します .aClass）、あなたのHTMLは次のようなものを望んでいます：

<div class='ui-rounded-corners aClass'>
    Content    
</div>

他のヒント

この手法をオーバーレイし、ボディに追加されるUIウィジェットに適用すると、いくつかの問題があります - ダイアログ、デートピッカー、オートコンプリート....

Autocompleteの場合、スコープクラスで親要素を取得するために次のことを行うことができます。オートコンプリート自体のULにスコップクラスを追加するだけでは十分ではありません。

jQuery('.autocomplete').autocomplete({
    source: function(request, response){
        {....}
    },
    create: function(event, ui) {
        jQuery('.ui-autocomplete').wrap('<span class="xxSCOPPEDCLASSxx"></span>');
    }
});

ちょっと - 何時間も検索し、最終的にフィラメントグラップからそれを行う方法を見つけました。
http://www.filamentgroup.com/lab/using_multiple_jquery_ui_themes_on_a_single_page/

ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top