• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    公众号

jQuery UI 小部件方法调用

原作者: [db:作者] 来自: [db:来源] 收藏 邀请

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

本节介绍了jQuery UI小部件(Widget)方法调用的两种方式。

小部件(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对象。


鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
上一篇:
jQuery UI 为什么使用部件库发布时间:2022-01-28
下一篇:
jQuery UI 通过部件库扩展小部件发布时间:2022-01-28
热门推荐
热门话题
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap