网站建设（一）进度条（一）

网站建设系列是收集网站使用到的各种demo。包括 JavaScript 插件，JavaScript组件，常用 css 等多方面。

主要参考bootcdn，以及GitHub上的资源进行说明。如果时间允许，会将这些所有内容进行逐一对比。

一、最简版(demo1.html)

首先基于 bootstrap 组件来讲，在它的官网介绍中，有关于progress bar 的样式组件。当然是用它首先要引用 bootstrap.css。

基本样式就是如此，但是这仅仅只是一个静态的进度条。现在通过 jQuery 代码将其动起来（文件js/progress.js）。

核心源码代码

1. 设置当前进度：

结合官方给的HTML代码，不难看出该方法是设置进度条的值。调用时使用update(60)即可，当然，这是该插件的内部调用。

2. 例如设置为完成和重置进度条：

3. 外部调用的入口为：

这是典型的jQuery插件式写法，使用方法为

$(progressSelector).progressbar(参数)

方法内的前五行为获得 Progressbar 对象， 第七行当参数类型是数字时进行处理，也就是设置进度为多少。

第六行当参数类型是字符串时进行处理，其实能用来传参的两个字符串只能是（‘finish’ 和 ‘reset’），也就是该插件内部提供的这两个方法。

我的demo演示的效果是，当点击上传文件按钮时，进度条从0开始，一直到100%。

4. 该插件还提供一些 HTML 操作功能

看这段代码可以知道，HTML元素需要至少三个属性，

data-toggle='progressbar', 有该属性才能控制进度条；

data-target=selector， 该属性表示控制哪个进度条；

data-value=value, 该属性表示控制进度条到达什么值，也支持那两个字符串；

具体使用见图：