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

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

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

一、名字叫 bootstrap-progressbar.js（demo2.html）

在网络上有一个插件是这个名字，既然它的命名 以bootstrap 开头，肯定要看看它和上一个 demo 的 区别在哪儿。

当然了，网上的资源很多，保不齐也有重名的是吧。现在就遇到这么一个。

本例使用的 js 插件地址是：

http://geersch.github.io/bootstrap-progressbar/js/bootstrap-progressbar.js

API :

http://geersch.github.io/bootstrap-progressbar/

demo:

http://geersch.github.io/bootstrap-progressbar/demo.html

另一个插件则下一章说明：

该插件的 js 资源地址：

https://cdn.bootcss.com/bootstrap-progressbar/0.9.0/bootstrap-progressbar.js

它的最后一个版本是0.9.0，最后的更新时间应该是在2015年，在GitHub 和 bootcdn上的排名都不算靠前。它的一个优点是：网上有关于它的 API 详解以及

DEMO演示。

该插件与上一个插件的最大区别是：增加了不同色块的进度显示：

或许有用，获取没用，视情况而定。

二、源码分析：

1. 基础配置项：

该进度条主要分为三个不同的颜色区域，分别为success，warning，danger。

这些对应的HTML分别为：

而具体的颜色显示，还是由 bootstrap.css 里的值决定的。

属性的具体含义也就不再说明，根据具体的demo示例也能猜到具体的意思。

2. 初始化

这段代码和demo1一样，分为两部分。

第一部分：某元素第一次调用该方法时，option必须是object类型，初始化progressbar对象，并使用元素的 data 将该对象存储起来。

第二部分：当元素不是第一次调用该方法时，option可以是字符串，data 表示第一部分存储起来的 progressbar 对象。调用对象中的 option 方法，实现操作进度条的功能。

3. 该插件内部可以调用的方法，即插件参数可以是哪些字符串

设置配置属性的那四个方法就不再放出代码，其他方法有：

3.1 进度增加 一；

3.2 重置进度条

3.3 设置进度条到某一个值，由于涉及到多种颜色，所以较demo1的处理会多一点

三、释疑

当参数是字符串时的代码走向问题。（源码见上面截图）

例如：网站给出的示例代码（API参考上面提供的链接）

$('#progressbar').progressbar('setPosition', 85);

对照源码：

1. args = Array.apply(null, arguments);

其中，arguments是接收到的所有参数的类数组形式，并不是真正的数据。

Array.apply 将类数组形式转换为数组形式，并赋值给args。

2. args.shift();

这行代码是去掉数组中的第一个元素，也就是去掉即将要调用的插件的方法名字。

3. option 是接收到的第一个参数，也就是要调用的方法名字。

4. data[option].apply(data, args)

data 是 progressbar 对象

该行代码等价于 progressbar对象.setPosition(50);