导读

　　本文主要介绍了步骤条的实现原理以及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，不能很好地封装一些效果。

步骤条的实现原理及AliceUI中步骤条Step的应用相关推荐

执行计划分析一条sql语句的效率 mysql_MySQL中一条SQL语句的执行过程
MySQL中一条SQL语句的执行过程发布时间:2018-11-24 18:35, 浏览次数:390 , 标签: MySQL SQL 查询语句的执行顺序: 1.客户端通过TCP连接发送连接请求到mys ...
MySQL主从复制原理、半同步操作步骤及原理
MySQL主从复制原理.半同步操作步骤及原理 1.1 企业Linux运维场景数据同步方案 1.1.1 文件级别的异机同步方案 1.scp/sftp/nc 命令可以实现远程数据同步. 2.搭建ftp/h ...
moead算法流程步骤_匈牙利算法原理与实现
本文介绍了匈牙利算法的计算流程和代码实现,欢迎各位抛砖.原理部分正在整理中... 分配问题分配问题涉及将机器分配给任务,将工人分配给工作,将足球运动员分配给职位等. 目标是确定最佳分配,例如,使总成 ...
中断工作原理在现代计算机中的应用,中断、DMA、通道
一.轮询方式对I/O设备的程序轮询的方式,是早期的计算机系统对I/O设备的一种管理方式.它定时对各种设备轮流询问一遍有无处理要求.轮流询问之后,有要求的,则加以处理.在处理I/O设备的要求之后,处理 ...
【MySQL专题】MySQL中一条SQL是如何被执行的？---来自于令狐的独孤九剑
[MySQL专题]MySQL中一条SQL是如何被执行的? 前言大家好,我是令狐,欢迎来到令狐的独孤九剑**[MySQL专题]**这节课跟大家聊一聊MySQL中一条SQL是如何被执行的. MySQ ...
【Linux服务器开发】1.4 布隆过滤器-判断海量数据中某条数据是否存在
目录 0.链接 1.问题的引入 2.看看是否有可供选择的数据结构来帮助我们判断在海量数据中某条数据是否存在 2.1 红黑树 2.1.1 从时间来分析 2.1.2 从空间来分析 2.2 哈希表 2.2 ...
NLP之WE之CBOWSkip-Gram：CBOWSkip-Gram算法概念相关论文、原理配图、关键步骤之详细攻略
NLP之WE之CBOW&Skip-Gram:CBOW&Skip-Gram算法概念相关论文.原理配图.关键步骤之详细攻略目录 CBOW&Skip-Gram算法相关论文 CBOW ...
python程序中每条语句以分号结尾,在Python程序中,每条语句末尾必须添加分号。...
在Python程序中,每条语句末尾必须添加分号. 更多相关问题组织沟通就是在组织结构环境下的( )的交流过程,它涉及战略控制以及如何在创造力和约束力之间达到平衡. (2019考前训练1)启运港填写_ ...
计算机在流体力学中的应用,流体力学原理在游泳中的应用
流体力学原理在游泳中的应用 (2006-03-20 15:35:56) 流体力学原理在游泳中的应用水的自然特性与人体的飘浮能力凡涉及水环境的运动项目,参与者都不可忽视水的一条最为重要的自然属性―― ...

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

导读

基本原理

Alice UI Step

总结

步骤条的实现原理及AliceUI中步骤条Step的应用相关推荐

最新文章

热门文章