纯html+css+jq实现流程图

最新推荐文章于 2022-10-29 08:50:43 发布
最新推荐文章于 2022-10-29 08:50:43 发布
阅读量4.1k 收藏 8
点赞数 3
分类专栏： 一些demo
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/HuangsTing/article/details/102516905
版权

效果图：

注：每个节点的宽高都已做了自适应处理
在这里插入图片描述
完整代码如下：（记得导入jQuery包）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>流程图</title>
    <script src="../assets/lib/jQuery.js"></script>
</head>
<body>
<ul id="process-list" class="process-list">
    <li class="node process-start">
        <div class="left">
            <p style="margin-bottom: 5px">开始</p>
            <div class="pot"></div>
        </div>
    </li>
    <li class="node process-node cur">
        <div class="left">
            <div class="platform" title="">节点1</div>
        </div>
        <div class="middle">
            <div class="line"></div>
        </div>
        <div class="right-l">
            <p class="type">审批方式xx</p>
            <table class="node-table">
                <thead>
                <tr>
                    <td style="max-width: 190px;">审批单位</td>
                    <td style="max-width: 90px">审批人</td>
                    <td>审批状态</td>
                    <td>时间</td>
                </tr>
                </thead>
                <tbody>
                <tr>
                    <td style="max-width: 190px" title="">文本文本文本文本文本</td>
                    <td style="max-width: 90px" title="">张三</td>
                    <td>待审批</td>
                    <td>2019-10-12 12:30:30</td>
                </tr>
                <tr>
                    <td style="max-width: 190px" title="">文本文本文本</td>
                    <td style="max-width: 90px" title="">张三三</td>
                    <td>待审批</td>
                    <td>-</td>
                </tr>
                </tbody>
            </table>
            <div class="current">当前节点</div>
        </div>
    </li>
    <li class="node process-node wait">
        <div class="left">
            <div class="platform" title="">节点2</div>
        </div>
        <div class="middle">
            <div class="line"></div>
        </div>
        <div class="right-l">
            <p class="type">审批方式xx</p>
            <table class="node-table">
                <thead>
                <tr>
                    <td style="max-width: 190px">审批单位</td>
                    <td style="max-width: 90px">审批人</td>
                    <td>审批状态</td>
                    <td>时间</td>
                </tr>
                </thead>
                <tbody>
                <tr>
                    <td style="max-width: 190px" title="">文本文本文</td>
                    <td style="max-width: 90px" title="">张三</td>
                    <td>待审批</td>
                    <td>-</td>
                </tr>
                </tbody>
            </table>
        </div>
    </li>
    <li class="node process-node wait">
        <div class="left">
            <div class="platform" title="">节点3</div>
        </div>
        <div class="middle">
            <div class="line"></div>
        </div>
        <div class="right-l">
            <p class="type">审批方式xx</p>
            <table class="node-table">
                <thead>
                <tr>
                    <td style="max-width: 190px">审批单位</td>
                    <td style="max-width: 90px">审批人</td>
                    <td>审批状态</td>
                    <td>时间</td>
                </tr>
                </thead>
                <tbody>
                <tr>
                    <td style="max-width: 190px" title="">文本文本文本文本文本</td>
                    <td style="max-width: 90px" title="">张三</td>
                    <td>待审批</td>
                    <td>-</td>
                </tr>
                <tr>
                    <td style="max-width: 190px" title="">文本文本文本文本文本</td>
                    <td style="max-width: 90px" title="">张三</td>
                    <td>待审批</td>
                    <td>-</td>
                </tr>
                </tbody>
            </table>
        </div>
    </li>
    <li class="node process-end wait">
        <div class="left">
            <div class="pot"></div>
            <p style="line-height: 24px">流程结束</p>
        </div>
    </li>
</ul>

