jQuery UI CSS 框架 API
jQuery UI CSS 框架 API
jQuery UI CSS Framework是 jQuery UI 的核心主题系统部分，它提供了一套语义化的 CSS 类，用于确保所有小部件（Widgets）在视觉上保持一致，并支持通过ThemeRoller轻松自定义主题。这些类分为两部分：
- 结构性类：主要在
jquery-ui.structure.css或旧版的ui.core.css中，处理布局、定位、浮动等固定样式。 - 主题类：主要在
jquery-ui.theme.css或旧版的ui.theme.css中，处理颜色、字体、背景、边框等可主题化样式。
官方文档地址：https://api.jqueryui.com/theming/css-framework/
该框架的设计目的是让开发者（包括自定义小部件）使用这些类来构建一致、可主题化的 UI 组件。
类分类及完整列表
布局辅助类（Layout Helpers）
.ui-helper-hidden：完全隐藏元素（包括屏蔽辅助技术）。.ui-helper-hidden-accessible：视觉隐藏，但保持辅助技术（如屏幕阅读器）可访问。.ui-helper-reset：重置边距、填充、边框、列表样式、字体等。.ui-helper-clearfix：清除浮动（浮动包裹）。.ui-front：管理多个小部件的层叠顺序（z-index）。
小部件容器类（Widget Containers）
.ui-widget：所有小部件的外层容器类，设置字体家族和大小。.ui-widget-header：头部容器类（如 Tabs 的标题栏），样式包括边框、背景、字体。.ui-widget-content：内容容器类，样式与 header 互补。
交互状态类（Interaction States）（用于可点击元素，如按钮）
.ui-state-default：默认状态。.ui-state-hover：鼠标悬停状态。.ui-state-focus：键盘焦点状态。.ui-state-active：激活（点击）状态。
交互提示类（Interaction Cues）
.ui-state-highlight：高亮状态（如选中或提示）。.ui-state-error：错误状态容器。.ui-state-error-text：错误文本颜色（无背景）。.ui-state-disabled：禁用状态（降低不透明度）。.ui-priority-primary：主按钮（高优先级）。.ui-priority-secondary：次按钮（低优先级）。
图标类（Icons）
.ui-icon：基础图标类（16x16 像素，背景精灵图）。- 图标命名规则：
.ui-icon-{类型}-{子描述}-{方向}，例如：.ui-icon-triangle-1-e：向右三角箭头。.ui-icon-circle-close：关闭圆圈。.ui-icon-search：搜索图标。
- 完整图标列表可在 ThemeRoller 预览中查看（悬停显示类名），共有上百种（如箭头、播放、星标等）。
圆角辅助类（Corner Radius）
.ui-corner-all：所有四角圆角。.ui-corner-tl：左上角。.ui-corner-tr：右上角。.ui-corner-bl：左下角。.ui-corner-br：右下角。.ui-corner-top：上两角。.ui-corner-bottom：下两角。.ui-corner-left：左两角。.ui-corner-right：右两角。
覆盖与阴影类（Overlay & Shadow）
.ui-widget-overlay：全屏模态遮罩（背景和不透明度）。.ui-widget-shadow：小部件阴影（box-shadow）。
使用建议
- 在自定义小部件或手动构建 UI 时，使用这些类确保与 jQuery UI 原生组件一致。
- 示例：一个简单按钮
<ahref="#"class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only"><spanclass="ui-button-text">点击我</span></a> - 通过 ThemeRoller 自定义时，这些类的颜色、背景等会自动更新。
- 注意：jQuery UI 1.13+ 版本将 CSS 分离为
jquery-ui.css（完整）、jquery-ui.structure.css（结构）和jquery-ui.theme.css（主题）。
如果您需要某个类的具体示例代码、图标列表详情，或如何在自定义组件中使用这些类，请提供更多信息！