jQuery UI 通过 Widget Factory 扩展小部件
Widget Factory（$.widget）提供了强大的继承机制，让开发者可以轻松扩展现有 jQuery UI 小部件，或基于一个部件创建全新的变体。这正是 jQuery UI 官方许多小部件（如 Menu 是 Button 的扩展，Autocomplete 是 Menu 的扩展）实现方式的核心。
扩展基本语法
$.widget("custom.newWidgetName",$.existingNamespace.existingWidget,{// 新选项、方法、重写父类方法});custom.newWidgetName：新部件的全名（命名空间 + 部件名）。$.existingNamespace.existingWidget：要继承的父部件（例如$.ui.dialog）。- 第三个对象：定义新选项、重写父类方法、添加新方法。
关键方法：
this._super()：调用父类同名方法。this._superApply(arguments)：带参数调用父类方法。
示例 1：简单扩展 Dialog（添加标题图标和自定义按钮）
$.widget("custom.iconDialog",$.ui.dialog,{// 新增默认选项options:{iconClass:"ui-icon-info",// 默认信息图标extraButton:null// 额外按钮配置 { text: "帮助", click: function }},// 重写 _create 方法，在标题栏添加图标_create:function(){// 先调用父类的 _createthis._super();// 在标题栏前添加图标if(this.options.iconClass){varicon=$("<span>").addClass("ui-dialog-title-icon "+this.options.iconClass).prependTo(this.uiDialogTitlebar);}// 添加额外按钮if(this.options.extraButton){varbuttons=this.options.buttons||{};buttons[this.options.extraButton.text]=this.options.extraButton.click;this.options.buttons=buttons;this._setOption("buttons",buttons);// 触发按钮更新}},// 可选：重写 open 方法，打开时添加动画效果open:function(){this._super();// 调用父类 openthis.element.effect("bounce",{times:3},300);// 额外弹跳效果}});使用方式：
<divid="myDialog"title="重要提示">这是一个带图标的对话框。</div><script>$(function(){$("#myDialog").customIconDialog({iconClass:"ui-icon-alert",modal:true,extraButton:{text:"帮助",click:function(){alert("帮助内容");}}});// 打开对话框$("#myDialog").customIconDialog("open");});</script>示例 2：扩展 Tabs（添加“关闭”按钮到每个标签）
$.widget("custom.closableTabs",$.ui.tabs,{options:{closable:true},_create:function(){this._super();if(this.options.closable){this._addCloseButtons();}},// 在每个标签后添加关闭图标_addCloseButtons:function(){this.tablist.find("li").each(function(){var$tab=$(this);if(!$tab.find(".ui-tabs-close").length){$("<span>").addClass("ui-tabs-close ui-icon ui-icon-close").appendTo($tab).on("click",function(e){e.stopPropagation();varpanelId=$tab.find("a").attr("href");varindex=$("li",$tab.parent()).index($tab);$tab.closest(".ui-tabs").customClosableTabs("remove",index);});}});},// 重写 refresh 方法，确保新添加的标签也有关闭按钮refresh:function(){this._super();this._addCloseButtons();},// 可选：自定义 remove 方法，触发关闭事件remove:function(index){varpanelId=this.tabs.eq(index).attr("aria-controls");vareventData={panel:this.panels.eq(index)};if(this._trigger("beforeClose",null,eventData)===false){return;}this._super(index);this._trigger("close",null,eventData);}});使用方式：
<divid="tabs"><ul><li><ahref="#tab1">标签1</a></li><li><ahref="#tab2">标签2</a></li></ul><divid="tab1">内容1</div><divid="tab2">内容2</div></div><script>$("#tabs").customClosableTabs({closable:true,beforeClose:function(event,ui){returnconfirm("确定关闭此标签页？");}});</script>示例 3：基于 Button 创建带加载状态的按钮
$.widget("custom.loadingButton",$.ui.button,{options:{loadingText:"加载中..."},// 添加 loading 方法loading:function(state){if(state){this.originalText=this.element.text();this.element.text(this.options.loadingText);this.options.disabled=true;this._super("option","disabled",true);}else{if(this.originalText){this.element.text(this.originalText);}this.options.disabled=false;this._super("option","disabled",false);}}});总结优势
- 代码复用：继承父部件的大部分功能，只修改需要的部分。
- 保持兼容：新部件仍支持所有父部件的选项、方法、事件。
- 一致性：自动继承 CSS 类、主题支持、状态管理等。
- 链式继承：可以多层继承（如 A → B → C）。
通过 Widget Factory 的继承机制，你可以轻松创建功能更丰富、符合项目需求的自定义小部件，同时保持 jQuery UI 的统一风格和行为。
如果您有具体需求（如扩展 Datepicker 添加节假日高亮，或扩展 Autocomplete 支持异步加载），告诉我，我可以提供完整代码示例！