jQuery UI 위젯 메소드 호출

위젯은 초기화된 상태를 변경하고 작업을 수행하는 메서드를 사용하여 위젯 팩토리를 통해 생성됩니다. 위젯 메소드를 호출하는 방법에는 Widget Factory에서 생성된 플러그인을 통하거나 요소 인스턴스 객체에 대한 메소드를 호출하는 두 가지 방법이 있습니다.

플러그인 호출

위젯의 플러그인 호출 메소드를 사용하고 메소드 이름을 문자열 형식으로 전달합니다. 예를 들어, 대화 상자 위젯의 close() 메서드를 호출하는 방법을 보려면 여기를 클릭하세요. close() 方法。

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

如果方法要求参数 ，请作为额外的参数传递给插件。点击这里查看，如何调用 dialog（对话框）的 option() 方法。

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

这会返回 dialog（对话框）的 height 选项 的值。

实例调用

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

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

在您引用实例对象之后，可以直接在上面调用方法。

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

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

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

返回类型

大多数通过小部件的插件调用的方法将返回一个 jQuery 对象，所以方法调用可以通过额外的 jQuery 方法链接。当在实例上进行调用时，则会返回 undefined。具体如下面实例所示。

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" );

例外的是，返回小部件相关信息的那些方法。例如 dialog（对话框）的 isOpen() 方法。

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

这会产生一个 TypeError 错误，因为 isOpen()rrreee