给 layui 扩展一个 steps 步骤组件

分享 未结
8 2434
weijer
weijer VIP2 2017-12-26
悬赏:20飞吻
【效果预览】

【说明 】最近做项目需要steps组件,然后阿里云steps样式好看索性自己弄了个!
【依赖 】JQ
【使用说明】
1. 在layui文件夹下面添加config.js
layui.config({
base: 'layui/extend/'
}).extend({
steps:"steps/steps"
});
2. 使用方法
加载样式文件
<link rel="stylesheet" href="layui/extend/steps/style.css">
html代码
<div id="step_demo" class="step-body">
<div class="step-header" style="width:80%;overflow: hidden;">
<ul>
<li>
<span class="step-name">填写申请表</span>
</li>
<li>
<span class="step-name">上传资料</span>
</li>
<li>
<span class="step-name">待确认</span>
</li>
<li>
<span class="step-name">已确认</span>
</li>
<li>
<span class="step-name">待受理</span>
</li>
<li>
<span class="step-name">已受理</span>
</li>
<li>
<span class="step-name">预约完成</span>
</li>
<li>
<span class="step-name">签证单已发放</span>
</li>
</ul>
</div>
<div class="step-content">
<div class="step-list">填写申请表</div>
<div class="step-list">上传资料</div>
<div class="step-list">待确认</div>
<div class="step-list">已确认</div>
<div class="step-list">待受理</div>
<div class="step-list">已受理</div>
<div class="step-list">预约完成</div>
<div class="step-list">签证单已发放</div>
<div class="step-list">完成</div>
</div>

</div>
js代码
layui.use(['jquery', 'steps'], function(){

var $ = layui.$;

var $step= $("#step_demo").step();

$("#preBtn").click(function(event) {
$step.preStep();//上一步
});
$("#nextBtn").click(function(event) {
$step.nextStep();//下一步
});
$("#goBtn").click(function(event) {
$step.goStep(3);//到指定步
});
});
3. 下载地址
https://github.com/weijer/layui-steps
代码在extend里面!!!
回帖
本帖已设置禁止回复