×
jQuery UI 教程jQuery UI 简介jQuery UI 下载jQuery UI 使用jQuery UI 定制jQuery UI 工作原理

jQuery UI 主题

jQuery UI 主题jQuery UI ThemeRollerjQuery UI CSS 框架 APIjQuery UI 设计主题

jQuery UI 部件库

jQuery UI 部件库jQuery UI 扩展小部件jQuery UI 小部件方法调用jQuery UI 为何使用部件库jQuery UI 如何使用部件库

jQuery UI 参考手册

jQuery UI API 文档API 类别 – 特效API 类别 – 特效核心API 类别 – 交互API 类别 – 方法重载API 类别 – 方法API 类别 – 选择器API 类别 – 主题API 类别 – UI 核心API 类别 – 实用工具API 类别 – 小部件

jQuery UI 实例

jQuery UI 实例拖动(Draggable)放置(Droppable)缩放(Resizable)选择(Selectable)排序(Sortable)折叠面板(Accordion)自动完成(Autocomplete)按钮(Button)日期选择器(Datepicker)对话框(Dialog)菜单(Menu)进度条(Progressbar)滑块(Slider)旋转器(Spinner)标签页(Tabs)工具提示框(Tooltip)特效(Effect)显示(Show)隐藏(Hide)切换(Toggle)添加 .addClass()移除 .removeClass()切换 .toggleClass()转换 .switchClass()颜色动画(Color Animation)定位(Position)部件库(Widget Factory)

jQuery UI 小部件方法调用


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


分类导航

关注微信下载离线手册

bootwiki移动版 bootwiki
(群号:472910771)