步骤条

步骤条组件已经打包为单独的组件,可脱离UI总组件单独使用。
下载组件

默认效果

1
账户信息
2
付款信息
3
确认信息
<div class="ui-step-wrap">
<div class="ui-step-bg"></div>
<div class="ui-step-progress"></div>
<div class="ui-step">
<div class="ui-step-item active">
<div class="ui-step-num">1</div>
<div class="ui-step-title">账户信息</div>
</div>
<div class="ui-step-item">
<div class="ui-step-num">2</div>
<div class="ui-step-title">付款信息</div>
</div>
<div class="ui-step-item">
<div class="ui-step-num">3</div>
<div class="ui-step-title">确认信息</div>
</div>
</div>
</div>

位置

账户信息
1
付款信息
2
确认信息
3
<div class="ui-step-wrap ui-step-bottom">
<div class="ui-step-bg"></div>
<div class="ui-step-progress"></div>
<div class="ui-step">
<div class="ui-step-item active">
<div class="ui-step-title">账户信息</div>
<div class="ui-step-num">1</div>
</div>
<div class="ui-step-item active">
<div class="ui-step-title">付款信息</div>
<div class="ui-step-num">2</div>
</div>
<div class="ui-step-item">
<div class="ui-step-title">确认信息</div>
<div class="ui-step-num">3</div>
</div>
</div>
</div>

颜色

账户信息
1
付款信息
2
确认信息
3

账户信息
1
付款信息
2
确认信息
3

账户信息
1
付款信息
2
确认信息
3

账户信息
1
付款信息
2
确认信息
3
<div class="ui-step-wrap ui-step-bottom ui-step-red">
<div class="ui-step-bg"></div>
<div class="ui-step-progress"></div>
<div class="ui-step">
<div class="ui-step-item active">
<div class="ui-step-title">账户信息</div>
<div class="ui-step-num">1</div>
</div>
<div class="ui-step-item">
<div class="ui-step-title">付款信息</div>
<div class="ui-step-num">2</div>
</div>
<div class="ui-step-item">
<div class="ui-step-title">确认信息</div>
<div class="ui-step-num">3</div>
</div>
</div>
</div>

<div class="ui-step-wrap ui-step-bottom ui-step-yellow">
<div class="ui-step-bg"></div>
<div class="ui-step-progress"></div>
<div class="ui-step">
<div class="ui-step-item active">
<div class="ui-step-title">账户信息</div>
<div class="ui-step-num">1</div>
</div>
<div class="ui-step-item active">
<div class="ui-step-title">付款信息</div>
<div class="ui-step-num">2</div>
</div>
<div class="ui-step-item">
<div class="ui-step-title">确认信息</div>
<div class="ui-step-num">3</div>
</div>
</div>
</div>

<div class="ui-step-wrap ui-step-bottom ui-step-green">
<div class="ui-step-bg"></div>
<div class="ui-step-progress"></div>
<div class="ui-step">
<div class="ui-step-item active">
<div class="ui-step-title">账户信息</div>
<div class="ui-step-num">1</div>
</div>
<div class="ui-step-item active">
<div class="ui-step-title">付款信息</div>
<div class="ui-step-num">2</div>
</div>
<div class="ui-step-item active">
<div class="ui-step-title">确认信息</div>
<div class="ui-step-num">3</div>
</div>
</div>
</div>

<div class="ui-step-wrap ui-step-bottom ui-step-info">
<div class="ui-step-bg"></div>
<div class="ui-step-progress"></div>
<div class="ui-step">
<div class="ui-step-item active">
<div class="ui-step-title">账户信息</div>
<div class="ui-step-num">1</div>
</div>
<div class="ui-step-item active">
<div class="ui-step-title">付款信息</div>
<div class="ui-step-num">2</div>
</div>
<div class="ui-step-item">
<div class="ui-step-title">确认信息</div>
<div class="ui-step-num">3</div>
</div>
</div>
</div>

Js调用

您的订单已发货
<div id="step-1"></div>
<div id="step-2"></div>
<div id="step-3"></div>
<script>
$(function()
{
$("#step-1").step({data:['下单','付款','发货','收货','完成'],index:1});
$("#step-2").step({data:['下单','付款','发货','收货','完成'],index:2,theme:'red'});
$("#step-3").step({data:['下单','付款','发货','收货','完成'],index:3,theme:'info',align:'bottom','arrow':true});
})
</script>

参数说明

参数 默认值 是否必须 参数说明
data 步骤条数据源,示范:['下单','付款','发货','收货','完成']
index 0 到第几步
theme blue 颜色,可选值:red,yellow,blue,green,info
align top 位置,可选值:bottom
arrow false 是否显示箭头,配合html使用