进度栏是添加到基于 jQuery 构建的优秀 UI 小部件和交互帮助程序库中的最新组件之一。它是在库的最新版本中引入的，在撰写本文时为 1.7。

进度条目前只是确定的，这意味着当我们更新它时，我们必须明确地告诉它它的值是什么，并且我们必须事先知道它用于测量的过程何时完成。对于需要不确定时间长度才能完成的流程，此小部件目前不是最佳选择。

这是一个非常简单的小部件，带有一个小型 API，公开了有限数量的属性和方法，但它仍然非常有效，并且非常适合向访问者提供有关流程完成前剩余百分比的视觉反馈。

开始使用

我们需要 jQuery UI 当前版本的副本，可以从 http://jqueryui.com/download 上的下载构建器获取该副本。下载后，我们需要将其解压，以便保留现有的目录结构。我们应该在计算机上创建一个名为 jQuery UI 的新目录，然后在其中创建另一个名为 jqueryui1.7 的新文件夹。然后应将存档解压到 jqueryui1.7 文件夹中。

该档案将包含我们开始所需的一切；所有库文件的缩小版和未压缩版本、一些主题文件（默认主题是恰当命名的 smoothness），甚至是底层 jQuery 库的最新版本。

进度条依赖于许多文件才能发挥作用；下面按添加到我们页面的顺序列出了这些内容：

• ui.core.css
• ui.theme.css
• ui.progressbar.css
• jquery[当前版本].js
• ui.core.js
• ui.progressbar.js

前三个文件是扩展 CSS 框架的一部分，用于为进度条提供独特的外观。我们不需要在现实世界的实现中坚持这个主题；我们有许多定制选项，包括直接从 Themeroller 获得的大量预配置主题、我们可以使用 Themeroller 自己设计的自定义主题，甚至是我们通过覆盖默认样式表中定义的规则手动创建的自定义主题。然而，在本教程中我们不会做任何这些事情，但我们可以利用框架提供的一些类。

底层页面

这个小部件只需要很少的底层标记；除了上面列出的库资源之外，我们所需要的只是一个简单的容器元素。在文本编辑器中，使用所需的资源和容器元素创建以下页面 shell：

将其保存为 jQuery UI 根目录中的 ProgressBar.html。我们将样式表放在文件的开头，将脚本放在文件的末尾；这是出于性能原因，因为当页面不同时尝试加载 JavaScript 时，它们会更快地加载内容。这是一个有据可查的绩效实践，最好遵守。我们在页面底部留下了一个空的脚本标签；接下来让我们添加一些代码：

$(function() {

  //call progress bar constructor			
  $("#container").progressbar();
});

为了初始化默认进度条，我们所做的就是在小部件要渲染到的容器元素上调用其构造函数progressbar。当您在浏览器中运行此页面时，您应该看到进度条已创建并自动填充其容器的宽度，在本例中是页面的主体：

设置进度条的值

进度条的值默认设置为零，这就是为什么它在上一个屏幕截图中显示为空的原因。为了填充进度条，我们需要设置 value 属性；更改构造函数，使其显示如下：

//call progress bar constructor
$("#container").progressbar({ value: 50 });

value 属性确定进度条被填充的百分比，为访问者提供关于还剩下多少任务需要完成的良好视觉反馈。进度条现在应该是半满的，如下面的屏幕截图所示：

获取进度条的值

获取小部件的当前值与设置它一样简单；我们可以使用它的方法之一来返回当前值属性。在初始构造函数之后，添加以下代码：

//设置鼠标悬停为进度条

$("#container").mouseover(function() {
				
  //display the current value
  $("
").attr("id", "percentage").text($("#container").progressbar("option", "value") + "% complete").appendTo("body");					
});
				
//set mouseout for progress bar
$("#container").mouseout(function() {
				  
  //hide value
  $("#percentage").remove();
});

我们添加了两个简单的匿名函数，它们在进度条触发的 mouseover 和 mouseout 事件上触发（请注意，这些是标准 DOM 事件而不是自定义进度条事件）。我们在第一个函数中所做的就是创建一个新段落，将进度条的当前值作为其内部文本并将其附加到页面。

使用 option 方法检索该值。传递给该方法的参数是我们要检索的属性的名称。第二个函数只是再次删除消息。该消息如以下屏幕截图所示：

立即学习“Java免费学习笔记（深入）”；

属性、事件和方法

value 属性或选项是当前进度条唯一可配置的属性；在此示例中，我们在初始化小部件时通过将其作为配置对象的属性传递来设置它。要在小部件初始化后设置此属性，我们将使用 option 方法。要在 setter 模式下使用此方法，我们需要传入第二个参数来指定新值，如下所示：

progressbar("option", "value", 75)

您可能想知道为什么我说“第二个参数”，而上面的代码行显然有三个参数。尽管我们使用了 option 方法，但我们实际上并没有直接调用它。相反，我们再次调用构造函数方法，但告诉它我们要调用选项方法。小部件将在内部调用该方法，并传入我们在方法名称之后传递给构造函数的两个参数（“value”和 75）。

进度条公开了一个事件，即更改事件，它为我们提供了一种挂钩机制，以便我们可以响应其值的变化。这是一个自定义事件，因此我们可以通过两种不同的方式检测它并对其做出反应。我们可以定义一个匿名函数作为配置对象中change属性的值，就像我们对value属性所做的那样，或者我们可以使用jQuery的bind方法来指定要执行的匿名函数。两者之间的一个细微差别是，使用bind方法指定的代码将首先执行。

进度条API公开了五个方法，如下所示：

• 销毁
• 禁用
• 启用
• 选项
• value

所有这些方法的使用方式与我们所了解的选项方法完全相同；通过调用构造函数方法，指定方法的名称和我们想要传递的任何参数。其中大多数应该是不言自明的。

使用进度条

对于那些以前可能根本没有使用过 jQuery UI 的人来说，到目前为止这个示例非常基础。让我们稍微进步一点，将一些接近我们可能想要在正确的实现中做的事情放在一起。这个例子也很基础，但它应该可以让我们更好地了解如何使该小部件为我们工作。我们完成的页面将如下所示：

html5酷炫线条背景动画特效

5种酷炫的网格线条动画特效。使用three.meshline库创建的动画WebGL线。设置动画并构建这些线条创建自己的动画效果集合文字，形成一个酷炫的线条背景动画特效。

下载

在文本编辑器的新文件中从以下基础页面开始：

  
    
    
    
    
    
    
  
  
    

      
Registration Form
      
Progress:
      
0%
        

          

            
Personal Details
              

	Name:
	D.O.B:
	Choose password:
	Confirm password:
              
            
            

              
Contact Details
              

                Email:
	Telephone:
	Address:
              
            
            

              
Registration Complete
              

  	
Thanks for registering!
              
            
            Next >< Back