【jQuery UI 1.8 The User Interface Library for jQuery】.学习笔记.9.Progressbar控件
2013-08-17 18:25
477 查看
Progressbar控件用来显示任意进程的完成百分比。
默认安装启用
配置选项
控件暴露的事件API
progressbar暴露的独一无二的方法
一些现实生活的例子
当前版本中,我们或系统必须明确进度的总量。
由外部<div>容器和 内部<div>容器构成。内部的<div>用来高亮当前进度。
在例子中,我们使用了<div>元素。但是任何 块级 的元素 block-level elements ,比如 <a> ,也能使用。控件会在初始化时,给这个指定的元素添加一个代表progressbar的值得嵌入<div>元素。
这个控件,会像其他控件一样,填满它的外层容器。组件会自动给外层容器和内层<div>添加一系列的属性和classnames。
ARIA-compliant 这个附加的属性也会被添加到控件。使得控件完全支持浏览者使用辅助技术访问。
value选项通过一个整数,以百分比的方式设置内层<div>的宽度。
<div id="myProgressbar"> </div> <button id="increase">Increase by 10%</button> $(function(){ var progress = $("#myProgressbar"); var progressbarOpts={ change:function(){ var val=$(this).progressbar("option","value"); if(!$("#value").length){ console.log("no"+val); $("<span id='value' />").text(val+"%").css({float:"right",marginTop:-28,marginRight:10}).appendTo(progress); } else{ $("#value").text(val+"%"); console.log("yes"+val); } } }; progress.progressbar(progressbarOpts); $("#increase").click(function(){ var currentVal=progress.progressbar("option","value"), newVal=currentVal+10; progress.progressbar("option","value",newVal); }); });
我们首先为存储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。
$("#increase").click(function(){ var currentVal=progress.progressbar("option","value"), newVal=currentVal+10; progress.progressbar("value",newVal); });
<style> h1, h2 { font-family:Georgia; font-size:140%; margin-top:0;} h2 { margin:20px 0 10px; font-size:100%; text-align:left;} p { margin:0; font-size:75%; position:absolute; left:30px; top:60px; font-weight:bold; } #amount { position:absolute; right:30px; top:60px; font-size:80%; font-weight:bold; } #thanks { text-align:center;} #thanks p { margin-top:48px; font-size:160%; position:relative; left:0; top:0; } form { height:265px; position:relative;} .form-container { width:400px; margin:0 auto; position:relative; font-family:Verdana; font-size:80%; padding:20px; background-color:#e0e3e2; border:1px solid #abadac; } .form-panel { width:400px; height:241px; position:absolute; top:0; left:0;} fieldset { width:397px; height:170px; margin:0 auto; padding:22px 0 0; border:1px solid #abadac; background-color:#ffffff; } label { width:146px; display:block; float:left; text-align:right; padding-top:2px; margin-right:10px; } input, textarea { float:left; width:200px; margin-bottom:13px; } button { float:right;} </style> </script> <div class="form-container ui-helper-clearfix ui-corner-all"> <h1>Registration Form</h1> <p>Progress:</p> <div id="progress"></div> <label id="amount">0%</label> <form action="serverScript.php"> <div class="form-panel"> <h2>Personal Details</h2> <fieldset class="ui-corner-all"> <label>Name:</label> <input type="text"> <label>D.O.B:</label> <input type="text"> <label>Chose password:</label> <input type="password"> <label>Confirm password:</label> <input type="password"> </fieldset> </div> <div class="form-panel ui-helper-hidden"> <h2>Contact Details</h2> <fieldset class="ui-corner-all"> <label>Email:</label> <input type="text"> <label>Telephone:</label> <input type="text"> <label>Address:</label> <textarea rows="3" cols="25"></textarea> </fieldset> </div> <div class="form-panel ui-helper-hidden"> <h2>Registration Complete</h2> <fieldset class="ui-corner-all"> <p>Thanks for registering!</p> </fieldset> </div> </form> <button id="next">Next</button> <button id="back" disable="disabled">Back</button> </div> $(function(){ var prog=$("#progress"), progressOpts={ change:function(){ prog.next().text(prog.progressbar("value")+"%"); } }; prog.progressbar(progressOpts); $("#next,#back").click(function(){ $("button").attr("disabled",true); if(this.id=="next"){ console.log("next button"+prog.progressbar("option","value")); prog.progressbar("option","value",prog.progressbar("option","value")+50); $("form").find("div:visible").fadeOut().next().fadeIn(function(){ $("#back").attr("disabled",false); if(!$("form").find("div:last").is(":visible")){ $("#next").attr("disabled",false); } }); }else{ console.log("prev button"+prog.progressbar("option","value")); prog.progressbar("option","value",prog.progressbar("option","value")-50); $("form").find("div:visible").not(".buttons").fadeOut().prev().fadeIn(function(){ $("#next").attr("disabled",false); if(!$("form").find("div:first").is(":visible")){ $("#back").attr("disabled",false); } }); } }); });
默认安装启用
配置选项
控件暴露的事件API
progressbar暴露的独一无二的方法
一些现实生活的例子
当前版本中,我们或系统必须明确进度的总量。
由外部<div>容器和 内部<div>容器构成。内部的<div>用来高亮当前进度。
1 安装启用默认的 progressbar
<div id="myProgressbar"> </div> <script src="development-bundle/jquery-1.4.4.js"></script> <script src="development-bundle/ui/jquery.ui.core.js"></script> <script src="development-bundle/ui/jquery.ui.widget.js"></script> <script src="development-bundle/ui/jquery.ui.progressbar.js"></script> <script> $(function(){ $("#myProgressbar").progressbar(); }); </script>在例子中,我们使用了<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 的值
var progressbarOption={ value:50 }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的值。$("#increase").click(function(){ var currentVal=progress.progressbar("option","value"), newVal=currentVal+10; progress.progressbar("value",newVal); });
5 用户发起进展 User initiated progress
在这个最基础的等级,在用户交互中,我们能手动更新progressbar。我们可以指定一个向导形式的 表单,它拥有几个步骤来完成。在每个步骤,我们可以手动增加progressbar,让用户知道他们完成了多少。<style> h1, h2 { font-family:Georgia; font-size:140%; margin-top:0;} h2 { margin:20px 0 10px; font-size:100%; text-align:left;} p { margin:0; font-size:75%; position:absolute; left:30px; top:60px; font-weight:bold; } #amount { position:absolute; right:30px; top:60px; font-size:80%; font-weight:bold; } #thanks { text-align:center;} #thanks p { margin-top:48px; font-size:160%; position:relative; left:0; top:0; } form { height:265px; position:relative;} .form-container { width:400px; margin:0 auto; position:relative; font-family:Verdana; font-size:80%; padding:20px; background-color:#e0e3e2; border:1px solid #abadac; } .form-panel { width:400px; height:241px; position:absolute; top:0; left:0;} fieldset { width:397px; height:170px; margin:0 auto; padding:22px 0 0; border:1px solid #abadac; background-color:#ffffff; } label { width:146px; display:block; float:left; text-align:right; padding-top:2px; margin-right:10px; } input, textarea { float:left; width:200px; margin-bottom:13px; } button { float:right;} </style> </script> <div class="form-container ui-helper-clearfix ui-corner-all"> <h1>Registration Form</h1> <p>Progress:</p> <div id="progress"></div> <label id="amount">0%</label> <form action="serverScript.php"> <div class="form-panel"> <h2>Personal Details</h2> <fieldset class="ui-corner-all"> <label>Name:</label> <input type="text"> <label>D.O.B:</label> <input type="text"> <label>Chose password:</label> <input type="password"> <label>Confirm password:</label> <input type="password"> </fieldset> </div> <div class="form-panel ui-helper-hidden"> <h2>Contact Details</h2> <fieldset class="ui-corner-all"> <label>Email:</label> <input type="text"> <label>Telephone:</label> <input type="text"> <label>Address:</label> <textarea rows="3" cols="25"></textarea> </fieldset> </div> <div class="form-panel ui-helper-hidden"> <h2>Registration Complete</h2> <fieldset class="ui-corner-all"> <p>Thanks for registering!</p> </fieldset> </div> </form> <button id="next">Next</button> <button id="back" disable="disabled">Back</button> </div> $(function(){ var prog=$("#progress"), progressOpts={ change:function(){ prog.next().text(prog.progressbar("value")+"%"); } }; prog.progressbar(progressOpts); $("#next,#back").click(function(){ $("button").attr("disabled",true); if(this.id=="next"){ console.log("next button"+prog.progressbar("option","value")); prog.progressbar("option","value",prog.progressbar("option","value")+50); $("form").find("div:visible").fadeOut().next().fadeIn(function(){ $("#back").attr("disabled",false); if(!$("form").find("div:last").is(":visible")){ $("#next").attr("disabled",false); } }); }else{ console.log("prev button"+prog.progressbar("option","value")); prog.progressbar("option","value",prog.progressbar("option","value")-50); $("form").find("div:visible").not(".buttons").fadeOut().prev().fadeIn(function(){ $("#next").attr("disabled",false); if(!$("form").find("div:first").is(":visible")){ $("#back").attr("disabled",false); } }); } }); });
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】.学习笔记.7.Slider控件
- 【jQuery UI 1.8 The User Interface Library for jQuery】.学习笔记.3.创建控件
- 【jQuery UI 1.8 The User Interface Library for jQuery】.学习笔记.6.Dialog控件
- 【jQuery UI 1.8 The User Interface Library for jQuery】.学习笔记.8.Datepicker控件
- 【jQuery UI 1.8 The User Interface Library for jQuery】.学习笔记.4.Tabs控件
- 【jQuery UI 1.8 The User Interface Library for jQuery】.学习笔记.10.Button 和 Autocomplete控件
- 【jQuery UI 1.8 The User Interface Library for jQuery】.学习笔记.5.Accordion控件
- 【jQuery UI 1.8 The User Interface Library for jQuery】.学习笔记.2.更换主题
- 【jQuery UI 1.8 The User Interface Library for jQuery】.学习笔记.1.CSS框架和其他功能
- Crownwood Magic UI Library 1.7.4.0,The User Interface Library for .NET(开放源码的控件库)
- Elasticsearch.The.Definitive.Guide学习笔记 -- 1. You know, for search
- The C++ Standard Library 学习笔记(一)1 - 4 章
- droiddraw - DroidDraw is a graphical user interface (GUI) builder for the Android platform - Google Project Hosting
- Linux系统下Mysql提示you need the SUPER privilege for this operation的解决办法---Linux学习笔记(5)
- The BKS System for the Philco-2000 学习笔记
- 学习笔记 Real COM with the MFC Library (译四)
- Solr文档学习--Using the Solr Administration User Interface(续)
- JavaScript 学习笔记(七)for(var i in username) {……}、.length、isNaN(……)
- The Yahoo! User Interface Library
- jQuery学习笔记(控件位置定位、尺寸大小的获取等)