search

Home >Web Front-end >JS Tutorial >Create a progress bar using Javascript

Create a progress bar using Javascript

王林
王林Original
2023-09-04 22:53:041337browse

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

Create a progress bar using Javascript

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

这是一个非常简单的小部件，带有一个小型 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：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
  <head>
    <link rel="stylesheet" type="text/css" href="jqueryui1.7/development-bundle/themes/smoothness/ui.core.css">
    <link rel="stylesheet" type="text/css" href="jqueryui1.7/development-bundle/themes/smoothness/ui.theme.css">
    <link rel="stylesheet" type="text/css" href="jqueryui1.7/development-bundle/themes/smoothness/ui.progressbar.css">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>jQuery UI Progress Bar</title>
  </head>
  <body>
    <div id="container"></div>
    <script type="text/javascript" src="jqueryui1.7/development-bundle/jquery-1.3.2.js"></script>
    <script type="text/javascript" src="jqueryui1.7/development-bundle/ui/ui.core.js"></script>
    <script type="text/javascript" src="jqueryui1.7/development-bundle/ui/ui.progressbar.js"></script>
    <script type="text/javascript">
	
    </script>
  </body>
</html>

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

$(function() {

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

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

Create a progress bar using Javascript

设置进度条的值

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

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

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

Create a progress bar using Javascript

获取进度条的值

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

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

$("#container").mouseover(function() {
				
  //display the current value
  $("<p>").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 方法检索该值。传递给该方法的参数是我们要检索的属性的名称。第二个函数只是再次删除消息。该消息如以下屏幕截图所示：

Create a progress bar using Javascript

属性、事件和方法

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

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

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

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

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

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

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

使用进度条

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

Create a progress bar using Javascript

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

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
  <head>
    <link rel="stylesheet" type="text/css" href="jqueryui1.7/development-bundle/themes/smoothness/ui.core.css">
    <link rel="stylesheet" type="text/css" href="jqueryui1.7/development-bundle/themes/smoothness/ui.theme.css">
    <link rel="stylesheet" type="text/css" href="jqueryui1.7/development-bundle/themes/smoothness/ui.progressbar.css">
    <link rel="stylesheet" type="text/css" href="regForm.css">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>jQuery UI Progress Bar</title>
  </head>
  <body>
    <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 id="panel1" 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>Choose password:</label><input type="password">
	<label>Confirm password:</label><input type="password">
              </fieldset>
            </div>
            <div id="panel2" 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 id="thanks" class="form-panel ui-helper-hidden">
              <h2>Registration Complete</h2>
              <fieldset class="ui-corner-all">
  	<p>Thanks for registering!</p>
              </fieldset>
            </div>
            <button id="next">Next ></button><button id="back" disabled="disabled">< Back</button>
          </form>
        </div>
        <script type="text/javascript" src="jqueryui1.7/development-bundle/jquery-1.3.2.js"></script>
        <script type="text/javascript" src="jqueryui1.7/development-bundle/ui/ui.core.js"></script>
        <script type="text/javascript" src="jqueryui1.7/development-bundle/ui/ui.progressbar.js"></script>
        <script type="text/javascript">

将其另存为 jQuery UI 文件夹中的 regForm.html。在页面顶部，我们链接到 CSS 框架；这主要是为了添加进度条所需的样式，但我们也可以在我们自己的元素上使用它提供的一些类。我们还添加了一个即将创建的自定义样式表。

页面的主体包含一些布局元素和一些文本节点，但主要元素是进度条和表单的容器。使用 div 和 fieldset 元素将表单分为几个不同的部分。这样做的原因是我们可以隐藏部分表单，使其看起来好像跨越多个页面。

我们在进度栏旁边添加了一个段落和一个标签，我们将放置它们，以便它们出现在进度栏内。该段落包含一个简单的文本字符串。该标签将用于显示当前进度值。

外部容器被赋予几个类名；第一个是我们可以对元素应用一些自定义样式，但第二个是针对 CSS 框架的不同功能。 ui-helper-clearfix 类用于自动清除浮动元素，是减少额外和不必要的 div 元素混乱的好方法。

ui-corner-all 类用于使用多种专有样式规则为容器元素（以及自动具有它们的进度条本身和我们的字段集元素）提供圆角。这些仅受基于 gecko 和 webkit 的浏览器支持，但就渐进增强的本质而言，使用它们是完全可以接受的。渐进增强意味着我们可以在网页上为能够显示它的浏览器提供增强的样式。其他浏览器只有一个方角容器。

我们在表单中使用 CSS 框架中的另一个类；页面首次加载时需要隐藏多个面板，因此我们可以使用 ui-helper-hidden 类来确保将它们设置为 display:none，当我们想要显示它们时，我们所要做的就是删除这个类名。

在正文的底部（出于性能原因；顺便说一下，这确实有效！）我们链接到库中所需的 JavaScript 资源。最后一个脚本元素是空的，正在等待使表单和进度条栩栩如生的代码。接下来我们添加一下：

$(function() {

  //call progress bar constructor
  $("#progress").progressbar({ change: function() {

    //update amount label when value changes
    $("#amount").text($("#progress").progressbar("option", "value") + "%");
  } });

  //set click handler for next button
  $("#next").click(function(e) {

  //stop form submission
  e.preventDefault();

  //look at each panel
  $(".form-panel").each(function() {

    //if it's not the first panel enable the back button
    ($(this).attr("id") != "panel1") ? null : $("#back").attr("disabled", "");

	//if the panel is visible fade it out
	($(this).hasClass("ui-helper-hidden")) ? null : $(this).fadeOut("fast", function() {

	  //add hidden class and show the next panel
	  $(this).addClass("ui-helper-hidden").next().fadeIn("fast", function() {

	    //if it's the last panel disable the next button
    	    ($(this).attr("id") != "thanks") ? null : $("#next").attr("disabled", "disabled");
								
	    //remove hidden class from new panel
	    $(this).removeClass("ui-helper-hidden");
								
	    //update progress bar
	    $("#progress").progressbar("option", "value", $("#progress").progressbar("option", "value") + 50);
	  });
      });
    });
  });

});

在外部 document.ready 快捷方式中，我们有进度条的构造函数；我们向构造函数传递一个包含单个属性的文字配置对象。这是更改属性，允许我们提供一个匿名函数，以便在每次检测到自定义更改事件时执行。我们可以使用此事件来更新要放置在进度条内的标签。

每次触发事件时，我们都会使用 option 方法获取进度条的当前值，并将该值设置为标签的文本。该事件在更改发生后触发，因此我们获得的值将始终是新值。

接下来我们有一个用于 next> 按钮的点击处理程序；单击此按钮时，将导致表单的当前“页面”通过一系列动画发生变化，并且进度条的值也会更新。我们还需要做一些其他的事情。表单内按钮的默认行为是提交表单，我们不想在这个阶段执行此操作，因此单击处理程序要做的第一件事就是使用 PreventDefault() JavaScript 函数阻止表单提交。这是在事件对象上调用的，该事件对象会自动传递给匿名函数。

然后，我们查看表单中的每个单独面板以确定当前面板；我们要做的第一件事是检查当前面板是否不是第一个面板，如果不是，我们启用默认情况下禁用的后退按钮。一次只会显示一个面板，因此我们找到没有 ui-helper-hidden 类的面板并将其淡出。我们指定一个匿名回调函数，在淡入淡出完成后执行。

在第二个函数中，我们选择下一个元素并显示它；如果下一个元素是最终面板，其 id 为Thanks，我们禁用 next> 按钮。尽管在此示例中我们并不担心表单的实际提交，但我们可以在这里将从表单收集的数据发送到服务器。我们删除了 ui-helper-hidden 类，因为面板现在可见。

最后，我们再次使用 option 方法，这次是在 setter 模式下，来设置进度条的新值。我们作为第二个参数传递给该方法的新值只是当前值加上 50，因为表单只有 2 个部分。最后一部分将触发更新标签的函数。

接下来，我们需要为 

//set click handler for back button
$("#back").click(function(e) {
				  
  //stop form submission
  e.preventDefault();
					
  //look at each panel
  $(".form-panel").each(function() {
					  					
    //if it's not the last panel enable the next button
    ($(this).attr("id") != "thanks") ? null : $("#next").attr("disabled", "");
					  
    //if the panel is visible fade it out
    ($(this).hasClass("ui-helper-hidden")) ? null : $(this).fadeOut("fast", function() {
						  
      //add hidden class and show the next panel
      $(this).addClass("ui-helper-hidden").prev().fadeIn("fast", function() {
							
        //if it's the first panel disable the back button
    	  ($(this).attr("id") != "panel1") ? null : $("#back").attr("disabled", "disabled");
										
	  //remove hidden class from new panel
	  $(this).removeClass("ui-helper-hidden");
								
	  //update progress bar
	  $("#progress").progressbar("option", "value", $("#progress").progressbar("option", "value") - 50);
      });
    });
  });
});

这就是我们现在需要的所有代码，我们现在要做的就是添加一些基本的 CSS 来布置示例；在文本编辑器的新文件中添加以下代码：

h1, h2 { font-family:Georgia; font-size:140%; margin-top:0; }
h2 { font-size:100%; margin:20px 0 10px; text-align:left; }
.form-container {
  width:400px; margin:0 auto; position:relative; font-family:Verdana;
  font-size:80%; padding:20px; background-color:#e0e3e2;
  border:3px solid #abadac;
}
.form-panel { width:400px; height:241px; }
.form-panel fieldset {
  width:397px; height:170px; margin:0 auto; padding:22px 0 0;
  border:1px solid #abadac; background-color:#ffffff;
}
.form-panel label {
  width:146px; display:block; float:left; text-align:right;
  padding-top:2px; margin-right:10px;
}
.form-panel input, .form-panel textarea {
  float:left; width:200px; margin-bottom:13px;
}
.form-container button { float:right; }
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;
}

将其另存为 regForm.css，与 HTML 文件位于同一文件夹中。我们现在应该有一个带有有线进度条的工作页面。当我们运行该页面时，我们应该发现我们可以浏览表单的每个面板，并且进度条将相应地自行更新：

Create a progress bar using Javascript

摘要

在本文中，我们研究了极其有用的进度条，我们可以将其用作视觉辅助工具，以百分比方式告诉访问者完成指定过程需要多长时间。它以一种吸引人且有用的信息呈现方式，让我们的访问者能够轻松理解。

我们查看了其 API 公开的属性和事件，还查看了可以调用以使进度栏执行某些操作的方法之一。我们结束的示例应该可以在所有主要浏览器中完美运行，尽管它在良好的 IE 中看起来确实有点混乱（如果我们愿意这样做，这将很容易修复）。

  • 订阅 NETTUTS RSS Feed 以获取更多日常 Web 开发教程和文章。

The above is the detailed content of Create a progress bar using Javascript. For more information, please follow other related articles on the PHP Chinese website!

JavaScript jquery css html webkit 构造函数 回调函数 字符串 JS 对象 事件 dom 样式表 display http ui
Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：Check if function exists in Java scriptNext article：Check if function exists in Java script

Related articles

See more