4 Star 8 Fork 3

Allen/stepprogress

加入 Gitee
与超过 1200万 开发者一起发现、参与优秀开源项目,私有仓库也完全免费 :)
免费加入
克隆/下载
贡献代码
同步代码
取消
提示: 由于 Git 不支持空文件夾,创建文件夹后会生成空的 .keep 文件
6个月前
Loading...
README
MIT

stepprogress

介绍

基于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

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);

  • 参数 options : 基础属性配置项。#详见属性

属性

属性描述类型默认值
elem 绑定元素选择器或 DOM 对象 string/DOM -
width 宽度,百分比或999px string 100%
position 初始化位置,位置从0开始 number 0

事件

stepprogress.on('event(filter)', callback);

  • 参数 event(filter) 是事件的特定结构。 event 为事件名,支持的事件见下表。filter 为元素属性 lay-filter 对应的值。
  • 参数 callback 为事件执行时的回调函数,参数为render时指定的基础属性options。
event 描述
change 位置移动时触发

参与贡献

  1. Fork 本仓库
  2. 新建 Feat_xxx 分支
  3. 提交代码
  4. 新建 Pull Request

空文件

简介

基于layui实现的步骤进度条 展开 收起
JavaScript 等 3 种语言
MIT
取消

发行版

暂无发行版

贡献者 (1)

全部

近期动态

6个月前推送了新的提交到 master 分支,372d207...468ef3f
1年多前推送了新的提交到 master 分支,1df5b5d...372d207
1年多前推送了新的提交到 master 分支,5bced41...1df5b5d
1年多前推送了新的提交到 master 分支,9afed6c...5bced41
1年多前推送了新的提交到 master 分支,e222f5f...9afed6c
加载更多
不能加载更多了
马建仓 AI 助手
尝试更多
代码解读
代码找茬
代码优化
JavaScript
1
https://gitee.com/honestno1/stepprogress.git
git@gitee.com:honestno1/stepprogress.git
honestno1
stepprogress
stepprogress
master

搜索帮助