1. 简介
jQuery UI是jQuery UI库的一个完整的集合，包括交互，小部件，特效和主题的所有内容。jQuery UI的默认主题是smoothness，但是如果您想自定义主题以匹配您的项目设计，则可以使用jQuery UI提供的主题框架轻松地创建自定义主题。
2. 创建自定义主题
2.1 文件夹结构
创建自定义主题前，必须先选择一个框架。可以从jQuery UI官网下载各种框架，但是我们将在此使用jquery-ui-1.12.1.custom.zip框架进行说明。该下载包中包含一个名为theme的文件夹，此文件夹是创建自定义主题时需要用到的所有文件夹和文件。
下面是一个theme文件夹的结构示例：
theme/
|--jquery-ui-1.12.1.custom.css
|--images/
|----accordion.png
|----...
|--jquery-ui.theme.css
2.2 修改主题文件
接下来，打开jquery-ui-1.12.1.custom.css文件，这是用于自定义主题的主CSS文件。要创建自定义主题，请按照下列步骤修改此文件：
在文件顶部，设置主题名称：
/*
* jQuery UI CSS Framework
*
...
* Theme: My Theme
*/
一般情况下，第二个步骤是添加新CSS规则，或者修改默认规则。 在此示例中，我们将css框架的主颜色从蓝色改为红色：
.ui-widget-content {
background: #ffe585/*{bgColorContent}*/ url(images/ui-bg_inset-hard_100_ffeb80_1x100.png)/*{bgImgUrlContent}*/ 50%/*{bgContentXPos}*/ 55%/*{bgContentYPos}*/ repeat-x/*{bgContentRepeat}*/;
border: 1px solid #ebd211/*{borderColorContent}*/;
color: #4f3400/*{fcContent}*/;
}
.ui-widget-header {
background: #86b700/*{bgColorHeader}*/ url(images/ui-bg_highlight-hard_100_57bcf5_1x100.png)/*{bgImgUrlHeader}*/ 50%/*{bgHeaderXPos}*/ 50%/*{bgHeaderYPos}*/ repeat-x/*{bgHeaderRepeat}*/;
border: 1px solid #7ebf00/*{borderColorHeader}*/;
color: #ffffff/*{fcHeader}*/;
font-weight: bold;
}
验证主题的结果只需要在任何HTML页面中使用jquery-ui-1.12.1.custom.css替换jQuery UI的默认CSS文件即可。
2.3 使用主题
该主题是在调用jQuery UI小部件时自动应用的。要使用jQuery UI小部件，必须先包含jQuery库和jQuery UI库，以及主题文件。 对于我们的示例主题，应包括以下文件：
<link rel="stylesheet" type="text/css" href="jquery-ui-1.12.1.custom.css">
<script src="jquery-3.3.1.min.js"></script>
<script src="jquery-ui-1.12.1.min.js"></script>
要使用一项小部件，只需在HTML中创建一个由jQuery UI自动转换为小部件的标记即可。您还可以指定各种特性和事件。以下是使用button小部件：
<button id="btn">Click me!</button>
<script>
$(document).ready(function(){
$("#btn").button();
});
</script>
在这个例子中，创建一个普通的HTML button元素，并将其变成由jQuery UI自动转换的button小部件。按钮的外观由主题定义。
3. 其他主题框架
jQuery UI中提供了不同类型的主题。在jqueryui.com网站上下载包含各种主题的预编译包（或者自定义主题）。这里是几个示例：
Dot Luv: 深蓝色和黄色配色，布局紧凑，标签和UI元素使用纯文本或者边框
Black Tie: 黑色和银色配色，菜单使用渐变颜色并使用较大的文本，标签使用较小的图标
Cupertino: 向苹果Mac OS X样式设计的主题，非常适合使用彩色图标和蓝色颜色
3.1 使用jQuery UI主题扩展
要使用jQuery UI主题扩展，请下载jquery-ui-themeroller扩展，并按照以下步骤操作：
将下载的js和css文件与jQuery UI文件一起引用，注意：这里需要按照指定的顺序引入文件，如下所示：
<link rel="stylesheet" type="text/css" href="jquery-ui.css">
<link rel="stylesheet" type="text/css" href="jquery-ui.theme.css">
<link rel="stylesheet" type="text/css" href="jquery-ui.structure.css">
<link rel="stylesheet" type="text/css" href="path/to/themeroller.css">
<script src="jquery.js"></script>
<script src="jquery-ui.js"></script>
<script src="path/to/themeroller.js"></script>
使用$.extend()方法合并新主题和现有主题。 下面的示例代码将Home主题合并到当前主题中：
$(function() {
$.extend($.ui.theme, {
/* Home
* Base Class: ui-
* Element Color: #f5f2ec
* Heading/Legends: #16f1bc
* Body Text: #000
* Alternate Text: #f00
*/
backgroundColor: "#f5f2ec",
headerColor: "#16f1bc",
textColor: "#000",
alternateTextColor: "#f00"
});
});
其他的主题设计可以左右复制粘贴，将现有的主题名称修改即可。
4. 总结
本文介绍了如何创建自定义jQuery UI主题。通过修改CSS文件，我们可以创建自己的主题并将其与jQuery UI小部件一起使用。本文还介绍了其他主题框架，以及如何使用jQuery UI主题扩展，根据不同的需求选择相应的主题模板，可以使界面显得更加美观、个性化。