发布在：jQuery UI > 小部件工厂

小部件方法调用

使用小部件工厂创建的小部件使用各种方法来改变其状态并在初始化后执行操作。有两种方法可以调用小部件方法 - 通过小部件工厂创建的插件，或通过在元素的实例对象上调用该方法。

link 插件调用

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

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

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

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

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

link 实例调用

在幕后，每个小部件的每个实例都使用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 对象。