---

jQuery UI 是一个非常流行的 JavaScript 库，通过这个库提供了很多的小部件（Widget）来帮助编程人员快速地开发出富交互的 Web 应用程序。本文将带领大家了解如何调用 jQuery UI 小部件方法，让程序开发更简单、更便捷。

首先，我们需要安装 jQuery UI 库，在官网下载相应的 JavaScript 和 CSS 文件，然后引入我们需要使用的小部件的 JavaScript 文件。

以弹出框（Dialog）小部件为例，调用方法如下：

1. 创建一个空的 div 容器，用于存放弹出框的内容：

<div id="dialog" title="对话框">
  <p>这是一个对话框！</p>
</div>

2. 调用弹出框方法：

$(function() {
  $("#dialog").dialog();
});

其中，$(function() {}) 是为了确保所有的 HTML 加载完毕后再执行弹出框方法。

以上的方法只是一个很简单的弹出框的使用方法，jQuery UI 提供了许多小部件，并且每个小部件都有其自身的初始化和方法调用方式，比如：

• 拖动控件（Draggable）：

$(function() {
  $("#draggable").draggable();
});

• 滑块控件（Slider）：

$(function() {
  $("#slider").slider();
});

• 日期选择控件（Datepicker）：

$(function() {
  $("#datepicker").datepicker();
});

• 标签页控件（Tabs）：

$(function() {
  $("#tabs").tabs();
});

等等。

每个小部件都有自己的选项，可以通过传递参数进行自定义设置。比如，弹出框小部件（Dialog）可以通过传递参数设置弹出框的大小、位置、动画、按钮等等：

$(function() {
  $("#dialog").dialog({
    width: 600,
    height: 300,
    position: { my: "center", at: "center", of: window },
    show: { effect: "slide", duration: 1000 },
    buttons: {
      "确定": function() {
        $(this).dialog("close");
      },
      "取消": function() {
        $(this).dialog("close");
      }
    }
  });
});

以上代码设置了弹出框的宽度和高度、居中显示、出现动画、以及确认和取消按钮。

除了初始化时的参数设置，我们还可以在后期动态地修改小部件的属性或者调用其方法。比如，修改弹出框的标题：

$("#dialog").dialog("option", "title", "新的标题");

比如，关闭弹出框：

$("#dialog").dialog("close");

通过以上的方式，我们可以很简单地使用 jQuery UI 提供的小部件，实现诸如弹出框、拖动控件、标签页等等丰富的交互功能，将 Web 应用程序的用户体验提升到一个全新的水平。