发布于: jQuery UI > Widget Factory

小部件方法调用

使用 小部件工厂（widget factory） 创建的小部件，在初始化后使用方法来更改其状态和执行操作。有两种调用小部件方法的方式——通过小部件工厂创建的插件调用，或者通过调用元素实例对象上的方法。

链接 插件调用

要使用小部件插件调用方法，请将方法名称作为字符串传递。例如，以下是如何调用 对话框小部件的 close() 方法。

1
 
$( ".selector" ).dialog( "close" );

如果该方法需要参数，请将它们作为附加参数传递给插件。以下是如何调用 对话框的 option() 方法。

1
 
$( ".selector" ).dialog( "option", "height" );

这将返回 对话框的 height 选项 的值。

链接 实例调用

在底层，每个小部件的每个实例都使用 jQuery.data() 存储在元素上。要检索实例对象，请使用小部件的全名作为键调用 jQuery.data()。如下所示。

1
 
var dialog = $( ".selector" ).data( "ui-dialog" );

在获得对实例对象的引用后，可以直接在上面调用方法。

1
2
 
var dialog = $( ".selector" ).data( "ui-dialog" );
dialog.close();

在 jQuery UI 1.11 中，新的 instance() 方法将使这个过程变得更加简单。

1
 
$( ".selector" ).dialog( "instance" ).close();

链接 返回类型

通过小部件插件调用的大多数方法将返回一个 jQuery 对象，以便方法调用可以与其他 jQuery 方法链式调用。即使是在实例上调用时返回 undefined 的方法也是如此。如下面的示例所示。

1
2
3
4
5
6
7
8
9
10
11
12
 
var dialog = $( ".selector" ).dialog();
 
// Instance invocation - returns undefined
dialog.data( "ui-dialog" ).close();
 
// Plugin invocation - returns a jQuery object
dialog.dialog( "close" );
 
// Therefore, plugin method invocation makes it possible to
// chain method calls with other jQuery functions
dialog.dialog( "close" )
    .css( "color", "red" );

例外情况是返回小部件相关信息的方法。例如 对话框的 isOpen() 方法。

1
2
3
4
 
$( ".selector" )
    .dialog( "isOpen" )
    // This will throw a TypeError
    .css( "color", "red" );

这会产生一个 TypeError 错误，因为 isOpen() 返回的是布尔值，而不是 jQuery 对象。