步骤条的实现原理及AliceUI中步骤条Step的应用

导读

　　本文主要介绍了步骤条的实现原理以及Alice UI 的步骤条step的使用方法。

基本原理

　　首先看看从网上找的步骤条：


　　



　　三种状态：



已经完成的状态(done)

当前正在进行的状态(current)

未完成的状态(default)



实现思路:


　　我们可以针对这三种状态给HTML的列表标签li，设置不同的css样式。


　　不带箭头指向的步骤条的css样式：


　　

.flow_steps ul li { list-style-type:none;height:23px;float:left; padding:0 40px 0 30px; line-height:23px; text-align :center; background-color:#E4E4E4; font-weight:bold;}
.flow_steps ul li.done {background-color:#FFEDA2; }
.flow_steps ul li.current_prev {background-color:#FFEDA2;  }
.flow_steps ul li.current {color:#fff;background-color:#990D1B;   }
.flow_steps ul li.last {}

　　这里关键地方是设置每个li：list-style-type:none;float:left；这样就可以去掉每个列表项之前的圆点，并能够横向排列。其他的设置就是为不同的步骤条状态设置不同的背景颜色。默认是灰色。


　　带箭头指向的步骤条的css样式：


　　这里就要通过一个背景图片的设置而发挥强大功能了。


　　



　　从上图中可以看出，前四步的li都有背景图片，而且背景图片都在每个li的最右边。

　　但是每个li的背景图片是不相同的，有的是***，有的是红色的，还有的是灰色的。这是怎么做到的？

　　　　　　　　　　　　　　



　　其实是通过背景图片在垂直方向上的位置偏移量决定的。默认显示的灰色。


　

.flow_steps ul li { list-style-type:none;float:left; height:23px; padding:0 40px 0 30px; line-height:23px; text-align:center; background:url(barbg.png) no-repeat 100% 0 #E4E4E4; font-weight:bold;}
.flow_steps ul li.done { background-position:100% -46px; background-color:#FFEDA2;}
.flow_steps ul li.current_prev { background-position:100% -23px; background-color:#FFEDA2;}
.flow_steps ul li.current { color:#fff; background-color:#990D1B;}
.flow_steps ul li.last { background-image:none;}

　　background:url(barbg.png) no-repeat 100% 0 #E4E4E4;

分别表示:background-image；background-repeat；background-position；background-color


　　以上内容参考：　多步骤进度条的实现原理及代码

　

　　通过以上内容我们就可以轻松地完成步骤条的样式了。现在我们来开阔一些眼界。

Alice UI Step

　　Alice UI Step


　　Alice UI:网页前端样式开源开发平台，是支付宝前端样式解决方案小组的项目代称。

　　Alice UI使用了 iconfont 和 CSS3 技术,通用样式模块一律不使用背景图片来实现， 而是使用了 iconfont 和渐进增强的 CSS3 技术。不使用图片的另一个好处是可以在页面中大胆使用通用模块而不用担心请求数过多影响性能。






使用方式：

　　1.下载依赖的样式文件


　　



　　

　　2.编写html，并引入相应的文件（共有５种样式）　　　

@*步骤条需要的文件*@
@* AliceUI基础样式 *@
<link href="../../Content/base-master/src/base.css" rel="stylesheet" />
@* 步骤条样式 *@
<link href="../../Content/step-master/step.css" rel="stylesheet" />
@*AliceUI图标字体*@
<link href="../../Content/iconfont-master/index.css" rel="stylesheet" />

@*步骤区域 *@
<div >
    @*步骤条*@
    <ol class="ui-step ui-step-6">
        <li id="li1" class="ui-step-start ui-step-active">
            <div class="ui-step-line">-</div>
            <div id="d1" class="ui-step-icon">
                <i class="iconfont"></i>
                <i class="ui-step-number">1</i>
                <span class="ui-step-text">选择考试</span>
            </div>
        </li>
        <li id="li2" class="ui-step-line">
            <div class="ui-step-line">-</div>
            <div class="ui-step-icon">
                <i class="iconfont"></i>
                <i class="ui-step-number">2</i>
                <span class="ui-step-text">绑定考场</span>
            </div>
        </li>
        <li id="li3" class="ui-step-line">
            <div class="ui-step-line">-</div>
            <div class="ui-step-icon">
                <i class="iconfont"></i>
                <i class="ui-step-number">3</i>
                <span class="ui-step-text">绑定时间</span>
            </div>
        </li>
        <li id="li4" class="ui-step-line">
            <div class="ui-step-line">-</div>
            <div class="ui-step-icon">
                <i class="iconfont"></i>
                <i class="ui-step-number">4</i>
                <span class="ui-step-text">绑定考生</span>
            </div>
        </li>
        <li id="li5" class="ui-step-line">
            <div class="ui-step-line">-</div>
            <div class="ui-step-icon">
                <i class="iconfont"></i>
                <i class="ui-step-number">5</i>
                <span class="ui-step-text">监考教师</span>
            </div>
        </li>
        <li id="li6" class="ui-step-end">
            <div class="ui-step-line">-</div>
            <div class="ui-step-icon">
                <i class="iconfont"></i>               
                <i class="ui-step-number">6</i>
                <span class="ui-step-text">绑定试卷</span>
            </div>
        </li>
    </ol>
</div>
<div>
    <input id="btnBack" type="button" value="上一步" />
    <input id="btnNext" type="button" value="下一步" />
</div>

ui-step-5：总共有5个步骤

ui-step-start ：头结点

ui-step-line ：未完成结点

ui-step-done ：已完成结点

ui-step-active：正在进行结点

ui-step-blue ：步骤条颜色为蓝色，默认为橘红色




js效果

　　点击上一步下一步按钮改变步骤条状态样式：

　　需要给每一个li设置一个id，如li1

//将一个结点样式由活动样式转化为已完成样式
        $('#li1').removeClass("ui-step-active");
        $('#li1').addClass("ui-step-done");
        //将一个结点样式由未完成样式转化为当前活动节点样式
        $('#li2').removeClass("ui-step-line");
        $('#li2').addClass("ui-step-active");

　　点击上一步下一步按钮跳转页面：

　　思路一：将每个页面做成部分视图，控制部分视图的显示和隐藏。

　　思路二：在每个页面都添加一遍步骤条，这样每个页面上步骤条的状态是固定的，然后通过window.location.href调转下一个页面，通过history.go(-1)返回上一个页面。


代码下载


　　步骤条Demo

总结

复习了css的知识，通过应用实践，加深了印象。

接触了Alice UI和iconfont这种技术，开阔了眼界，希望以后自己能根据它的开发规范，编写自己的一套样式。

js技术很low，不能很好地封装一些效果。