前端流程图、步骤导向图的设计

实现效果如下：

主要用到了jquery的一个step插件，但是调试过程中发现好多控件会存在版本不支持的问题，是故重新调整了其结构方实现该功能（童叟无欺）。

别的不多说，先上代码

HTML部分：

<div class="div_head">
        <div style="height:40px;"></div>
        <div id="step"></div>
    </div>
    <div class="menubox">
        <div id="menustep1" class="ui_0">
            <span>菜单级别：</span>
            <select name="" id="">
                <option value="1">一级</option>
                <option value="2">二级</option>
            </select>
        </div>
        <div id="menustep2" class="tab_active ui_1">
            <span>菜单名称：</span>
            <input type="text" name="" value="" placeholder="">
        </div>
        <div id="menustep3" class="tab_active ui_2">
            <span>菜单路径：</span>
            <input type="text" name="" value="" placeholder="">
        </div>
    </div>

JS部分：现在主功能区调用stepaction();方法，主要是绘制流程导向图，这个和插件js想关联，经研究发现该插件的。toStep方法存在问题，因此下一步上一步的流程在自己的js中实现了，下面一起贴出供您理解：

1.方法调用模块：

$(function(){
    stepaction();
})

2.插件js模块

!function(i){i.fn.step=function(e){var t=this,n={index:0,time:400,title:[]},s=(e=i.extend({},n,e)).title,d=s.length,u=e.time,p=t.width()/d;t.index=e.index;var a=function(){var e="";s.length>0&&(e+='<div class="ui-step-wrap"><div class="ui-step-bg"></div><div class="ui-step-progress"></div><ul class="ui-step">',i.each(s,function(i,t){e+='<li class="ui-step-item"><div class="ui-step-item-title">'+t+'</div><div class="ui-step-item-num"><span>'+(i+1)+"</span></div></li>"}),e+="</ul></div>"),t.append(e),t.find(".ui-step").children(".ui-step-item").width(p),t.toStep(t.index)};return t.toStep=function(e){var n=t.find(".ui-step").children(".ui-step-item");t.index=e,t.find(".ui-step-progress").animate({width:p*(e+1)},u,function(){i.each(n,function(t){t>e?i(this).removeClass("active"):i(this).addClass("active")})})},t.getIndex=function(){return t.index},t.nextStep=function(){t.index>d-2||(t.index++,t.toStep(t.index))},t.prevStep=function(){t.index<1||(t.index--,t.toStep(t.index))},a(),this}}(jQuery);

3.自定义功能区

//流程图方法集合start
var currentIndex = 0;
var maxIndex = 2;
function stepaction(){
    var $step = $("#step");
    $step.step({
        index: 0,
        time: 500,
        title: ["菜单级别", "菜单名称", "菜单路径"]
    });
}
function pre(){
    debugger;
      currentIndex--;
      currentIndex =  currentIndex < 0 ? 0 : currentIndex;
      if(currentIndex == 0){
          $("#preBtn").addClass("layui-btn-disabled");
      }else{
          $("#preBtn").removeClass("layui-btn-disabled");
      }
      $(".ui-step li:nth-child("+(currentIndex+2)+")").removeClass('active');
      /*$(".ui-step li:nth-child("+(currentIndex+1)+")").addClass('active');*/
      var length1 = $(".ui-step-item").width()*(currentIndex+1);
      $(".ui-step-progress").animate({width:length1+"px"});
      $("#nextBtn").html("&nbsp;下一步 &nbsp;&gt;&nbsp;");
      changeUI();
}
function changeUI(){
      if(currentIndex == 1){

      }else if(currentIndex == 2){

      }
      $("[class*=ui_]").each(function (i){
          $(this).addClass("tab_active");
      })
      $("[class*=ui_"+currentIndex+"]").removeClass("tab_active");
}
function next(){
      currentIndex++;
      // 保存
      if(currentIndex > maxIndex){
          currentIndex = maxIndex;
          doSave(this);
      }else{
        debugger;
        var $step = $("#step");
        $(".ui-step li:nth-child("+(currentIndex+1)+")").addClass('active');
        var length1 = $(".ui-step-item").width()*(currentIndex+1);
        $(".ui-step-progress").animate({width:length1+"px"});
      }
      if(currentIndex == maxIndex){
          $("#nextBtn").html("&nbsp;&nbsp;提&nbsp;&nbsp;交&nbsp;&gt;&nbsp;");
      }else{
          $("#nextBtn").html("&nbsp;下一步 &nbsp;&gt;&nbsp;");
      }
      $("#preBtn").removeClass("layui-btn-disabled");
      changeUI();
}
function doSave(){

}
//流程图end

主要功能就是上一步下一步的逻辑

CSS部分：

body,
div,
ul,
li {
    margin: 0;
    padding: 0;
}

body {
    font-family: "微软雅黑";
}

.ui-step-wrap {
    position: relative;
}

.ui-step-wrap .ui-step-bg,
.ui-step-wrap .ui-step-progress {
    height: 6px;
    position: absolute;
    top: 40px;
    left: 0;
}

.ui-step-wrap .ui-step-bg {
    width: 100%;
    background: #ddd;
}

.ui-step-wrap .ui-step-progress {
    width: 0;
    background: #4682B4;
}

.ui-step-wrap .ui-step {
    position: relative;
    z-index: 1;
    list-style: none;
}

.ui-step-wrap .ui-step:after {
    content: '';
    display: table;
    clear: both;
}

.ui-step-wrap .ui-step .ui-step-item {
    float: left;
}

.ui-step-wrap .ui-step .ui-step-item div {
    text-align: center;
    color: #625454;
}

.ui-step-wrap .ui-step .ui-step-item .ui-step-item-num {
    margin-top: 8px;
}

.ui-step-wrap .ui-step .ui-step-item .ui-step-item-num span {
    display: inline-block;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: #dad9d9;
}

.ui-step-wrap .ui-step .ui-step-item.active .ui-step-item-num span {
    color: #fff;
    background: #4682B4;
}

主要针对其中的几个模块去了解，其实该绘制流程图主要就是两个模块，

第一部分：划线条，定位圆圈；

第二部分：触发流程动作（动态效果，CSS3的2d转换特性transform: translate(0,-50%);jquery的animate()方法执行 CSS 属性集的自定义动画）。

有不当之处望提出宝贵意见以供学习

前端流程图、步骤导向图的设计

推荐阅读