本篇介绍JQuery UI组件的基本工作过程,以进程条(Progressbar)为例介绍JQuery UI组件工作的基本过程。
初始化
大部分JQuery Ui组件都可以保持其状态,因此为了能够跟踪UI组件的状态,jQuery UI组件也有一个生命周期,这个生命周期从初始化开始,为了初始化一个UI组件,一般在某个HTML元素调用UI组件(插件)方法。,比如
1 |
$( "#elem" ).progressbar();
|
这个方法初始化id=elem的元素,因为我们调用progressbar没有带参数,因此将使用缺省属性来初始化进程条。我们可以通过传入配置的方法为jQuery UI组件修改缺省值。比如:
1 |
$( "#elem" ).progressbar({ value: 20 });
|
也可以一次传入多个参数来初始化jQuery UI组件,其它没有配置的属性还是使用其缺省值。这些属性也属于jQuery UI组件状态的一部分。初始化之后,如果需要修改这些属性,可以通过option方法来改变。
方法
初始化jQuery UI组件之后,我们可以查询UI组件的状态属性,每个初始化过的UI组件都可以调用其方法,调用方法是通过传入方法名称,比如, 调用进程条的value方法如下:
1 |
$( "#elem" ).progressbar( "value" );
|
如果这个方法可以有参数,直接在方法名之后传入参数,比如,设置value值为40
1 |
$( "#elem" ).progressbar( "value" , 40 );
|
和前面介绍的jQuery 方法链一样,jQuery UI的方法也支持多个方法串接在一起,比如:
2 |
.progressbar( "value" , 90 )
|
3 |
.addClass( "almost-done" );
|
通用方法
对于大多数jQuery UI组件来说,有些方法是都支持的,比如:
option方法
正如前面说的,在UI组件初始化之后,如果需要修改一些属性值,可以通过option方法,比如,修改progressbar的value值,
1 |
$( "#elem" ).progressbar( "option" , "value" , 30 );
|
注意这和前面调用value方法不同,这个例子是想修改配置项value为30.
如果需要取得某个配置项的值,则使用不带参数的调用:如:
1 |
$( "#elem" ).progressbar( "option" , "value" );
|
除此之外,如果需要一次修改多个配置项,可以通过传入对象的方法,如:
1 |
$( "#elem" ).progressbar( "option" , {
|
diable方法
这个方法disable某个UI组件,比如:
1 |
$( "#elem" ).progressbar( "disable" );
|
这个方法disable进程条,并修改其Style使其看起来无效。这个方法等同于设置的disable属性为true.
enable方法
enable UI 组件,比如:
1 |
$( "#elem" ).progressbar( "enable" );
|
这个方法等同于设置disable属性为false.
destroy方法
如果你不在需要某个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!" );
|
每个事件都有对应的回调函数,是作为一个配置项来定义的,因此我们可以直接挂到Progressbar的change回调函数而不要绑定到Progressbarchange事件,比如:
1 |
$( "#elem" ).progressbar({
|
3 |
alert( "The value has changed!" );
|
共有事件
虽然每个UI组件支持的事件不同,但create事件是每个UI组件都支持的,这个事件在UI组件创建好后立即触发。
分享到:
相关推荐
jquery入门教程 从零开始学习jQuery (一) 开天辟地入门篇 从零开始学习jQuery (二) 万能的选择器 从零开始学习jQuery (三) 管理jQuery 包装集 从零开始学习jQuery (四) 使用jQuery 操作元素的属性与样式 从零开始...
jQuery UI DownloadBuilder & ThemeRoller ...使用配置文件来定义 DownloadBuilder 应该提供哪个 jQueryUI 版本。 例如: "jqueryUi": [ { "version": "1.10.0" "dependsOn": "jQuery 1.7+", "label": "Stable",
jQuery UI 入门到精通 中文版 PDF
教程名称:jQuery EasyUI入门视频教程【20讲】课程目录:【】1__JQuery实战视频教程_页面加载时弹出一个对话框【】2_JQuery实战视频教程_点击时弹出一个对话框【】30__JQuery实战视频教程_UI动画效果【】3_JQuery...
课题-jQuery-LigerUI-使用教程入门篇.doc
[jQuery入门到精通]第10章:jQueryUI常用功能实战[归纳].pdf
教程名称: 李炎恢JQuery EasyUI视频培训教程_EasyUI是基于jQuery的UI插件集合01.[jQuery EasyUI]第1章 jQuery EasyUI入门02.[jQuery EasyUI]第2章 使用EasyUI03.[jQuery EasyUI]第3章 Draggable(拖动)组件04....
操作案例1:制作jQuery Mobile基本页面 1.3.4 jQuery Mobile对话框 1.4 与电话整合 操作案例2:制作商家信息展示页面 2 jQuery Mobile UI组件 2.1 网格系统 2.2 格式化内容 2.3 可折叠的内容 2.4 工具栏 操作案例3:...
wicket-jquery-ui Wicket 7.x,Wicket 8.x和Wicket9.x中的jQuery UI和Kendo UI集成 入门 为了开始使用此API,您可以下载适当的jar或设置Maven依赖项。 下载罐子 如果您不使用maven,则需要在此处下载核心jar: : ...
本系列文章导航 从零开始学习jQuery (一) 开天辟地入门篇 从零开始学习jQuery (二) 万能的选择器...从零开始学习jQuery (十) jQueryUI常用功能实战 从零开始学习jQuery (十一) 实战表单验证与自动完成提示插件 整理发布
jquery UI主要是用于是UI能变的能容易实现,不需要太多的css,里面已经写了很多类,可以直接使用,常见的图标,方向键头,实现滑动,切换,动画等等都很容易,方便开发在速度上的提升,入门容易,很快上手,
jquery,ui的库文件,使jquery的网页设计更加简便,新手快速入门
Easy UI入门教程,有基础的HTML基础和JavaScript以及jQuery更易学,jQuery EasyUI是一组基于jQuery的UI插件集合,而jQuery EasyUI的目标就是帮助web开发者更轻松的打造出功能丰富并且美观的UI界面。
jQuery LigerUI 是基于jQuery的一系列UI控件组合,简单而又强大,致力于快速打造Web前端界面解决方案。 因为是前端控件,跟服务器无关,可以适合.net,jsp,php等等web服务器环境
《jQuery JavaScript与CSS开发入门经典》还介绍jQuery UI库的用法,指导您使用jQuery UI库创建赏心悦目的专业用户界面。书中包含极富启迪意义的指南和紧贴实际的练习,以引导读者在实际中得心应手地使用jQuery。
不幸的是,我不再在新项目上使用jQuery和jQueryUI。 jQuery Timepicker Addon多年来一直是可供选择的时间选择器,当时没有多少可用。 我感谢能为社区做出贡献的机会,也感谢在此过程中做出贡献的每个人。 这些天来...
jQuery 1 9 1英文版帮助文档 包括3个部分内容:学习中心(Learning Center) JQuery API JQuery UI API 其中学习中心有JS入门基础 JQuery的相关核心概念 J插件常识和性能方面建议 JQuery Mobile 移动开发)等 内容比...
第1章 jQuery开发入门/1 1.1 jQuery概述/2 1.1.1 认识jQuery /2 1.1.2 jQuery基本功能/2 1.1.3 搭建jQuery开发环境/3 1.1.4 编写第一个简单的jQuery应用/3 1.1.5 jQuery程序的代码风格/5 1.2 jQuery的简单...