jQuery UI 主题

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 主题 --><linkrel="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/

步骤：

1. 打开工具，选择Gallery标签从预设主题开始修改，或Roll Your Own从零自定义。
2. 调整参数：
   • 字体设置（家族、大小）
   • 圆角半径（Corner Radius）
   • 头部/工具栏颜色
   • 内容区样式
   • 可点击状态（默认、悬停、激活）
   • 高亮/错误状态
   • 阴影和模态遮罩
   • 图标颜色
3. 右侧实时预览组件效果（Accordion、Tabs、Datepicker 等）。
4. 点击Download theme，跳转到 Download Builder，选择组件后下载自定义 CSS 和 images 文件夹。

高级技巧：

• 手动编辑下载的jquery-ui.theme.css文件，进一步微调。
• 在项目 CSS 中覆盖样式（如.ui-button { background: your-color; }）。
• 多个主题共存：使用 scope（如添加类.my-theme到容器）。

注意：ThemeRoller 生成的主题兼容所有 jQuery UI 组件，且文件体积小。项目虽进入维护模式，但主题工具仍活跃可用。

如果您想特定主题的 CDN 链接、某个自定义示例，或对比现代替代（如 Bootstrap 主题），请告诉我！