news 2026/7/18 10:15:23

jQuery UI CSS 框架 API

作者头像

张小明

前端开发工程师

1.2k 24
文章封面图
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)。
  2. 小部件容器类(Widget Containers)

    • .ui-widget:所有小部件的外层容器类,设置字体家族和大小。
    • .ui-widget-header:头部容器类(如 Tabs 的标题栏),样式包括边框、背景、字体。
    • .ui-widget-content:内容容器类,样式与 header 互补。
  3. 交互状态类(Interaction States)(用于可点击元素,如按钮)

    • .ui-state-default:默认状态。
    • .ui-state-hover:鼠标悬停状态。
    • .ui-state-focus:键盘焦点状态。
    • .ui-state-active:激活(点击)状态。
  4. 交互提示类(Interaction Cues)

    • .ui-state-highlight:高亮状态(如选中或提示)。
    • .ui-state-error:错误状态容器。
    • .ui-state-error-text:错误文本颜色(无背景)。
    • .ui-state-disabled:禁用状态(降低不透明度)。
    • .ui-priority-primary:主按钮(高优先级)。
    • .ui-priority-secondary:次按钮(低优先级)。
  5. 图标类(Icons)

    • .ui-icon:基础图标类(16x16 像素,背景精灵图)。
    • 图标命名规则:.ui-icon-{类型}-{子描述}-{方向},例如:
      • .ui-icon-triangle-1-e:向右三角箭头。
      • .ui-icon-circle-close:关闭圆圈。
      • .ui-icon-search:搜索图标。
    • 完整图标列表可在 ThemeRoller 预览中查看(悬停显示类名),共有上百种(如箭头、播放、星标等)。
  6. 圆角辅助类(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:右两角。
  7. 覆盖与阴影类(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(主题)。

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

版权声明: 本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若内容造成侵权/违法违规/事实不符,请联系邮箱:809451989@qq.com进行投诉反馈,一经查实,立即删除!
网站建设 2026/7/16 22:56:23

jQuery UI 部件库(Widget Factory)

jQuery UI 部件库&#xff08;Widget Factory&#xff09; Widget Factory&#xff08;部件工厂&#xff09;是 jQuery UI 最核心、最重要的贡献。它是一个强大的插件开发框架&#xff0c;暴露为 $.widget() 方法&#xff0c;所有 jQuery UI 官方小部件&#xff08;如 Datepic…

作者头像 李华
网站建设 2026/7/17 16:09:47

24、Windows Phone 8:实时磁贴、通知与数据处理全解析

Windows Phone 8:实时磁贴、通知与数据处理全解析 1. 定制锁屏界面 当用户按下硬件锁屏按钮或手机超时,手机会被锁定。再次按下硬件按钮,锁屏界面就会出现。我们可以让应用成为锁屏内容的提供者,包括锁屏背景、详细状态、快速状态图标和计数等。不过,添加到锁屏的内容应…

作者头像 李华
网站建设 2026/7/16 15:06:04

AI助力Linux中文输入法开发:从零到一键部署

快速体验 打开 InsCode(快马)平台 https://www.inscode.net输入框内输入如下内容&#xff1a; 使用快马平台生成一个Linux中文输入法的基本框架&#xff0c;要求包含以下功能&#xff1a;1.基于Fcitx或IBus的输入法引擎适配层 2.支持拼音输入的核心算法模块 3.简繁体转换功能 …

作者头像 李华
网站建设 2026/7/17 6:41:33

31、Windows Phone应用设计与发布全流程指南

Windows Phone应用设计与发布全流程指南 一、Blend中的动画设计 在Blend的视角下,动画是随着时间逐步设置属性的过程。你可以定义一个时间点(例如1秒),然后改变该时间点的属性。这些属性变化可以使用故事板(Storyboard)映射到时间轴上,或者使用预定义的缓动函数自动塑…

作者头像 李华
网站建设 2026/7/16 8:11:32

32、Windows Phone应用开发与推广全解析

Windows Phone应用开发与推广全解析 1. 应用提交至Windows Phone应用商店 将应用推向市场的第一步是提交到Windows Phone应用商店。在提交应用页面,点击“审核并提交”按钮,即可将应用发送至商店。不过,提交审核的时间并不固定,应用获得批准可能需要长达5天的时间。如果应…

作者头像 李华
网站建设 2026/7/17 18:05:24

传统vsAI:Chrome插件开发效率对比实验

快速体验 打开 InsCode(快马)平台 https://www.inscode.net输入框内输入如下内容&#xff1a; 请用最快的方式实现一个Chrome插件&#xff1a;1.监控指定网页内容变化&#xff1b;2.当检测到变化时显示桌面通知&#xff1b;3.支持设置监控间隔时间&#xff1b;4.提供简洁的配置…

作者头像 李华