首先，确保你已经包含了 jQuery 和 jQuery UI 的库。你可以在头部添加如下代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Widget Factory Example</title>
<!-- 引入 jQuery 和 jQuery UI 的库 -->
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-3.6.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
</head>
<body>
<!-- 创建一个 div 作为按钮容器 -->
<div id="myButton">点击我</div>
<script>
// 使用 Widget Factory 创建一个简单的按钮部件
$.widget("custom.myButton", {
// 默认选项
options: {
backgroundColor: "red"
},
// 部件的初始化方法
_create: function() {
this.element
.text("这是一个自定义按钮")
.css("cursor", "pointer")
.on("click", this._clickHandler.bind(this));
this._refresh();
},
// 在选项改变时调用的方法
_refresh: function() {
this.element.css("background-color", this.options.backgroundColor);
},
// 点击事件处理程序
_clickHandler: function(event) {
alert("按钮被点击了！");
},
// 设置选项的方法
_setOption: function(key, value) {
if (key === "backgroundColor") {
this.options.backgroundColor = value;
this._refresh();
}
this._super(key, value);
},
// 销毁部件的方法
_destroy: function() {
this.element
.off("click")
.text("销毁按钮");
}
});
// 初始化部件
$("#myButton").myButton({
backgroundColor: "green"
});
</script>
</body>
</html>
在这个例子中，我们使用 $.widget("custom.myButton", {...}); 创建了一个名为 "myButton" 的自定义按钮部件。部件定义了一些方法，包括 _create（初始化部件）、_refresh（在选项改变时刷新部件）、_clickHandler（点击事件处理程序）、_setOption（设置选项时调用）和 _destroy（销毁部件）等。
通过 $("#myButton").myButton({...}); 初始化了这个自定义按钮部件，并设置了初始的背景颜色为绿色。点击按钮时，将触发 _clickHandler 方法，弹出一个提示框。
Widget Factory 提供了一种灵活的方式来创建和管理可复用的用户界面部件。你可以根据实际需求扩展和定制部件的行为。
转载请注明出处：http://www.pingtaimeng.com/article/detail/13082/jQuery UI