jQuery UI CSS フレームワーク API

jQuery UI CSS フレームワーク

jQuery UI には、カスタム jQuery ウィジェットを作成するために設計された強力な CSS フレームワークが含まれています。このフレームワークには、共通のユーザーインターフェイスに必要なクラスが含まれており、jQuery UI ThemeRoller を使用して保守できます。 jQuery UI CSS フレームワークを使用して、独自の UI コンポーネントを作成します。プラグインコミュニティ内でのコードの統合を容易にするために、共有マークアップ規則を採用する必要があります。

フレームワーククラス

次の CSS クラスは、スタイルが固定され構造化されているかどうか、またはテーマ (色、フォント、背景など) を設定できるかどうかに応じて、ui.core.css と ui.theme.css を 2 つのファイルに分割します。これらのクラスは、アプリケーション全体で視覚的な一貫性を実現するためにユーザーインターフェイス要素とともに使用するように設計されており、コンポーネントは jQuery UI ThemeRoller を通じてテーマを設定できます。 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、list-style，等等。
.ui-helper-clearfix：对父元素应用浮动包装属性。
.ui-helper-zfix：对 <iframe> 元素应用 iframe "fix" CSS。

小部件容器

.ui-widget：对所有小部件的外部容器应用的 Class。对小部件应用字体和字体尺寸，同时也对自表单元素应用相同的字体和 1em 的字体尺寸，以应对 Windows 浏览器中的继承问题。
.ui-widget-header：对标题容器应用的 Class。对元素及其子元素的文本、链接、图标应用标题容器样式。
.ui-widget-content：对内容容器应用的 Class。对元素及其子元素的文本、链接、图标应用内容容器样式。（可应用到标题的父元素或者同级元素）

交互状态