<style>
    p{
        margin: 0;
    }
    .process-list{
        font-size: 0;
        width: 950px;
        margin: 0 auto;
    }
    .process-list li{
        position: relative;
    }
    .process-list li.node{
        margin-bottom: 60px;
    }
    .process-list li.line{
        height: 80px;
    }
    .process-start,.process-end{
        height: 36px !important;
    }
    .process-start p,.process-end p{
        font-size: 14px;
    }
    .process-list li div.pot{
        display: inline-block;
        width: 12px;
        height: 12px;
        border-radius: 20px;
        border: 1px solid #333;
        background: #fff;
    }
    .process-list li.line div.line{
        display: inline-block;
        height: 80px;
        width: 2px;
        border-left: 1px solid #333;
        margin-left: 1px;
    }
    .process-list li div.left{
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        left: 0;
        display: inline-block;
        width: 400px;
        text-align: center;
        z-index: 9;
    }
    .process-list li.process-node div.right-l:before{
        content: '';
        position: absolute;
        bottom: 50%;
        left: 199px;
        width: 1px;
        height: 50%;
        background: #333;
        padding-top: 60px;
    }
    .process-list li.process-end div.left{
        position: absolute;
        top: 0 !important;
        transform: translateY(0) !important;
    }

    .process-list li.process-end div.left:before{
        content: '';
        position: absolute;
        bottom: 35px;
        left: 199px;
        width: 1px;
        height: 65px;
        background: #333;
    }

    .process-list li.process-node div.right-l:after{
        content: '';
        position: absolute;
        top: 50%;
        left: 199px;
        width: 1px;
        height: 50%;
        background: #333;
    }

    .process-list li div.middle{
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        left: 199px;
        display: inline-block;
        width: 250px;
        height: 40px;
        line-height: 40px;
        text-align: center;
        z-index: 1;
    }
    .process-list li div.right-l{
        margin-left: 450px;
        z-index: 1;
        background: #fff;
    }
    .process-list li div.right-l p{
        font-size: 14px;
        padding: 5px 25px;
    }

    .node-table{
        font-size: 14px !important;
        border: 1px solid #333;
    }
    .node-table thead{
        font-weight: bold;
    }
    .node-table td{
        padding: 5px 10px;
        vertical-align: top;
    }

    .process-list li div.right-l div.current{
        font-size: 14px;
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        left: -44px;
        color: red;
    }
    .process-list li div.right-l div.current::before{
        content: '';
        width: 14px;
        height: 14px;
        /*background: url("../../assets/img/icon_arrow_right.png") no-repeat;*/
        background-size: 14px 14px;
        position: absolute;
        top: 3px;
        right: -25px;
    }
    .process-list li div.right-l p.type{
        position: absolute;
        top: -30px;
        left: 430px;
    }
    .process-list li div.middle div.line{
        display: inline-block;
        width: 250px;
        height: 1px;
        text-align: center;
        border-top: 1px dashed #333;
    }
    .process-list li.process-node div.platform{
        max-width: 300px;
        box-sizing: border-box;
        display: inline-block;
        padding: 10px 15px;
        border: 1px solid #333;
        border-radius: 999px;
        font-size: 14px;
        background: #fff;
        overflow: hidden;
        word-wrap: break-word;
        /*white-space: nowrap;*/
    }

    .process-list li.cur div.right-l:after{
        background: #bbbaba;
    }
    .process-list li.wait{
        color: #bbbaba;
    }
    .process-list li.wait div.platform{
        border-color: #bbbaba;
    }
    .process-list li.wait div.line{
        border-color: #bbbaba;
    }
    .process-list li.wait div.middle div.line{
        border-color: #bbbaba;
    }
    .process-list li.wait div.right-l>table{
        border-color: #bbbaba;
    }
    .process-list li.wait div.right-l:before{
        background: #bbbaba;
    }
    .process-list li.wait div.right-l:after{
        background: #bbbaba;
    }
    .process-list li.wait div.left:before{
        background: #bbbaba;
    }
    .process-list li.wait div.pot{
        border-color: #bbbaba;
    }
    .process-list li p.simple{
        color: #bbbaba;
    }
</style>

<script>
    //未进行的流程置灰
    $('#process-list li.cur').nextAll().addClass('wait');
    //当前节点添加说明
    $('#process-list li.cur').find('.right-l').append('<div class="current">当前节点</div>');
</script>
</body>
</html>
hst❀
关注
  • 3
    点赞
  • 踩
  • 8
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
html实现原理和流程图,原生js+div+css，动态画结构图/流程图
weixin_29415575的博客
06-01 1908
前面用highchart尝试画了一次，但是因为种种因素，还是用js+div+css实现起来比较方便。代码如下，可直接复制粘贴。html部分：content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">动态绘制结构图* {margin: 0;pad...
html制作课程导航页面,学成在线页面制作（HTML+CSS部分）（顶部+轮播图部分）...
weixin_29717875的博客
06-04 1710
学成在线页面制作(HTML+CSS部分)(顶部+轮播图部分)成品截图前期准备素材一、项目页面PSD源文件二、前期准备工作三、CSS属性书写顺序四、布局分析五、布局流程开始页面制作头部制作banner制作左侧导航栏课程表模块源代码下载成品截图 前期准备素材一、项目页面PSD源文件下载地址https://chuenst.lanzous.com/i7hlggnl6vc二、前期准备工作 创建study目...
基于HTML5流程图绘制代码
03-11
实现流程图绘制、拓扑图等自定义绘制功能，具有丰富的的图形选择。
html实现原理和流程图,html5实现流程图
weixin_29952235的博客
06-01 2352
以前在IE盛行，微软一家独大的时候，web绘图功能首选就是VML，IE5.0以上的版本都支持VML，VML可以在IE中通过文本的方式绘制矢量图像，类似在html页面中实现了画笔的功能，所以被很多人采用来实现web流程设计器。随着手机，ipad等各种移动设备的升级，越来越多的应用要求支持这些移动设备。很可惜VML只支持IE，手机和ipad大部分是chrome和safari，不支持VML，web绘制流...
审批流程html.zip
03-08
使用html+css+js实现流程图设计，无需其他任何插件，可随意在任何位置添加节点或者条件，操作方便，无需定位。
html流程图
qq_45432865的博客
08-03 3214
HTML总结流程图
基于JQUERY的WEB在线流程图设计器GOOFLOW 0.3版
sdlddr
04-28 364
 跨浏览器，可兼容IE7--IE10， FireFox， Chrome， Opera等几大内核的浏览器，且不需要浏览器再加装任何控件。  多系统兼容性、可移植性:由于只包括前台UI,因此二次开发者可很方便将本插件用在任何一种需要流程图的B/S系统应用上，流程图的详细实现逻辑完全交于后台程序开发者自己实现;对于后台,只要能返回/接收能被本插件解析的JSON格式数据即可.所以本插件可用于不同的...
