如何从头开始设计jQuery进度条

How to design a jQuery progress bar from the scratch?

本文关键字：jQuery 从头开始      更新时间：2023-09-26

我正在尝试设计一个jQuery进度条，它可以随着用户输入而进行。我尝试了几个代码，但它们不起作用，当我加载页面时，它完全是空白的。请帮我渡过难关。我是不是错过了一个技巧？我必须下载所有的.js文件吗如果是，如何下载？请帮我提供一个如何设计进度条的详细教程。我对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">
<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">
$(function () {
        //call progress bar constructor           
        $("#container").progressbar({ value: 50 });
    });
</script>
</body>
</html>

progressbar是jQuery UI的函数，因此您必须将它们也包含在中

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
  <title>jQuery UI Progress Bar</title>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <!-- jQuery -->
  <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
  <!-- jQuery UI -->
  <link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/themes/smoothness/jquery-ui.css" />
  <script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
<script>
  $(function () {
  //call progress bar constructor           
    $("#container").progressbar({ value: 50 });
  });
</script>
</head>
<body>
  <div id="container"></div>
</body>
</html>

如果你不下载jQuery框架，而是使用Google 托管的框架，那就更好了

HTML中的进度条由两个元素组成，一个在另一个内部。 
<div class="progress-bar">
    <div style="width: 60%"></div>
</div>

默认情况下，使用CSS，您可以为外部容器指定特定的宽度、高度和边框，对于内部容器，您可以指定最大高度和一些背景色。

.progress-bar {
    width: 300px;
    height: 20px;
    border: 1px solid #000;
}
.progress-bar > div {
    height: 100%;
    background-color: #0F0;
}

现在，您只需要使用JavaScript(jQuery(更改内部容器的宽度，就可以更改/显示您的进度。

$('.progress-bar > div').css('width', '75%');

就是这样。你不需要任何花哨的库来实现这一切，事实上，如果你愿意的话，你可以在没有jQuery的情况下更改宽度。

document.querySelectorAll('.progress-bar > div')[0].style.width = '75%';

这是一个演示代码http://jsfiddle.net/Deele/7Wmju/

附言：HTML5甚至有内置的进度条，可以根据需要进行操作。阅读相关内容http://css-tricks.com/html5-progress-element/

相关文章：