.ui-state-default：对可点击按钮元素应用的 Class。对元素及其子元素的文本、链接、图标应用 "clickable default" 容器样式。
.ui-state-hover：当鼠标悬浮在可点击按钮元素上时应用的 Class。对元素及其子元素的文本、链接、图标应用 "clickable hover" 容器样式。
.ui-state-focus
レイアウトヘルパー🎜
- 🎜.ui-helper-hidden: display: none を要素に適用します。 🎜
- 🎜.ui-helper-hidden-accessible: アクセスの非表示を要素に適用します (ページの絶対配置を介して)。 🎜
- 🎜.ui-helper-reset: UI 要素の基本スタイルのリセット。 padding、margin、text-decoration、list-style などの要素をリセットします。 🎜
- 🎜.ui-helper-clearfix: フローティングラッパー属性を親要素に適用します。 🎜
- 🎜.ui-helper-zfix: iframe「fix」CSS を <iframe> 要素に適用します。 🎜
🎜ウィジェットコンテナ🎜
- 🎜.ui-widget: すべてのウィジェットクラスの外側のコンテナに適用されます。フォントとフォントサイズをウィジェットに適用しますが、Windows ブラウザでの継承の問題を考慮して、同じフォントと 1em フォントサイズを自己形式要素にも適用します。 🎜
- 🎜.ui-widget-header: ヘッダーコンテナーに適用されるクラス。タイトルコンテナスタイルを要素とその子要素のテキスト、リンク、アイコンに適用します。 🎜
- 🎜.ui-widget-content: コンテンツコンテナに適用されるクラス。コンテンツコンテナスタイルを要素とその子要素のテキスト、リンク、アイコンに適用します。 (タイトルの親要素または兄弟要素に適用できます) 🎜
🎜インタラクション状態 🎜
- 🎜.ui- state-default: クリック可能なボタン要素に適用されるクラス。「クリック可能なデフォルト」コンテナスタイルを要素とその子要素のテキスト、リンク、アイコンに適用します。 🎜
- 🎜.ui-state-hover: クリック可能なボタン要素の上にマウスを置いたときに適用されるクラス。「クリック可能なホバー」コンテナスタイルを要素とその子要素のテキスト、リンク、アイコンに適用します。 🎜
- 🎜.ui-state-focus: キーボードのフォーカスがクリック可能なボタン要素にある場合に適用されるクラス。「クリック可能なホバー」コンテナースタイルを、要素とその子要素のテキスト、リンク、アイコンに適用します。 🎜
- .ui-state-active: クリック可能なボタン要素をマウスでクリックしたときに適用されるクラス。「クリック可能なアクティブ」コンテナスタイルを要素とその子要素のテキスト、リンク、アイコンに適用します。 .ui-state-active：当鼠标点击可点击按钮元素上时应用的 Class。对元素及其子元素的文本、链接、图标应用 "clickable active" 容器样式。
交互提示 Cues
- .ui-state-highlight：对高亮或者选中元素应用的 Class。对元素及其子元素的文本、链接、图标应用 "highlight" 容器样式。
- .ui-state-error：对错误消息容器元素应用的 Class。对元素及其子元素的文本、链接、图标应用 "error" 容器样式。
- .ui-state-error-text：对只有无背景的错误文本颜色应用的 Class。可用于表单标签，也可以对子图标应用错误图标颜色。
- .ui-state-disabled：对禁用的 UI 元素应用一个暗淡的不透明度。意味着对一个已经定义样式的元素添加额外的样式。
- .ui-priority-primary：对第一优先权的按钮应用的 Class。应用粗体文本。
- .ui-priority-secondary：对第二优先权的按钮应用的 Class。应用正常粗细的文本，对元素应用轻微的透明度。
图标
状态和图像
- .ui-icon：对图标元素应用的基本 Class。设置尺寸为 16px 方块，隐藏内部文本，对 "content" 状态的精灵图像设置背景图像。注意： .ui-icon class 将根据它的父容器得到一个不同的精灵背景图像。例如，ui-state-default 容器内的 ui-icon 元素将根据 ui-state-default 的图标颜色进行着色。
图标类型
在声明 .ui-icon class 之后，接着您可以声明一个秒速图标类型的 class。通常情况下，图标 class 遵循语法 .ui-icon-{icon type}-{icon sub description}-{direction}。
例如，一个指向右侧的三角形图标，如下所示：.ui-icon-triangle-1-e
jQuery UI 的 ThemeRoller 在它的预览一栏中提供了全套的 CSS 框架图标。将鼠标悬浮在图标上可查看 class 名称。
其他视觉效果
圆角半径助手
- .ui-corner-tl：对元素的左上角应用圆角半径。
- .ui-corner-tr：对元素的右上角应用圆角半径。
- .ui-corner-bl：对元素的左下角应用圆角半径。
- .ui-corner-br：对元素的右下角应用圆角半径。
- .ui-corner-top
インタラクティブキュー
アイコン
ステータスと画像
アイコンタイプ
🎜 .ui-icon クラスを宣言した後、第 2 速度アイコンタイプのクラスを宣言できます。通常、アイコンクラスは構文 .ui-icon-{icon type}-{icon sub description}-{direction} に従います。 🎜🎜たとえば、次のような右向きの三角形アイコン: .ui-icon-triangle-1-e🎜🎜ThemeRoller は、プレビュー列に CSS フレームアイコンの完全なセットを提供します。アイコンの上にマウスを置くと、クラス名が表示されます。 🎜
その他の視覚効果
コーナー半径アシスタント
- .ui-corner-bottom: 要素の左隅と右隅に角の半径を適用します。 .ui-corner-bottom：对元素下边的左右角应用圆角半径。
- .ui-corner-right：对元素右边的上下角应用圆角半径。
- .ui-corner-left：对元素左边的上下角应用圆角半径。
- .ui-corner-all：对元素的所有四个角应用圆角半径。
覆盖 & 阴影
- .ui-widget-overlay：对覆盖屏幕应用 100% 宽度和高度，同时设置背景颜色/纹理和屏幕不透明度。
- .ui-widget-shadow
.ui-corner-right: 要素の右側の上隅と下隅に角の半径を適用します。

🎜🎜🎜.ui-corner-left: 要素の左隅の上隅と下隅に隅の半径を適用します。 🎜🎜🎜🎜.ui-corner-all: 要素の 4 つの角すべてに角の半径を適用します。 🎜🎜🎜

オーバーレイとシャドウ

.ui-widget-overlay

.ui-widget-shadow

jQuery UI CSS フレームワーク API