jQueryのUIのテーマ
すべてのjQuery UIプラグインは、開発者がシームレスに自分のサイトやアプリケーションのルックアンドフィールにUIウィジェットを統合することができます。 各ウィジェットは、CSSスタイルによって定義され、2スタイル情報を含んでいる:標準のjQuery UI CSSフレームワークスタイルと特定のプラグインのスタイルを。
jQueryのUI CSSフレームワークは、タイトル、内容、またはクリック可能な領域として小さな構成要素の役割を示すために、クラスの意味表現を提供します。 これらはすべて、小さな部品で一貫性があり、クリック可能なタブ(タブ)、アコーディオン(アコーディオン)またはボタン(ボタン)同じ持っているui-state-default
、彼らがクリック可能であることを示すために、クラスA。 ユーザーはこれらの要素の一番上に置いたときにクラスになり、 ui-state-hover
、その後、これらの要素はに選出されたとなるui-state-active
。 一貫性のクラスは、相互作用状態で同様の役割を有する要素またはコンポーネントのすべての外観一貫したパフォーマンスを行います。
CSSスタイルのフレームは、別のファイルにカプセル化された名前が付けられui.theme.css
。 介してこのファイルThemeRollerの変更をアプリケーションに許可します。 フレームスタイルは、唯一のように色、背景画像、アイコンとする限り、プロパティの外観と感触に影響を与える含まれています。 したがって、これらは、「安全」なスタイルであり、それはプラグイン機能には影響しません。 この分離は、開発者がで使用できることを意味しtheme.css
カスタム外観を作成し、感じるように色やイメージファイルを変更します。 プラグインやバグ修正の将来は利用できるようになり、これらは、テーマによって変更することなく使用することができますので。
フレームスタイルカバーのみを見て、感じているので、それは特定のプラグインのスタイルシートを含める必要があるので、これらのスタイルシートは、すべての余分なウィジェットがこのような大きさ、パディング、マージンなどの機能構造のスタイル規則を、許可含み、ポジショニング、フロート。 各ウィジェットのスタイルシートthemes/base
、およびプラグインの名前、例えば「jquery.ui.accordion.css」のフォルダ。 彼らは一緒にスタイルをカバーするフレームワークを提供するため、これらのパターンは慎重にスクリプトを編集する必要があります。
私たちは、jQueryのUI CSSフレームワークは、それが簡単にエンドユーザーがカスタムテーマやプラグインを使用できるようになり、プラグインのjQueryを作成するために、すべての開発者を奨励します。
テーマ
ここでは一般的な手順に関連のjQuery UIウィジェットの3のとおりです。
- ThemeRollerのトピックをダウンロード:最初に使用することでテーマを作成ThemeRollerのを生成し、テーマをダウンロードします。 このアプリケーションは、新しい作成します
ui.theme.css
ファイルを、すべての必要な背景画像とアイコンスプライト含まれているimages
フォルダを。 この方法は、道のテーマを作成し、維持するために最初に、それは限られたThemeRollerのカスタムを提供するオプションです。 - コントロールのルックアンドフィールをさらにするためには、デフォルトのテーマ(平滑)から始まりますから、またはThemeRollerのスタートによって生成された1トピックから選択し、調整することができます:CSSファイルを変更
ui.theme.css
ファイル、個別のプラグインまたはいずれかをスタイルシート。 たとえば、あなたは簡単にすべてのボタンの半径の角度が他のUIコンポーネントの値とは異なる調整、またはパス・ウィザードを変更するには、カスタムアイコンを使用することができます。 スタイルは、あなたもUIで複数のテーマを使用することができ、少しの範囲です。 メンテナンスを容易にするために、提案された変更のみui.theme.css
ファイルや画像を。 - 再書き込みカスタムCSS:外観を制御し、感じる最大化するには、プラグインフレームワーククラスの使用または特定のスタイルシートなしで、各ウィジェットとCSSで再度書き込みを開始することができます。 あなたが見てみたいと感触は、CSSを変更したり、高度にカスタマイズされたタグを使用することによって達成することができる場合は、このメソッドを使用することができます。 このアプローチは、CSSの用語で深い専門知識を必要とし、将来のプラグインの手動更新が必要です。