jQuery UI 官方不再提供像 "Bootstrap Themes" 那样可以直接下载的“完整模板包”。

jqueryui 模板下载
（图片来源网络，侵删）

过去,jQuery UI 确实提供过包含所有组件和主题的 ZIP 包下载，但现在，官方推荐的方式是使用 jQuery UI 官方网站的主题构建器 (ThemeRoller) 来自定义和下载您需要的主题。

下面我将分步解释如何下载和自定义您自己的 jQuery UI “模板”。

核心方法：使用 jQuery UI ThemeRoller (官方推荐)

这是最灵活、最主流的方式，您可以选择需要的组件和样式，生成一个高度定制化的包。

第一步：访问 jQuery UI ThemeRoller 网站

打开您的浏览器,访问官方主题构建器页面： https://jqueryui.com/themeroller/

jqueryui 模板下载
（图片来源网络，侵删）

您会看到一个界面,左侧是各种设置选项，右侧是实时预览效果。

第二步：选择主题 (Theme)

  1. 从 Gallery 选择预设主题：

    • 在页面顶部,您会看到 "Gallery" 选项卡。
    • 这里有很多预设好的主题,"Le Frog"、"Redmond"、"South Street" 等。
    • 点击任意一个主题,右侧的预览区域会立即更新，展示该主题下的所有组件样式。

  2. 自定义主题：

    • 切换到 "Roll Your Own" 选项卡，这里您可以完全自由地定制。
    • 字体：选择字体家族和大小。
    • 颜色：通过颜色选择器自定义标题栏、内容区、状态（如悬停、点击、错误）等各个部分的背景色、文字色、边框色等。
    • 阴影和圆角：调整阴影效果和圆角半径。
    • 图片：您甚至可以上传自己的图标来替换默认的按钮图标。

第三步：选择需要的组件 (Widgets)

在左侧的 "Structure" 部分，您可以勾选或取消勾选您希望在下载包中包含的 jQuery UI 组件。

jqueryui 模板下载
（图片来源网络，侵删）
  • 常用组件包括：
    • Accordion (手风琴)
    • Autocomplete (自动完成)
    • Button (按钮)
    • Datepicker (日期选择器)
    • Dialog (对话框)
    • Menu (菜单)
    • Progressbar (进度条)
    • Slider (滑块)
    • Tabs (标签页)
    • Tooltip (工具提示)

重要提示：只勾选您实际需要的组件，可以极大地减小最终下载文件的大小，提升网站加载速度。

第四步：下载您的自定义主题

完成所有自定义和组件选择后,点击页面右上角的 "Download" 按钮。

您会看到一个下载页面,里面包含：

  1. Development-Bundle (开发包)：

    • 包含了未压缩的 JavaScript 文件、CSS 文件以及相关的图片资源。
    • 文件结构清晰,便于您阅读源码和调试。
    • 文件结构示例：
      jquery-ui-1.13.2.custom/
├── css/
│   ├── jquery-ui.css
│   └── images/
│       ├── ui-bg_flat_0_aaaaaa_40x100.png
│       └── ... (其他图标)
├── js/
│   └── jquery-ui.js
└── index.html (一个示例文件)

  2. Production-Bundle (生产包)：

    • 包含了经过压缩和合并的 JavaScript 和 CSS 文件。
    • 文件体积更小,加载更快，适合部署到生产环境。
    • 通常只包含 jquery-ui.min.js 和 jquery-ui.min.css 以及图片文件夹。

建议：对于学习和开发，下载开发包；对于最终上线，使用生产包。

使用 CDN (最简单快捷的方式)

如果您只是想快速在项目中使用 jQuery UI，而不想下载任何文件，可以使用 CDN (Content Delivery Network)，CDN 会自动为您托管 jQuery UI 文件。

您只需要在 HTML 文件的 <head> 和 <body> 标签中引入对应的 CSS 和 JavaScript 链接即可。

示例代码：

<!-- 1. 引入 jQuery 核心库 (jQuery UI 依赖 jQuery) -->
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<!-- 2. 引入您选择的 jQuery UI CSS (这里以 "Base" 主题为例) -->
<link rel="stylesheet" href="https://code.jquery.com/ui/1.13.2/themes/base/jquery-ui.css">
<!-- 3. 引入您选择的 jQuery UI JS -->
<script src="https://code.jquery.com/ui/1.13.2/jquery-ui.js"></script>
<!-- 4. 您的 HTML 代码 -->
<div id="accordion">
  <h3>部分 1</h3>
  <div>内容部分 1</div>
  <h3>部分 2</h3>
  <div>内容部分 2</div>
</div>
<!-- 5. 初始化 jQuery UI 组件的 JavaScript 代码 -->
<script>
$( "#accordion" ).accordion();
</script>

优点：

  • 无需下载,直接使用。
  • 利用 CDN 的缓存和加速，访问速度快。
  • 版本更新方便,只需修改链接中的版本号即可。

缺点：

  • 无法离线使用。
  • 无法自定义主题样式（除非使用 ThemeRoller 生成自定义 CSS 并托管在自己的服务器上）。

总结与对比

方法 优点 缺点 适用场景
ThemeRoller 下载 完全自定义样式和组件。
文件体积可控，性能优化好。
可离线使用。		 需要手动下载和部署文件。
更新主题需要重新下载。		 对网站性能有严格要求的项目。
需要特定视觉风格的品牌项目。
内网或离线环境开发。
CDN 引入 简单快捷，无需任何文件操作。
利用 CDN 加速，访问速度快。
版本管理方便。		 无法自定义样式。
依赖网络，无法离线使用。
对第三方 CDN 有依赖。		 快速原型开发。
个人项目或小型网站。
对性能要求不是极致的场景。

最终建议：

  • 对于绝大多数开发者：强烈推荐使用 jQuery UI ThemeRoller 来创建和下载您专属的“模板”，这是最专业、最灵活的方式。
  • 对于初学者或快速测试：使用 CDN 是最快上手的方式，可以帮助您快速理解 jQuery UI 的功能。

希望这份指南能帮助您顺利获取并开始使用 jQuery UI！