企业官网建设流程全解析

jQuery UI ThemeRoller 指南

ThemeRoller是 jQuery UI 官方提供的在线主题自定义工具，它允许你通过可视化界面快速设计、预览和下载自定义主题，而无需手动编写 CSS。工具基于 jQuery UI 的 CSS 框架，能统一调整所有组件（如 Accordion、Tabs、Datepicker、Button 等）的外观。

当前状态（截至 2025 年 12 月）：工具仍完全可用且功能正常，地址：https://jqueryui.com/themeroller/

主要功能与界面

ThemeRoller 界面分为两个主要标签页：

• Gallery：预设主题画廊，提供约 24 个经典主题（如 Smoothness、UI Lightness、Redmond 等），可直接下载或作为基础进一步自定义。

• Roll Your Own：从零自定义主题，左侧面板提供各种设置选项，右侧实时预览组件效果。

可自定义选项（左侧面板）

• Font Settings：字体家族、大小。
• Corner Radius：全局圆角半径（使用 CSS3 border-radius，IE8 以下不支持）。
• Header/Toolbar：头部和工具栏颜色、背景。
• Content：内容区域样式。
• Clickable States：默认、悬停（hover）、激活（active）、焦点状态。
• Highlight & Error：高亮和错误状态。
• Overlay & Shadows：模态遮罩和阴影。
• Icons：框架图标颜色。

实时预览组件（右侧）

调整时会即时更新以下组件的外观：

• Accordion（折叠面板）
• Tabs（标签页）
• Datepicker（日期选择器）
• Button（按钮，包括图标按钮）
• Slider（滑块）
• Progressbar（进度条）
• Dialog（对话框）
• Autocomplete、Checkboxradio、Controlgroup、Selectmenu、Spinner、Tooltip 等。

使用步骤

1. 打开 https://jqueryui.com/themeroller/
2. 在Gallery选择预设主题，或在Roll Your Own从空白开始。
3. 调整左侧参数，观察右侧预览变化。
4. 满意后点击Download theme，跳转到 Download Builder，选择 jQuery UI 版本（推荐 1.14.1）和需要的组件，然后下载 ZIP 包（包含自定义的jquery-ui.css和images文件夹）。
5. 将下载的文件引入项目即可使用。

小贴士：

• 自定义后可通过分享 URL 保存主题（书签或复制链接）。
• 如果只需快速测试，可直接从 CDN 使用预设主题。

虽然 jQuery UI 已进入维护模式，但 ThemeRoller 仍是设计一致性主题的最便捷工具。如果您需要特定主题的示例（如暗黑模式）或帮助生成某个样式，欢迎提供更多细节！