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 组件。

类分类及完整列表

  1. 布局辅助类(Layout Helpers)
  • .ui-helper-hidden:完全隐藏元素(包括屏蔽辅助技术)。
  • .ui-helper-hidden-accessible:视觉隐藏,但保持辅助技术(如屏幕阅读器)可访问。
  • .ui-helper-reset:重置边距、填充、边框、列表样式、字体等。
  • .ui-helper-clearfix:清除浮动(浮动包裹)。
  • .ui-front:管理多个小部件的层叠顺序(z-index)。
  1. 小部件容器类(Widget Containers)
  • .ui-widget:所有小部件的外层容器类,设置字体家族和大小。
  • .ui-widget-header:头部容器类(如 Tabs 的标题栏),样式包括边框、背景、字体。
  • .ui-widget-content:内容容器类,样式与 header 互补。
  1. 交互状态类(Interaction States)(用于可点击元素,如按钮)
  • .ui-state-default:默认状态。
  • .ui-state-hover:鼠标悬停状态。
  • .ui-state-focus:键盘焦点状态。
  • .ui-state-active:激活(点击)状态。
  1. 交互提示类(Interaction Cues)
  • .ui-state-highlight:高亮状态(如选中或提示)。
  • .ui-state-error:错误状态容器。
  • .ui-state-error-text:错误文本颜色(无背景)。
  • .ui-state-disabled:禁用状态(降低不透明度)。
  • .ui-priority-primary:主按钮(高优先级)。
  • .ui-priority-secondary:次按钮(低优先级)。
  1. 图标类(Icons)
  • .ui-icon:基础图标类(16×16 像素,背景精灵图)。
  • 图标命名规则:.ui-icon-{类型}-{子描述}-{方向},例如:
    • .ui-icon-triangle-1-e:向右三角箭头。
    • .ui-icon-circle-close:关闭圆圈。
    • .ui-icon-search:搜索图标。
  • 完整图标列表可在 ThemeRoller 预览中查看(悬停显示类名),共有上百种(如箭头、播放、星标等)。
  1. 圆角辅助类(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:右两角。
  1. 覆盖与阴影类(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(主题)。

如果您需要某个类的具体示例代码、图标列表详情,或如何在自定义组件中使用这些类,请提供更多信息!

文章已创建 3318

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

相关文章

开始在上面输入您的搜索词,然后按回车进行搜索。按ESC取消。

返回顶部