前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >网站建设(一)进度条(二)

网站建设(一)进度条(二)

作者头像
用户7293182
发布2022-01-20 17:16:59
2970
发布2022-01-20 17:16:59
举报
文章被收录于专栏:jQuery每日经典jQuery每日经典

网站建设系列是收集网站使用到的各种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参考上面提供的链接)

代码语言:javascript
复制
$('#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);

本文参与 腾讯云自媒体同步曝光计划,分享自微信公众号。
原始发表:2018-01-27,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 jQuery每日经典 微信公众号,前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
相关产品与服务
对象存储
对象存储(Cloud Object Storage,COS)是由腾讯云推出的无目录层次结构、无数据格式限制,可容纳海量数据且支持 HTTP/HTTPS 协议访问的分布式存储服务。腾讯云 COS 的存储桶空间无容量上限,无需分区管理,适用于 CDN 数据分发、数据万象处理或大数据计算与分析的数据湖等多种场景。
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档