代码拉取完成,页面将自动刷新
基于layui实现的简单步骤进度条,提供api操作进度步骤进度条前进、后退、移动到指定位置等。
下载stepprogress目录及目录内的js、css文件,放在web工程的js相关文件static目录即可。
下面是对应 例子截图 的代码。详细请参考sample文件。
layui.config({
base:'./stepprogress/'
}).use(['stepprogress', 'layer'], function(){
var stepprogress = layui.stepprogress;
var $ = layui.$;
var layer = layui.layer;
renderStepProgress();
// 绑定进度变化事件
stepprogress.on('change(stepProgressBar)', function(options){
console.log(options);
});
// 渲染步骤进度条
function renderStepProgress() {
let stepItems = [{
title: '开始',
code: '01'
},{
title: '做成基础数据',
code: '02'
},{
title: '手工调整',
code: '03'
},{
title: '生成报表',
code: '90'
}];
stepprogress.render({
elem: '#stepProgressBar',
stepItems: stepItems,
position: 0
});
}
});
API | 描述 |
---|---|
var stepprogress = layui.stepprogress; | 获得 stepprogress 模块 |
stepprogress.render(options) | 渲染进度条 |
stepprogress.reload(id, options) | 进度条重载 |
stepprogress.next(id) | 下一步 |
stepprogress.pre(id) | 上一步 |
stepprogress.getPosition(id) | 取得当前位置 |
stepprogress.getOptions(id) | 取得实例的options |
stepprogress.getCurrentStepItem(id) | 取得当前stepItem对象 |
stepprogress.render(options);
属性 | 描述 | 类型 | 默认值 |
---|---|---|---|
elem | 绑定元素选择器或 DOM 对象 | string/DOM | - |
width | 宽度,百分比或999px | string | 100% |
position | 初始化位置,位置从0开始 | number | 0 |
stepprogress.on('event(filter)', callback);
event | 描述 |
---|---|
change | 位置移动时触发 |
此处可能存在不合适展示的内容,页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容,可点击提交进行申诉,我们将尽快为您处理。