html css画流程图,css canvas 绘制流程图(1)
weixin_31124163的博客
06-09 2207
//1.引入js//画流程图//画所有的图形：画图和画对应的箭头function drawFlowChart(context, canvas, flowdata, initTop, initSpaceH) {//1、判断是否有需要平均计算x的数据flowdata.forEach(function (row) {if (row.isAverage) {row.data = calChartX(can...
最近做的排班表，整个表格全JS动态生成，用了很多Jquery的库，4个主要页面
weixin_30883311的博客
05-28 1277
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <h...
html + jquery 原生开发ToDo网页
编程书生的博客
08-06 604
html + jquery 原生开发ToDo网页 相信做前端的大家都见过这个网页吧 TodoMVC Vue的入门网页 今天我用原生html实现一下 首先看一下html部分的代码： <html> <head> <meta charset="utf-8"> <title>幸运记事</title> <link...
jquery的很好的一个例子，绘制流程图的例子。
12-10
jquery的很好的一个例子，是一个jquery绘制流程的一个例子。
JQuery流程图
05-11
JQuery流程图,绝对给力，里面包含三个不同的流程图，可以自己定制修改 1.flow 2.processDesigner 3.proctool
jQuery插件开发精品教程，让你的jQuery提升一个台阶1
weixin_33845477的博客
10-14 166
2019独角兽企业重金招聘Python工程师标准>>> ...
工作流流程图树结构HTML+CSS
包子源的博客
11-30 2718
工作流流程图树结构
审批流程展示html,审批流程图怎么绘制?不懂可以看这里
weixin_39949473的博客
06-09 1354
审批流程图怎么绘制?不懂可以看这里审批流程图怎么绘制？审批流程是指为某个详细的业务单据或业务类型，依次按照流程传递和审批一系列的过程。比如职场中，企业签订合同、发票报销、员工请假等，需要走审批流程。不同类型的业务涉及到的负责人不同，通过流程图可以降低记录分配，省去任务指派中不必要的环节，从而帮助企业提高工作效率。完整的审批流程图包含一套完整的审批流程包含四个部分：流程名称、具体步骤、步骤反复和流程...
css流程图
qq_45432865的博客
08-04 1698
css3总结流程图 css2总结流程图
审批流程展示html,Web企业在线审批流程系统
weixin_34670892的博客
06-09 787
每天记录学习，每天会有好心情。*^_^*最近了解了基于Web的企业在线审批流程系统项目，在这个平台记录一下这个基于Web的企业在线审批流程系统项目，方便以后再次使用或学习的时候能够及时的翻阅。在完成基于Web的企业在线审批流程系统项目的时候，考虑了很多框架。最终决定选用SSM(MYECLIPSE)，该框架具有极强的移植性，多平台性，便于操作性等优点。此框架能在MYECLIPSE开发工具中完美的编写...
使用html+css实现一个静态页面（含源码）
最新发布
HTML网页设计 专注大学生网页设计
10-29 1144
1 网页简介：此作品为学生个人主页网页设计题材，HTML+CSS 布局制作,web前端期末大作业,大学生网页设计作业源码，这是一个不错的网页制作，画面精明，代码为简单学生水平, 非常适合初学者学习使用。2.网页编辑：网页作品代码简单，可使用任意HTML编辑软件（如：Dreamweaver、HBuilder、Vscode 、Sublime 、Webstorm、Text 、Notepad++ 等任意html编辑软件进行运行及修改编辑等操作）。3.知识应用：技术方面主要应用了网页知识中的: Div+CSS、鼠标滑
HTML+CSS实现审核流程步骤效果
G19931112的博客
06-15 2898
效果图如下 每一个结点写一个div body{ margin: 10px; padding: 10px; background-color: #EEEEEE; } .progess-bar{ with: 100%; height: 100px; } .ball{ width: 20px; height: 20px; b...
2022最新html5+css3笔记
抗争小青年的博客
02-20 5886
博主自己学习css3+html5时所记录的笔记，以及练习的大厂项目的资料分享，希望可以帮助到大家。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值