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:基础图标类(16×16 像素,背景精灵图)。- 图标命名规则:
.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 原生组件一致。
- 示例:一个简单按钮
<a href="#" class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only">
<span class="ui-button-text">点击我</span>
</a>
- 通过 ThemeRoller 自定义时,这些类的颜色、背景等会自动更新。
- 注意:jQuery UI 1.13+ 版本将 CSS 分离为
jquery-ui.css(完整)、jquery-ui.structure.css(结构)和jquery-ui.theme.css(主题)。
如果您需要某个类的具体示例代码、图标列表详情,或如何在自定义组件中使用这些类,请提供更多信息!