基于layui的步骤条面板

分享 未结 精帖
9 2014
凉宫
凉宫 2018-7-26
悬赏:20飞吻
html元素

<div class="layui-step">
<div class="layui-step-content layui-clear">
<div class="layui-step-content-item">条目1</div>
<div class="layui-step-content-item">条目2</div>
<div class="layui-step-content-item">条目3</div>
<div class="layui-step-content-item">条目4</div>
</div>
<div class="layui-step-btn">
<div class="layui-btn-group">
<button class="layui-btn goFirst">第一步</button>
<button class="layui-btn prev">上一步</button>
<button class="layui-btn next">下一步</button>
<button class="layui-btn goLast">最后一步</button>
<button class="layui-btn goStep">走到第二步</button>
<button class="layui-btn disabled">禁用第三步</button>
<button class="layui-btn abled">解禁第三步</button>
</div>
</div>
</div>

js引用
layui.use(['jquery','step'], function(){
var $ = layui.jquery;
var step = layui.step;
step.render({
elem: '.layui-step',
// title: ["第一步","第二步","第三步","第四步"],
description: ["aaa","bbb","ccc","ddd"],
currentStep: 1,
// canIconClick: true,
isOpenStepLevel: true
});
$(".goFirst").on("click",function() {
step.goFirst();
})
$(".prev").on("click",function() {
step.prev();
})
$(".next").on("click",function() {
step.next();
})
$(".goLast").on("click",function() {
step.goLast();
})
$(".goStep").on("click",function() {
step.goStep(2);
})
$(".disabled").on("click",function() {
step.disabled(3);
})
$(".abled").on("click",function() {
step.abled(3);
})
});

说明
1. 每一个 .layui-step-content-item代表一个tab页面,高度默认最小值为满屏
2. 按扭区默认悬浮固定在右下角,可自行设置,内部的按钮个数可以自定义
3. 按钮禁用与解禁的位置(i)必须在当前步数之后,即禁用时,该位置应尚未走到

step.render()参数说明
1. elem:外层容器
2. title:步骤条下方文字说明,类型为数组,可省略,默认["第一步","第二步","第三步","。。。"]
3. currentStep:初始时是第几步,可省略,默认第一步
4. canIconClick:上方步骤条是否可以点击,可省略,默认false
5. description:步骤条下方描述性文字,类型为数组,可省略
6. isOpenStepLevel:是否严格按照步骤条顺序执行,即未走过的步骤不可点,走过的可点,可省略,若开启则默认canIconClick字段关闭

外部可以使用的函数说明
1. render():初始渲染界面
2. goStep(i):跳到第几步
3. goFirst():跳到第1步
4. goLast():跳到最后1步
5. prev():跳到上一步
6. next():跳到下一步
7. disabled(i):禁用某一步
8. abled(i):解除某一步的禁用

外部可使用的变量说明
1. currentStep:获取当前是第几步

在线demo
github代码

回帖
  • 有个小建议,既然是步骤,那么必须满足步骤的一些基础特征,比如初始的时候只能一步一步走,不能从第一步直接跳到第三第四之类的,这个说的是还没有经过点击下一步打开之前,还没完成这一步的操作就直接点击上面的步骤直接跳,但是如果已经通过下一步打开过了,就应该可以在已经打开过的步骤之间随意跳转了。
    0 回复
  • YtoString
    2018-7-26
    遇到相同问题
    0 回复
  • 凉宫
    2018-7-26
    @岁月小偷 谢谢你的建议,目前还没有用到这个功能,可以考虑一下
    0 回复
  • @hsianglee 嗯嗯,以前项目中也做过类似的,既然是步骤,很常用的场景就是要按步骤来,当然也有不是的,所以建议有一个配置项来决定是否是必须严格要求按步骤来,如果不是感觉就是一个带一点提示信息的tab,如果严格要求,那就必须按照步骤来,执行一步一步的走,走过了才可以任意切换,不然感觉这个步骤有点意义少了一半了哈,虽然只是一个细节。个人见解额。[微笑]
    0 回复
  • boboy
    2018-7-28
    [哈哈] 感谢
    0 回复
  • 追卓
    2018-8-9
    @岁月小偷 说的很对,没有层级顺序完全用不上
    0 回复
  • 阳仔
    2018-8-10
    步骤被禁用了 应该就不能在进行后面的步数了
    0 回复
  • 凉宫
    2018-8-11
    @追卓 已经加上这个功能了
    0 回复
  • 凉宫
    2018-8-11
    @阳仔 步骤被禁用,只是禁用的某一个步骤,为什么后面的不能执行
    0 回复