jQuery UI 是一个经典的前端 UI 库，它是由 jQuery 团队开发的一个 UI 组件集合。其中的组件样式是基于皮肤轮廓模型 (ThemeRoller) 开发的，可以方便地定制和风格化。
这篇文章主要介绍使用 npm 包管理器和 jQuery UI 的一款皮肤定制工具 jquery-ui-themeroller，来自定义新的主题并引入到项目中去的详细教程。在此过程中，我们可以深入地了解 jQuery UI 主题的原理，并学习如何开发并且使用自定义的主题。
安装
首先，我们需要在项目中安装 jQuery UI：
npm install jquery-ui --save
接着，我们需要安装 jquery-ui-themeroller:
npm install jquery-ui-themeroller --save-dev
使用
在安装完成后，我们可以使用 jquery-ui-themeroller 生成我们的自定义主题。
生成主题
执行以下命令来生成一个主题：
npx theme-roller
执行该命令之后，将弹出皮肤轮廓定制工具的 GUI 界面，我们可以在该界面中修改主题的样式属性，例如修改背景颜色、边框颜色等，还可以选择和预览不同的组件效果，来生成我们需要的主题。
下载主题
完成主题编辑后，可以点击 "Download" 按钮来下载该主题的 CSS 文件以及图片资源。将它们保存到项目中的相应文件夹中。
引入主题
最后，我们可以使用 jQuery UI 的主题机制来引用自定义主题：
-- -------------------- ---- -------
----- ---------------- --------------------------------
--------
------------ -
---------------------------- ---------------------
------- -------
------- --
-------- -
---
---------------------------------------------------------
------------------------ ------------------
---------------------------
------------ -----
------------ ---------
---
--------------------- ------------------ ------------------ ------------------ -
------------------ ------------------ ------------------ -----------------------------
-- ------- ---------
---
---------由于我们现在使用的是自定义主题，所以所有的 jQuery UI 组件都会应用该主题的样式。
示例
下面是一个使用自定义主题的示例代码：
-- -------------------- ---- -------
--------- -----
----- ----------
------
----- ----------------
------------- -- ------- ------------
----- ---------------- -------------------------------------------------------------------
----- ---------------- --------------------------------
------- --------------------------------------------------------
------- --------------------------------------------------------------
-------
------
---- ----------
----
------ ------------------ ----------
------ ------------------ ----------
-----
---- ------------
----------- ------
------- -- --- ----- -------
------
---- ------------
----------- ------
------- -- --- ------ -------
------
------
--------
------------ -
---------------------------- ---------------------
------- -------
------- --
-------- -
---
---------------------------------------------------------
------------------------ ------------------
---------------------------
------------ -----
------------ ---------
---
--------------------- ------------------ ------------------ ------------------ -
------------------ ------------------ ------------------ -----------------------------
-- ------- ---------
---
---------
-------
-------可以看出，我们使用 jQuery UI 自带的 tabs 组件，并且使用了自定义主题的样式。
结语
在这篇文章中，我们通过使用 npm 包管理器和 jQuery UI 的皮肤定制工具 jquery-ui-themeroller，完成了自定义主题的开发和引用，并且实现了一个使用自定义主题的示例。
通过这个过程，我们深入了解了 jQuery UI 主题的原理，掌握了如何开发和使用自定义主题的技能，这对于我们在实际项目中的前端开发工作非常有指导意义。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/77691