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" 方法。

   // 获取单个选项值
   var currentValue = $("#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 小部件的常见方法调用

<div id="myDialog" title="提示">这是一个对话框。</div>
<button id="openBtn">打开</button>
<button id="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）的所有方法列表和示例，请告诉我，我可以提供详细说明！