jQuery UI ウィジェットのメソッド呼び出し

ウィジェットは、初期化された状態を変更し、アクションを実行するメソッドを使用して、ウィジェット ファクトリを通じて作成されます。ウィジェット メソッドを呼び出すには 2 つの方法があります。ウィジェット ファクトリによって作成されたプラグインを使用する方法と、要素インスタンス オブジェクトのメソッドを呼び出す方法です。

プラグイン呼び出し

ウィジェットのプラグイン呼び出しメソッドを使用し、メソッド名を文字列の形式で渡します。たとえば、ダイアログ ウィジェットの 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