步骤条

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

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

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

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