简介
bespoke-progress 是一款使用 HTML、CSS 和 JavaScript 实现的基于 Bespoke.js 的进度条插件。它可以用于展示基于时间或滚动位置的进度条，适用于需要展示进度条的演示文稿或网站。
安装
使用 npm 安装 bespke-progress：
npm install bespoke-progress
然后在你的项目中引入它：
const bespoke = require('bespoke'); const bespokeProgress = require('bespoke-progress'); bespoke.from('#presentation', [ // 添加 bespokeProgress 插件 bespokeProgress() ]);
配置
bespoke-progress 提供了一些自定义参数，可以根据需求进行配置。
-- -------------------- ---- ------- -- -- --------------- ----- -------------- ------ ----- -------------- - - -- ----------- ----------- ----- -- -------- -- ------ --------- --------- -- --------- ----- -- -- ----------- --------- ----- -- ---- ----- --------------- ----------------------------- -- --- ----- --------- ------------------- -- ---- ---- --- ----- ---------- ----------------------- --展开代码
用法
在你的 HTML 文件中添加进度条容器：
<div id="presentation"> <article>第一页</article> <article>第二页</article> <article>第三页</article> </div> <div class="bespoke-progress-container"></div>
在 JavaScript 中添加下列代码：
-- -------------------- ---- ------- ----- ------- - ------------------- ----- --------------- - ---------------------------- ----------------------------- - ----------------- -- --- ----------- ----- -- ---- ----- -- -- --- --------- ----- -- ----- -- ---展开代码
从上面的代码可以看到，我们将 bespokeProgress 添加到了你的演示文稿中，并配置它的位置（在顶部），宽度（3 个单位）和自动更新选项。
示例代码
-- -------------------- ---- ------- --------- ----- ------ ------ ----- ---------------- ----------------------- ---------- ------- ------------------------------------------------------------------- ------- ------------------------------------------------------------------------------------- ------- -- ------ -- --------------------------- - --------- ------ ----- -- ------ -- - -------- ------- ------ ---- ------------------ ---------------------- ---------------------- ---------------------- ---------------------- ---------------------- ------ ---- ----------------------------------------- -------- ----------------------------- --------------------- --------- ------- -------展开代码
在这个示例中，我们使用了 CDN 的方式引入了 Bespoke、Bespoke-progress 和一些 CSS 样式进行样式调整。
结论
我们介绍了如何使用 bespke-progress 插件来创建演示文稿或网站进度条，并且介绍了它的用法、配置和示例代码。希望本文有助于你学习和使用 bespoke-progress 插件。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/184019
