jQuery UI_jquery でさまざまなテーマを適用する方法

最初は自分でCSSファイルを修正するつもりでした。これは非常に報われない仕事であることが判明した。

かつて、私が jQuery UI ホームページ [http://jqueryui.com/home] に滞在していたとき、すぐに私の注意を引いた単語がありました。これが「可変テーマ」の意味ですか？そこで私は [http://jqueryui.com/themeroller/] にアクセスして、下の写真の場所を見つけました。公式 Web サイトでは、テーマの変更を「テーマ ローラー」と呼んでいます (笑)。レベルは平均的ですが、シン・ダヤは自分がどれほど満足しているかわかりません）。

最初のTABページには[独自のテーマスタイルから抜け出す]と書かれています。以下の各サブ項目を開いて、必要なスタイルを定義した後、ダウンロード ボタンをクリックして、定義したテーマ スタイルのセットをダウンロードします。これは、CSS ファイルを自分で変更するよりもはるかに便利です。

2枚目のTABページを開いてみると、たくさんのテーマが用意されていることが分かりました。これは私のような怠け者にとって非常に適しており、スタイルがたくさんあるので、常に欲しいものが見つかります。

好みのスタイルを選択してダウンロード ボタンをクリックすると、自動的にダウンロード ページに移動し、必要なテーマ スタイル パッケージをダウンロードできます。ダウンロードページの[テーマ]エリアのドロップダウンボックスで必要なテーマを選択することもできます。私は[Cupertino]を選択しました。

2 つの圧縮パッケージをダウンロードします (注: テーマのスタイルは異なりますが、圧縮パッケージ名は同じです。保存時に上書きしないでください)。解凍後、異なるテーマは CSS フォルダー内の内容が異なるだけであることがわかりました。テーマ パッケージのリソースが異なるだけです (テーマ パッケージのリソースには画像と CSS ファイルが含まれます)。それ以外はすべて同じで、フォルダー ファイル名も同じで、ファイル内の要素の名前も同じです。

アプリケーション プロジェクトでは、変数テーマ

jQuery UI 。写真に示すように:

私たちがしなければならないのは、

jQuery UI

を使用する必要があるページに CSS ファイルと JS ファイルへの参照を追加することだけです。通常はマスターページに追加します。

コードをコピー コードは次のとおりです:

必要な場合jQuery UI を置き換える テーマ スタイルを追加するときは、CSS への参照パスを変更するだけで済みます。下の図のように、この色の部分が修正箇所となります。

コードをコピー コードは次のとおりです:

こちら【
http://jqueryui.com/demos/tabs/

] は、
jQuery UI の使用例の紹介です。このアドレスには、使用方法が直接入力されています。 TAB コントロール。使用説明書のページレイアウトは次のとおりです:

左: 表示するオブジェクトを選択します。

中央: 実行時の実際の効果が表示される場所です。[ソースを表示] をクリックしてソース コードを表示します。

右側: 選択したオブジェクトのいくつかの拡張機能の例です。さまざまな機能を選択すると、それに応じて表示領域が変化し、ソース コード領域もそれに応じて変化します。たとえば、[マウスオーバーで開く] を選択します。上の図、タブ コントロール タブ ページは、切り替えにクリックする必要があった当初のタブ ページから、マウスで上に移動するだけで済むタブ ページに変更されました。

最後に、

jQuery UI

を再度強くお勧めします。