news 2026/4/23 11:35:00

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/4/23 11:21:23

系统架构设计师实战:从零构建高可用电商平台

快速体验 打开 InsCode(快马)平台 https://www.inscode.net输入框内输入如下内容&#xff1a; 设计一个高可用电商平台的系统架构&#xff0c;包括前端、后端、数据库、缓存、消息队列等组件。要求支持每秒10万级并发&#xff0c;99.99%的可用性&#xff0c;并考虑容灾备份方案…

作者头像 李华
网站建设 2026/4/23 9:59:48

AI如何优化嵌入式开发?IAR与快马平台结合实践

快速体验 打开 InsCode(快马)平台 https://www.inscode.net输入框内输入如下内容&#xff1a; 创建一个基于STM32的智能温控系统项目&#xff0c;使用IAR Embedded Workbench开发环境。要求包含以下功能&#xff1a;1) 通过DS18B20传感器采集温度数据 2) 使用PID算法控制PWM输…

作者头像 李华
网站建设 2026/4/23 7:06:44

ControlNet环境搭建终极避坑指南:从零到精通的实战演练

ControlNet环境搭建终极避坑指南&#xff1a;从零到精通的实战演练 【免费下载链接】ControlNet Let us control diffusion models! 项目地址: https://gitcode.com/gh_mirrors/co/ControlNet 您是否在搭建ControlNet环境时遇到过这些问题&#xff1a;依赖冲突导致安装失…

作者头像 李华
网站建设 2026/4/23 8:32:40

零基础入门:用AI开发你的第一个雨滴插件

快速体验 打开 InsCode(快马)平台 https://www.inscode.net输入框内输入如下内容&#xff1a; 开发一个面向新手的雨滴插件生成向导&#xff0c;通过简单的问答形式收集用户需求&#xff08;如插件类型、显示内容、样式偏好等&#xff09;&#xff0c;然后自动生成基础插件代码…

作者头像 李华
网站建设 2026/4/23 8:33:32

电商系统中的INSTR函数实战:5个典型场景解析

快速体验 打开 InsCode(快马)平台 https://www.inscode.net输入框内输入如下内容&#xff1a; 开发一个电商数据分析演示项目&#xff0c;展示INSTR函数的5个实际应用场景&#xff1a;1.商品标题关键词匹配&#xff1b;2.用户搜索词分析&#xff1b;3.物流地址解析&#xff1b…

作者头像 李华
网站建设 2026/4/23 8:36:54

ip2region vs 传统IP库:效率与准确性的全面对比

快速体验 打开 InsCode(快马)平台 https://www.inscode.net输入框内输入如下内容&#xff1a; 设计一个性能测试工具&#xff0c;对比ip2region和其他主流IP数据库&#xff08;如GeoIP&#xff09;的查询速度和准确性。功能包括&#xff1a;1. 批量IP查询测试&#xff1b;2. 查…

作者头像 李华