什么是 jquery.ui.widget?
jquery.ui.widget 是一个 jquery UI 层级结构中的最基础的 widget，它包括了很多开发者经常需要的功能，比如，创建一个 widget 实例，销毁一个 widget 实例等等。因此 jquery.ui.widget 被广泛运用在 jquery UI 中。
安装 jquery.ui.widget
你可以通过使用 npm 或 bower 来安装 jquery.ui.widget。
npm install jquery.ui.widget
bower install jquery.ui.widget
使用 jquery.ui.widget
首先，在你的项目中引入 jquery 和 jquery.ui.widget 文件。
<script src="jquery.js"></script> <script src="jquery.ui.widget.js"></script>
接着，你需要通过 jQuery.fn.extend 来创建一个 widget。
-- -------------------- ---- -------
------------------------- -
-------- -
------- -------- ----- ---
------- -------- ----- --
--
-------- ---------- -
-- --- ------ --------
--
--------- ---------- -
-- --- ------ --------
--
----------- --------- ---- ----- - -
-- --- ------ ----------
--
------------ --------- ------- - -
-- --- ------ ------------
-
---创建了一个 widget 之后，你可以对其进行参数设置：
$("#widgetNameId").widgetName({
param1: "value 1",
param2: "value 2"
});通过 _create 方法，你可以在 widget 创建时执行相应的代码：
_create: function() {
// 这里是 widget 创建时执行的代码
}通过 _destroy 方法，你可以在 widget 销毁时执行相应的代码：
_destroy: function() {
// 这里是 widget 销毁时执行的代码
}通过 _setOption 方法，你可以在 widget 参数变化时执行相应的代码：
_setOption: function( key, value ) {
// 这里是 widget 参数变化时执行的代码
}通过 _setOptions 方法，你可以在 widget 参数变化时批量执行相应的代码：
_setOptions: function( options ) {
// 这里是 widget 参数变化时批量执行的代码
}示例代码
下面是一个使用 jquery.ui.widget 的简单示例代码：
-- -------------------- ---- -------
--------- -----
------
------
----------------------- ------------
------- -------------------------
------- -----------------------------------
-------
------
---- ------------------
--------
------------------------- -
-------- -
------ ------- -------
--
-------- ---------- -
------------------------- - - --------------------
--
----------- --------- ---- ----- - -
-- - --- --- ------- - -
------------------------- - - -------
-
------------ ---- ----- --
-
---
------------ -
-------------------------
------ ------- --------
---
--------------------------------- -------- ---- ---------
---
---------
-------
-------运行代码，你会在页面上看到 Value: New value! 这个结果。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/77890