前言
jquery在线库jQuery UI是基于jQuery基础类库API开发的开源的JavaScript 网页UI（用户界面）代码组件库，使用jQuery UI可以实现Web UI界面交互、动画、特效和可更换主题的可视控件，并且还可以定制Web UI的主题风格。从而可以应用它轻松地构建出高度可交互的Web 应用程序的UI界面。
随着Web应用的普及及AJAX相关应用的深入，客户端和Web服务器端需要频繁地交互数据，对Web交互的界面也提出了新的要求——简洁、方便、人性化等用户体验度高；同时随着移动设备的普及，客户端的访问设备也逐渐多样化。如何为不同的客户端设备提供统一的Web应用界面，从而提高开发效率和降低开发成本。目前比较好的技术实现手段是应用JQuery及JQuery UI系统库相关的技术。
作者根据自身多年的软件开发实践和经验总结，结合多年的IT职业培训的教学和高校软件学院一线的教学工作体验，在本系列文档中通过具体的程序代码示例为读者介绍jQuery UI中典型的应用组件技术。本文档重点为读者介绍jQuery UI progressBar进度条组件的技术特性及各种应用示例，主要涉及progressBar组件的技术特性、progressBar组件主要的成员属性、典型事件及option等成员方法的应用示例，体现progressBar组件的技术特性的各种应用示例等方面的内容。
杨教授大学堂精心创作有系列化的优秀程序员职业提升必读技术资料，这些资料将系统地从软件设计和开发实现的“设计思想”、“管理策略”、“技术实现”和“经验方法”等方面与读者进行充分的交流，涉及作者
对软件开发设计思想和原则、课程设计、项目实训、软件实现技术等方面的学习心得体会和应用技巧、经验总结。
本文目录
1.1jQuery UI progressBar进度条组件技术特性 (3)
1.1.1jQuery UI progressBar进度条组件概述 (3)
1.1.2progressBar组件成员属性及应用示例 (8)
1.1.3progressBar组件典型事件及应用示例 (13)
1.1.4progressBar组件option方法及应用示例 (15)
1.2progressBar组件的各种应用示例 (16)
1.2.1体现progressBar组件的技术特性的应用示例 (16)
1.2.2应用定时器动态改变当前任务进度量的应用示例 (20)
1.2.3在JSP页面中应用进度条组件的应用示例 (25)
1.2.4应用AJAX获得服务器程序任务进度量的示例 (29)
1.1jQuery UI progressBar进度条组件技术特性
1.1.1jQuery UI progressBar进度条组件概述
1、progressBar进度条组件的主要功能
程序界面中的进度条组件可以向软件系统的使用者用户显示程序当前完成某个任务时的任务量的百分比，让用户能够明确地了解程序的当前进度，从而提高软件系统的使用时的用户体验。在各种软件技术开发平台（Java、C#及VC++等）中都提供有progressBar进度条组件。如下示图所示为Java Swing 中所提供的JProgressBar组件的执行效果的局部截图。
2、如何解决实时任务进度回馈的技术问题
许多企业级的软件应用系统都涉及到长时间的任务操作，例如复杂的数据库查询或繁重的XML处理、远程数据发送等，虽然这些任务主要由数据库系统或中间件系统完成。如果系统在后台进行长时间的任务处理而用户在前台长时间的等待。在很多应用场合下，用户会失去耐心。
为了改善用户界面，通常会在处理量大或者是网络速度较慢的时候，给用户显示一个处理进度，让用户心理有底，增强用户等待结果的耐心，以改善用户体验。为了达到这个效果，通常做法有两大类：简单等待和实时显示当前处理进度。
（1）简单等待
简单等待这种做法之所以说简单，就是在用法发送了处理命令后，立即在页面的某个地方替换一个waiting的图片，比如一个转圈的GIF，一张Loading的图片等。其实，这种技术实现并不能称之为进度条的应用。在任务处理的时间不太长的应用环境下，也基本能够满足要求。如下两个示图为两个不同的应用系统中应用Gif动画装载器显示等待任务完成的示图
（2）实时显示当前处理进度
实时显示服务器端相关程序处理的进度，这在一些长时间的请求中尤其重要，比如上传文件、发送邮件、批量处理数据等的应用。比如在登陆Gmail邮件系统时，Gmail系统会显示一个实时进度条，显示当前加载的进度。
3、延时页面载入进度条的原理性示例
本示例非实时任务进度状态指示，而只是实现延时等待的效果，主要是说明进度条的技术实现原理。如下为HTML页面及相关的JS代码示例：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>非实时任务进度状态指示示例</title>
<style>
#displayLoadingChartTextID{
font-family:Arial;
font-weight:bolder;
color:black;
background-color:#EAEAEA;
padding:0px;
border-style:none;
}
#displayPercentValueTextID{
font-family:Arial;
color:black;
text-align:center;
border-width:medium;
border-style:none;
}
</style>
</head>
<body>
<div>
<span id="displayLoadingChartTextID" ></span>
<span id="displayPercentValueTextID"></span>
</div>
</body>
<script type="text/javascript" language="javascript">
var currentBarCounterValue = 0
var currentTotalBarAmount ="";
/**
下面为定时回调的响应函数，每隔100毫秒将触发对loadingProcessCount函数的调用*/
function loadingProcessCount(){
/**
更新当前的任务进度量，本示例由于是演示例，因此直接设置相关的模拟任务量。在实际应用系统中，应该要应用AJAX等异步请求处理技术获得服务器端返回的任务量。
*/
currentBarCounterV alue= currentBarCounterValue+2;
currentTotalBarAmount =currentTotalBarAmount + "||";
/**

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。