【jQuery UI 1.8 The User Interface Library for jQuery】.学习笔记.9.Progressbar控件
Progressbar控件用来显示任意进程的完成百分比。
- 默认安装启用
- 配置选项
- 控件暴露的事件API
- progressbar暴露的独一无二的方法
- 一些现实生活的例子
当前版本中,我们或系统必须明确进度的总量。
由外部<div>容器和 内部<div>容器构成。内部的<div>用来高亮当前进度。
1 安装启用默认的 progressbar
在例子中,我们使用了<div>元素。但是任何 块级 的元素 block-level elements ,比如 <a> ,也能使用。控件会在初始化时,给这个指定的元素添加一个代表progressbar的值得嵌入<div>元素。
这个控件,会像其他控件一样,填满它的外层容器。组件会自动给外层容器和内层<div>添加一系列的属性和classnames。
ARIA-compliant 这个附加的属性也会被添加到控件。使得控件完全支持浏览者使用辅助技术访问。
2 progressbar的配置选项
Option | Default Value | Used to… |
disabled | false | 禁用控件 |
Value | 0 | 用百分率的方式设置控件的值 |
2.1 设置 progressbar 的值
value选项通过一个整数,以百分比的方式设置内层<div>的宽度。
3 progerssbar的event API
Event | Fired when… |
create | 当控件初始化后 |
change | 控件值变化 |
complete | 控件的值达到100% |
我们首先为存储progressbar的选择器,然后为 change event 定义一个 event handler 。在这个回调函数中,我们首先获得progressbar的最后更新的值。字 event handler中,我们可以使用 $(this) 来选择 progressbar。
提供的值要小于等于100,我们检查这个页面上是否已经有一个元素包含 id=value 。如果这里没有,我们就新建一个 <span> 元素,并且设置它的text和当前的位置。我们同样给他一个id 和 Position ,所以它显示在progressbar的里面。如果元素已经存在,我们只需要将他的text设为新值。
当点击button时,首先使用 option 方法的 getter 模式,得到 progressbar 的当前值。
也可以使用 jQuery 的 bind() 方法,在事件的名字前加上控件的名字作为前缀,例如 progressabarchange。
4 Progressbar 的方法
除了所有库组件都有的 destroy disable,enalbe,option方法,progressbar还有一个 value 方法,它可以以捷径的方式使用 option 方法,设置progressbar的值。
5 用户发起进展 User initiated progress
在这个最基础的等级,在用户交互中,我们能手动更新progressbar。我们可以指定一个向导形式的 表单,它拥有几个步骤来完成。在每个步骤,我们可以手动增加progressbar,让用户知道他们完成了多少。
6 使用 progressbar 的富 uploads
HTML5 文件 API,异步 upload 文件,在文件被上传时,使用 onprogress 事件更新 progressbar 。尽管 onprogress 事件被定义在 官方 W3C 规格说明书中,但目前仅被Firefox 和 webkit 实现。 getAsBinary() 方法只有 Firefox 3.5+有, webkit 浏览器没。
【jQuery UI 1.8 The User Interface Library for jQuery】.学习笔记.9.Progressbar控件的更多相关文章
- 【jQuery UI 1.8 The User Interface Library for jQuery】.学习笔记.6.Dialog控件
习惯上,我们播放一条简短的信息,或向浏览者询问一个问题,都会用到dialog. 创建一个基本的dialog 使用dialog 选项 形式 启用内置动画 给dialog添加按钮 使用dialog回调函数 ...
- 【jQuery UI 1.8 The User Interface Library for jQuery】.学习笔记.10.Button 和 Autocomplete控件
Button ,可以使用 <button> <input> <a>. <input> 中的不同类型,submit , radio , checkbox ...
- 【jQuery UI 1.8 The User Interface Library for jQuery】.学习笔记.8.Datepicker控件
默认datepicker的安装启用 探索它的配置选项 安装启用一个触发按钮 配置一个供选择的动画 dateFormat选项 简单的国际化 多月datepicker 日期范围选择 datepicker的 ...
- 【jQuery UI 1.8 The User Interface Library for jQuery】.学习笔记.7.Slider控件
默认slider的安装启用 为slider自定义风格 修改配置选项 创建一个垂直的slider 设置最大最小值,和默认值 启用多个 手柄 和 范围 slider内置的回调事件 slider的方法 这个 ...
- 【jQuery UI 1.8 The User Interface Library for jQuery】.学习笔记.5.Accordion控件
accordion是另一个UI控件,能允许你将一组content加入相互分隔的.能够被浏览者的交互打开或关闭的panels中.因此,它大多数的content在初始化的时候是隐藏的,很像tabs控件.每 ...
- 【jQuery UI 1.8 The User Interface Library for jQuery】.学习笔记.4.Tabs控件
之前,我们已经介绍了 jQuery UI 库,CSS 框架.下面,我们将学习这些有增强可视化效果,高度可配置的用户交互组件. Tab 的特性是,点击 tab 后,会高亮该 tab,并显示他的关联con ...
- 【jQuery UI 1.8 The User Interface Library for jQuery】.学习笔记.3.创建控件
像jQuery提供 fn.extend() 方法从而可以简单地创建插件一样,jQuery UI也提供了机制使得创造插件变得简单,也确保了公共API功能在新的插件中被保留. 1.首先,创建一个名为 j ...
- 【jQuery UI 1.8 The User Interface Library for jQuery】.学习笔记.2.更换主题
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...
- 【jQuery UI 1.8 The User Interface Library for jQuery】.学习笔记.1.CSS框架和其他功能
jquery.ui.all.css 1.所有主题必须的文件都包含在这个文件中.它由ui.base.css和ui.them.css两个文件中拉入的@import执行构成. jquery.ui.base. ...
随机推荐
- Power Bi的优势 特色功能
Power-BI可以让决策者不再依赖他人,就可及时.准确(没有人为加工,自然是最准确的)的得到各种关键经营数据: Power-BI不仅仅是让报表自动生成,而是完全改变了获取经营数据的方式,它可以直观的 ...
- 第七篇 Integration Services:中级工作流管理
本篇文章是Integration Services系列的第七篇,详细内容请参考原文. 简介在上一篇文章,我们创建了一个新的SSIS包,学习了SSIS中的脚本任务和优先约束,并检查包的MaxConcur ...
- .NET中常见对象类型
.NET中六大内置对象:1.Response 2.Request 3.Session 4.Appliction 5.Server 6.Cookie System.Web.HttpCo ...
- ios学习笔记01
## HUD - 其他说法:指示器.遮盖.蒙板 - 半透明HUD的做法 - 背景色设置为半透明颜色 ## 定时任务 - 方法1:performSelector ```objc // 1.5s后自动调用 ...
- Azure 负载均衡和可用性集
首先要2台以上的虚拟机,一开始我找了好久都没找到如何在一个云服务里添加多个虚拟机. 因为我使用的是快速创建,快速创建的界面是要新建一个云服务的,如果你输入现有的云服务名字,它会提示你重名了. 你要用[ ...
- ios app 解决微信扫二维码不能跳转问题
<script> (function(){ // Setup GA (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i ...
- Swift游戏实战-跑酷熊猫 07 平台的移动
这节内容我们来实现平台是怎么产生移动动画的. 要点 1 利用数组存放平台 var platforms=[Platform]() 2 有新的平台产生存放进数组 platforms.append(plat ...
- Leetcode: Graph Valid Tree && Summary: Detect cycle in undirected graph
Given n nodes labeled from 0 to n - 1 and a list of undirected edges (each edge is a pair of nodes), ...
- for循环、for循环嵌套
循环:反复执行某段代码. 循环四要素:初始条件,循环条件,循环体,状态改变. 循环的最后一句:循环条件不再满足. 1.找出100以内与7有关的数并打印:(1).从1找到100(2).找出与7有关的数 ...
- [transferred] javascript exception handling.
my error handling clause: window.onerror = function (errorMessage, scriptURI, lineNumber, columnNumb ...