jQueryのUI CSSフレームワークAPI

jQueryのUI CSSフレームワーク

jQueryのUIは、カスタムjQueryのウィジェットやデザインを作成するために、強力なCSSフレームワークが含まれています。 フレームが必要な一般的なユーザー・インターフェース・クラスが含まれています、とjQuery UI ThemeRollerのメンテナンスを使用することができます。 jQueryのUI CSSフレームワークを使用して、独自のUIコンポーネントを作成すること。 あなたは、コードのコミュニティの統合をプラグインするためには、Sharemark条約を使用する必要があります。

Frameworkのクラス

構造に応じて固定されている以下のCSSクラススタイルがある、またはそれはthemable（色、フォント、背景など）であるかどうか、で定義されているui.core.cssとui.theme.css二つのファイル。 これらのクラスはコンポーネントテーマのjQueryのUI ThemeRollerのことで、アプリケーション全体の視覚的一貫性を達成するために、ユーザーインターフェース要素のために設計されています。

レイアウトヘルパー

• .ui-helper-hidden ：アプリケーションの要素をdisplay: none 。
• .ui-helper-hidden-accessible ：隠された（ページにより絶対位置）にアクセスするアプリケーションの要素。
• .ui-helper-reset ：基本的なスタイルUI要素がリセットされます。 次のような要素をリセットpadding 、 margin 、 text-decorationように、リストのスタイルを、と。
• .ui-helper-clearfix ：親要素フロートパッケージのプロパティの適用。
• .ui-helper-zfix ：用の<iframe>要素のiframe "修正" CSSを適用します。

ウィジェットコンテナ

• .ui-widget ：容器の外側のクラスは、ウィジェットのすべてを適用します。 フォントとフォントサイズのためだけでなく、アプリケーションのフォーム要素と1EMフォントサイズから同じフォント上のウィジェットアプリケーションは、Windowsのブラウザ承継に対処します。
• .ui-widget-header ：タイトルコンテナアプリケーションクラス。 要素とその子要素のテキストの、リンク、アイコンがスタイルコンテナを見出し適用します。
• .ui-widget-content ：コンテナアプリケーションのクラス内容。 要素とその子要素のテキスト、リンク、アイコン、アプリケーションのコンテンツコンテナのスタイルの。 （親要素のタイトルや兄弟にも適用することができます）

インタラクティブな状態

• .ui-state-default ：ボタン要素をクリックすると、クラスを適用することができます。 要素とその子要素のテキスト、リンク、アイコンのアプリケーション「クリッカブルデフォルト "スタイルのコンテナの。
• .ui-state-hover ：マウスときにクラス上のクリック可能なボタン要素に適用された場合に懸濁しました。 要素とその子要素のテキスト、リンク、アイコンのアプリケーション「クリッカブルホバー」コンテナのスタイルの。
• .ui-state-focus ：アプリケーションクラスときにクリック可能なボタン要素でキーボードフォーカス。 要素とその子要素のテキスト、リンク、アイコンのアプリケーション「クリッカブルホバー」コンテナのスタイルの。
• .ui-state-active ：アプリケーションクラスのマウスクリックは、ボタン要素をクリックすることができます。 要素とその子要素のテキスト、リンク、アイコンのアプリケーション「クリッカブルアクティブ」コンテナのスタイルの。

対話プロンプトキュー

• .ui-state-highlight ：クラス要素のアプリケーションを強調表示または選択します。 要素とその子要素のテキスト、リンク、アイコンアプリケーション「ハイライト」コンテナのスタイルの。
• .ui-state-error ：エラーメッセージコンテナ要素のアプリケーションクラス。 要素とその子要素のテキスト、リンク、アイコンのアプリケーション「エラー」コンテナのスタイルの。
• .ui-state-error-text ：だけでなく、アプリケーションのエラーテキストクラスの背景色に対して。 サブカラーアプリケーションアイコンのエラーアイコンであるとラベルを形成するために用いることができます。
• .ui-state-disabled ：UI要素が暗い不透明度を適用無効にします。 これは、すでに定義されたスタイルの要素が余分なスタイルを追加することを意味します。
• .ui-priority-primary ：最初の優先ボタンアプリケーションのクラス。 太字の応用。
• .ui-priority-secondary ：第二優先ボタンアプリケーションのクラス。 正常体重のテキスト要素の適用は、わずかな透明度を適用します。

アイコン

ステータスと画像

• .ui-icon ：アプリケーションのアイコン要素の基本クラス。 背景画像を設定する「コンテンツ」状態スプライトのテキストの中に隠さに16pxの正方形の大きさを、設定します。 注： .ui-icon 、クラスがその親コンテナに基づいて、異なる背景画像スプライトを取得します。 例えば、 ui-state-defaultコンテナのui-icon要素応じてui-state-defaultの色アイコンの色を。

アイコンの種類

声明の中で.ui-iconクラスの後、あなたはクラスのアイコンのタイプの2速を宣言することができます。 通常の状況下では、アイコンのクラスは、構文は以下の.ui-icon-{icon type}-{icon sub description}-{direction} 。

たとえば、次のように三角形のアイコンは、右向き： .ui-icon-triangle-1-e

jQueryのUIのThemeRollerのそのプレビュー欄では、CSSフレームワークアイコンの完全な範囲を提供します。 クラス名を表示するには、アイコンの上にマウスを移動。

その他のビジュアル

半径アシスタント

• .ui-corner-tl ：application要素半径の左上隅。
• .ui-corner-tr ：application要素半径の右上隅。
• .ui-corner-bl ：アプリケーションエレメント半径の左下隅。
• .ui-corner-br ：アプリケーションエレメント半径の右下隅。
• .ui-corner-top ：application要素半径の左上隅。
• .ui-corner-bottom ：アプリケーションの半径の左下隅の要素。
• .ui-corner-right ：アプリケーション半径の上下右の対角要素。
• .ui-corner-left ：アプリケーション半径の上部と左下の対角要素。
• .ui-corner-all ：要素の適用半径の四隅。

表紙＆シャドウ

• .ui-widget-overlay ：アプリケーションの画面の幅と高さの100％をカバーし、画面の背景色/質感と不透明度を設定します。
• .ui-widget-shadow ：アプリケーションの適用範囲のクラス、不透明度を設定し、オフセット/左オフセット、と影"厚さ。」 厚さは、（パディング）が適用されたシャドウ・セット・マージンのすべての側面によるものです。 適用されたマージン（余白）と左マージン（余白）を設定することにより、オフセット（正することができ、それが負になることができます）。