jQuery UI 小部件（Widget）方法调用

jQuery UI 小部件（Widget）方法调用指南

jQuery UI 的所有小部件（如 Datepicker、Tabs、Dialog、Accordion、Slider 等）都基于Widget Factory构建，因此它们拥有完全统一的 API 模式。学会一种小部件的方法调用方式，就基本掌握了所有小部件。

统一调用模式

$("#element").widgetName("action",[parameters]);

• widgetName：小部件名称（如datepicker、tabs、dialog）。
• "action"：要执行的操作（字符串）。
  • "option"：获取或设置选项。
  • 其他自定义方法（如"open"、"close"、"value"、"destroy"等）。
  • 如果不传 action，默认是初始化。

常见方法调用分类及示例

1. 初始化小部件

   $("#datepicker").datepicker();// 基本初始化$("#datepicker").datepicker({// 带选项初始化dateFormat:"yy-mm-dd",changeYear:true});

2. 调用自定义方法（最常用）
   每个小部件都有自己的专属方法。

   小部件	常见方法	示例代码
   Datepicker	open/close/setDate/getDate	$("#datepicker").datepicker("open");
   Dialog	open/close/isOpen	$("#dialog").dialog("open");
   Tabs	load/select（旧版） /option	$("#tabs").tabs("option", "active", 2);
   Accordion	activate	$("#accordion").accordion("activate", 1);
   Slider	value	$("#slider").slider("value", 50);
   Progressbar	value	$("#progressbar").progressbar("value", 75);
   Autocomplete	search/close	$("#input").autocomplete("search", "abc");

3. 获取/设置选项（通用方法）
   所有小部件都支持"option"方法。

   // 获取单个选项值varcurrentValue=$("#slider").slider("option","value");// 设置单个选项$("#slider").slider("option","value",80);// 设置多个选项（对象形式）$("#datepicker").datepicker("option",{dateFormat:"dd/mm/yy",changeMonth:true});// 动态改变禁用状态$("#dialog").dialog("option","disabled",true);

4. 销毁小部件（恢复原 DOM）

   $("#datepicker").datepicker("destroy");// 移除所有添加的类、事件、DOM 修改

5. 启用 / 禁用小部件
   大多数小部件支持enable和disable方法。

   $("#button").button("disable");$("#button").button("enable");

完整示例：Dialog 小部件的常见方法调用

<divid="myDialog"title="提示">这是一个对话框。</div><buttonid="openBtn">打开</button><buttonid="closeBtn">关闭</button><script>$(function(){// 初始化$("#myDialog").dialog({autoOpen:false,// 不自动打开modal:true,buttons:{"确定":function(){$(this).dialog("close");}}});// 打开$("#openBtn").click(function(){$("#myDialog").dialog("open");});// 关闭$("#closeBtn").click(function(){$("#myDialog").dialog("close");});// 检查是否打开if($("#myDialog").dialog("instance")&&$("#myDialog").dialog("option","modal")){console.log("当前是模态对话框");}// 动态修改标题$("#myDialog").dialog("option","title","新标题");// 销毁（彻底移除小部件）// $("#myDialog").dialog("destroy");});</script>

如何查看某个小部件支持的方法？

• 官方 API 文档：https://api.jqueryui.com/
  • Datepicker：https://api.jqueryui.com/datepicker/
  • Dialog：https://api.jqueryui.com/dialog/
  • Tabs：https://api.jqueryui.com/tabs/
• 每个文档页面都会列出：
  • Methods：所有可调用的方法（如open、close、option、destroy）。
  • Events：可绑定的事件（如create、change、select）。

小贴士

• 方法调用必须在小部件初始化之后进行。
• 如果元素上尚未初始化小部件，直接调用方法会自动初始化（但不推荐）。
• 使用$("#elem").data("ui-widgetName")可以访问内部实例（高级用法）。

掌握了这个统一的调用模式，你就可以轻松操作 jQuery UI 的所有小部件了！

如果您想了解某个具体小部件（如 Autocomplete、Menu、Spinner）的所有方法列表和示例，请告诉我，我可以提供详细说明！