jQuery UI 小部件(Widget)方法调用

jQuery UI 教程 · 2019-04-04 15:19:01

小部件(Widget)是通过 部件库(Widget Factory) 使用方法来改变他们初始化后的状态和执行动作而被创建的。有两种调用小部件方法的方式 - 通过部件库(Widget Factory)创建的插件,或者通过调用元素实例对象上的方法。

插件调用

使用小部件的插件调用方法,把方法名称以字符串形式进行传递。例如,点击这里查看,如何调用 dialog(对话框)小部件的 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() 返回的是一个布尔值,而不是一个 jQuery 对象。

点击查看所有 jQuery UI 教程 文章: https://www.codercto.com/courses/l/41.html

查看所有标签

创业36条军规

创业36条军规

孙陶然 / 中信出版社 / 2011-12 / 39.00元

《创业36军规》的作者孙陶然是一位数次成功创业的创业者,书中的内容有关创业的方方面面,从创业目的到股东选择,从经营到管理,从找方向到项目细节不一而足,写给每位心怀创业理想或正在创业路上的读者。 很多教人成才的书,作者未必成才;很多教人炒股的书,作者并不炒股;很多教人创业的书,作者不曾成功创业。一起来看看 《创业36条军规》 这本书的介绍吧!

图片转BASE64编码
图片转BASE64编码

在线图片转Base64编码工具

MD5 加密
MD5 加密

MD5 加密工具

html转js在线工具
html转js在线工具

html转js在线工具