用html+css+jQuery制作一个简单的流程图/步骤图

  1. 首先在页面内需要呈现的区域创建一个容器,用来之后append新元素。
     
        
  2. 获取需要的流程数据,我这里定义一个假数据。
    var arr = ["前处理生产指令", "前处理", "批生产指令", "中间产品递交单", "阿胶提取粗滤", "胶液分离浓缩", "总混", "流程1", "流程2", "流程3", "流程4", "流程5", "流程6", "流程7", "流程8", "流程9", "流程10", "流程11"];
  3. jQuery部分,循环遍历数组,每遍历一次创建一个html片段,并插入当前行,这里做的if判断,每生成5个自动换行,然后继续插入。
    // 循环生成步骤项
          $(arr).each(function (index, item) {
            // 第一个或者每循环6个,在尾部生成一行新的ul标签,也就是每5个一行
            if (index == 0 || index % 5 == 0) {
              $(".container").append("
      "); } // 生成固定的html片段$new var $new = $(`
    • ${index + 1}

      ${item}

    • `); // 每遍历一次,就往当前文档中最后一个ul下的尾部添加进去一个$new $(`ul:last-of-type`).append($new); // 此处还需要放入虚线部分代码 });
    • 创建一条虚线,加在每个元素之前,如果元素在当前行第一位,则不加虚线。
      // 创建一条虚线
              var $line = $(`
      `); // 判断:如果是当前行第一个元素,元素前不加虚线,如果不是第一个,在元素前加虚线 if (index % 5 != 0 && index > 0) { $new.before($line); }
    • 第3步+第4步合并起来
      $(function () {
            // 数据
            var arr = ["前处理生产指令", "前处理", "批生产指令", "中间产品递交单", "阿胶提取粗滤", "胶液分离浓缩", "总混", "流程1", "流程2", "流程3", "流程4", "流程5", "流程6", "流程7", "流程8", "流程9", "流程10", "流程11"];
            // 循环生成步骤项
            $(arr).each(function (index, item) {
              // 第一个或者每循环6个,在尾部生成一行新的ul标签,也就是每5个一行
              if (index == 0 || index % 5 == 0) {
                $(".container").append("
        "); } // 生成固定的html片段$new var $new = $(`
      • ${index + 1}

        ${item}

      • `); // 每遍历一次,就往当前文档中最后一个ul下的尾部添加进去一个$new $(`ul:last-of-type`).append($new); // 创建一条虚线 var $line = $(`
        `); // 判断:如果是当前行第一个元素,元素前不加虚线,如果不是第一个,在元素前加虚线 if (index % 5 != 0 && index > 0) { $new.before($line); } }); });
      • CSS部分
              ul {
                display: flex;
              }
              li {
                display: flex;
                list-style: none;
                position: relative;
              }
              .item {
                width: 120px;
                height: 100px;
                text-align: center;
                position: relative;
                margin: 0 auto;
              }
              .line {
                border-bottom: 1px dashed rgba(3, 2, 2, 0.7);
                width: 120px;
                align-self: center;
                position: relative;
                top: -50px;
              }
              .shell {
                height: 200px;
                position: relative;
              }
              .content {
                width: 200px;
                height: 100px;
                text-align: center;
                position: absolute;
                left: -50%;
                margin-left: 25px;
                display: flex;
                align-items: center;
                justify-content: center;
              }

        这是效果图:用html+css+jQuery制作一个简单的流程图/步骤图_第1张图片

         这里的button按钮是我为了测试样式瞎写的,大家后面根据自己的需求更改。


        这是一个非常简单明了的流程图,虽然有一点丑 :) 

              希望能帮到有需要的人, 如果有问题可以给我留言 :)

      你可能感兴趣的:(css,html,html5,jquery)