jQuery 入门教程(20): jQuery UI 基本工作过程
2013-03-19 07:03
302 查看
本篇介绍JQuery UI组件的基本工作过程,以进程条(Progressbar)为例介绍JQuery UI组件工作的基本过程。
这个方法初始化id=elem的元素,因为我们调用progressbar没有带参数,因此将使用缺省属性来初始化进程条。我们可以通过传入配置的方法为jQuery UI组件修改缺省值。比如:
也可以一次传入多个参数来初始化jQuery UI组件,其它没有配置的属性还是使用其缺省值。这些属性也属于jQuery UI组件状态的一部分。初始化之后,如果需要修改这些属性,可以通过option方法来改变。
如果这个方法可以有参数,直接在方法名之后传入参数,比如,设置value值为40
和前面介绍的jQuery 方法链一样,jQuery UI的方法也支持多个方法串接在一起,比如:
option方法
正如前面说的,在UI组件初始化之后,如果需要修改一些属性值,可以通过option方法,比如,修改progressbar的value值,
注意这和前面调用value方法不同,这个例子是想修改配置项value为30.
如果需要取得某个配置项的值,则使用不带参数的调用:如:
除此之外,如果需要一次修改多个配置项,可以通过传入对象的方法,如:
diable方法
这个方法disable某个UI组件,比如:
这个方法disable进程条,并修改其Style使其看起来无效。这个方法等同于设置的disable属性为true.enable方法
enable UI 组件,比如:
这个方法等同于设置disable属性为false.destroy方法
如果你不在需要某个UI组件,可以调用destroy()方法,这将使的对应的HTML元素恢复原状(没有使用jQuery之前的标记显示)。这也终结jQuery UI的生命周期。一旦你终止UI组件,你就不能再调用UI组件的方法。如果你删除该HTML元素,jQuery自动终止。widget方法某些UI组件创建一个wrapper元素或者和原先元素无关联的新元素。在这种情况下,widget方法返回生成的新元素。对于Progressbar来说,没有生成的HTML元素,这个方法返回原先的HTML元素。
每个事件都有对应的回调函数,是作为一个配置项来定义的,因此我们可以直接挂到Progressbar的change回调函数而不要绑定到Progressbarchange事件,比如:
初始化
大部分JQuery Ui组件都可以保持其状态,因此为了能够跟踪UI组件的状态,jQuery UI组件也有一个生命周期,这个生命周期从初始化开始,为了初始化一个UI组件,一般在某个HTML元素调用UI组件(插件)方法。,比如1 | $( "#elem" ).progressbar(); |
1 | $( "#elem" ).progressbar({ value: 20 }); |
方法
初始化jQuery UI组件之后,我们可以查询UI组件的状态属性,每个初始化过的UI组件都可以调用其方法,调用方法是通过传入方法名称,比如, 调用进程条的value方法如下:1 | $( "#elem" ).progressbar( "value" ); |
1 | $( "#elem" ).progressbar( "value" ,40 ); |
1 | $( "#elem" ) |
2 | .progressbar( "value" ,90 ) |
3 | .addClass( "almost-done" ); |
通用方法
对于大多数jQuery UI组件来说,有些方法是都支持的,比如:option方法
正如前面说的,在UI组件初始化之后,如果需要修改一些属性值,可以通过option方法,比如,修改progressbar的value值,
1 | $( "#elem" ).progressbar( "option" , "value" ,30 ); |
如果需要取得某个配置项的值,则使用不带参数的调用:如:
1 | $( "#elem" ).progressbar( "option" , "value" ); |
1 | $( "#elem" ).progressbar( "option" ,{ |
2 | value: 100, |
3 | disabled: true |
4 | }); |
这个方法disable某个UI组件,比如:
1 | $( "#elem" ).progressbar( "disable" ); |
enable UI 组件,比如:
1 | $( "#elem" ).progressbar( "enable" ); |
如果你不在需要某个UI组件,可以调用destroy()方法,这将使的对应的HTML元素恢复原状(没有使用jQuery之前的标记显示)。这也终结jQuery UI的生命周期。一旦你终止UI组件,你就不能再调用UI组件的方法。如果你删除该HTML元素,jQuery自动终止。widget方法某些UI组件创建一个wrapper元素或者和原先元素无关联的新元素。在这种情况下,widget方法返回生成的新元素。对于Progressbar来说,没有生成的HTML元素,这个方法返回原先的HTML元素。
1 | $( "#elem" ).progressbar( "widget" ); |
事件
所有UI组件都具有事件来通知其状态发生变化。对于大部分UI组件来说,某个事件发生时,事件名以UI组件名为前缀。比如当Progressbar值发生变化时绑定一个事件处理方法:1 | $( "#elem" ).bind( "progressbarchange" , function () { |
2 | alert( "The value has changed!" ); |
3 | }); |
1 | $( "#elem" ).progressbar({ |
2 | change: function () { |
3 | alert( "The value has changed!" ); |
4 | } |
5 | }); |
共有事件
虽然每个UI组件支持的事件不同,但create事件是每个UI组件都支持的,这个事件在UI组件创建好后立即触发。相关文章推荐
- jQuery 入门教程(20): jQuery UI 基本工作过程
- jQuery 入门教程(19): jQuery UI 概述
- jQuery 入门教程(1): 基本语法
- jQuery 入门教程(2): 基本语法
- jQuery 入门教程(2): 基本语法
- 【Zigbee技术入门教程-02】一图读懂ZStack协议栈的基本架构和工作机理
- Python学习入门基础教程(learning Python)--5.1 Python下文件处理基本过程
- jQuery 入门教程(2): 基本语法
- jQuery 入门教程(21): jQuery UI 示例
- jQuery 入门教程(19): jQuery UI 概述
- jQuery 入门教程(21): jQuery UI 示例
- 编译原理学习周入门教程--(9)编译程序第一个工作阶段-词法分析(NFA和DFA转换) .
- jQuery 入门教程(41): jQuery UI Tab 示例(一)
- jQuery中文入门指南,翻译加实例,jQuery的起点教程
- LaTeX新人教程,30分钟从完全陌生到基本入门
- LaTeX新人教程,30分钟从完全陌生到基本入门
- jquery基本教程之简单体验
- World Wind Java Applet Jnlp 配置过程(入门 教程 问题)
- jHipster 3.4 创建最流行Java Web应用项目最简单的入门基本教程
- LaTeX新人教程,30分钟从完全陌生到基本入门