jQuery UI 主题指南
jQuery UI 的主题系统是其一大亮点,它基于一个强大的 CSS 框架,允许开发者轻松统一所有小部件(如 Datepicker、Tabs、Dialog)的外观。主题主要通过 CSS 类(如 .ui-widget、.ui-state-default)实现语义化样式,确保一致性。
当前(2025 年 12 月),jQuery UI 最新版本为 1.14.1(2024 年 8 月发布),主题系统仍完整支持,包括 ThemeRoller 在线工具。
内置预设主题(Gallery Themes)
jQuery UI 提供约 24 个经典预设主题,可直接从 CDN 或下载包中使用。常见热门主题包括:
- Smoothness(默认,最常用,轻盈现代)
- UI Lightness(浅色、清新)
- UI Darkness(深色)
- Redmond(类似 Windows 风格,蓝色调)
- Start(蓝色渐变)
- Sunny(温暖橙黄色)
- Overcast(灰色调)
- Le Frog(绿色)
- Cupertino(类似 Apple iOS 风格)
- South Street、Blitzer、Humanity 等
这些主题可在 ThemeRoller 的 Gallery 标签中预览和选择。
使用预设主题(推荐 CDN 方式)
<!-- 示例:Smoothness 主题 -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.14.1/themes/smoothness/jquery-ui.min.css">
<!-- 其他主题示例(替换 smoothness 为主题文件夹名) -->
<!-- UI Lightness: https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.14.1/themes/ui-lightness/jquery-ui.min.css -->
<!-- Redmond: https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.14.1/themes/redmond/jquery-ui.min.css -->
自定义主题(ThemeRoller)
最强大功能是使用在线工具 ThemeRoller 来自定义主题:https://jqueryui.com/themeroller/
步骤:
- 打开工具,选择 Gallery 标签从预设主题开始修改,或 Roll Your Own 从零自定义。
- 调整参数:
- 字体设置(家族、大小)
- 圆角半径(Corner Radius)
- 头部/工具栏颜色
- 内容区样式
- 可点击状态(默认、悬停、激活)
- 高亮/错误状态
- 阴影和模态遮罩
- 图标颜色
- 右侧实时预览组件效果(Accordion、Tabs、Datepicker 等)。
- 点击 Download theme,跳转到 Download Builder,选择组件后下载自定义 CSS 和 images 文件夹。
高级技巧:
- 手动编辑下载的
jquery-ui.theme.css文件,进一步微调。 - 在项目 CSS 中覆盖样式(如
.ui-button { background: your-color; })。 - 多个主题共存:使用 scope(如添加类
.my-theme到容器)。
注意:ThemeRoller 生成的主题兼容所有 jQuery UI 组件,且文件体积小。项目虽进入维护模式,但主题工具仍活跃可用。
如果您想特定主题的 CDN 链接、某个自定义示例,或对比现代替代(如 Bootstrap 主题),请告诉我!