介绍
jQuery UI 是一个 jQuery 的用户界面库，包含大量的交互式组件和工具。而 jquery-ui-pyritephp 则是 jQuery UI 的一个衍生版本，它旨在为开发人员提供更好的 jQuery UI 组件。同时，它也是一个 npm 包，可以通过 npm 来进行安装和使用。
安装
要安装 jquery-ui-pyritephp，您需要使用 npm 命令行工具。打开终端并输入以下命令：
npm install jquery-ui-pyritephp
使用
要使用 jquery-ui-pyritephp，您需要将该库添加到您的项目中，并按照 jQuery UI 的方式来调用其组件。以下是用 jquery-ui-pyritephp 实现一个拖放框的示例代码：
-- -------------------- ---- ------- --------- ----- ------ ------ --------------------------- ------------ ------ ---------------- ------------------------------------------------------------------- -------- -------------------------------------------------------- -------- -------------------------------------------------------------- -------- ---------------------------------------------------------------------------------- -------- ----------- - -------- ------ --------- ------ ------------------- -------- -------- -------- ------------- ------- -------------- ------ -- --------- ------- ------ ----- -------------- -------------------------- ------ -- ------- --------- ------------- - ------------------------------ ---- ---------- ------- -------
您可以在以上代码中，看到：使用了 jquery-ui-pyritephp 的时候，需要将其自身的 JS 文件通过 script 标签引入；同时，在调用组件时，需要按照原本的方式，使用 jQuery 提供的 API 调用你需要的组件。
注册自定义样式
如果您想要更改某个 jQuery UI 组件的样式，或者添加一个自定义的样式，可以通过先继承原先的样式，再添加自定义信息的方式来完成。以下是一个自定义拖放框样式的示例代码：
在 HTML 中：
<div id="custom-draggable" class="ui-widget-content">
Drag me
</div>在 CSS 中：
-- -------------------- ---- -------
----------------- - -- ------- --
----------------- --------
------ --------
-
---------------- - -- ----- --
---------- -----
------------ -----
----------- -------
-在 JavaScript 中：
$(function() {
$("#custom-draggable").draggable();
$("#custom-draggable").find(".ui-widget-header").addClass("custom-unstyled"); // 操作添加自定义的样式
});结尾
借助 jQuery UI，能够方便的实现各种常见组件，而 jquery-ui-pyritephp 更是衍生了更为优秀的组件库。希望以上给出的使用方式能够帮助到您。
参考
本文中的相关代码参考自 jQuery UI 官方文档。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055ab881e8991b448d8532