很久没有写博客了,自从工作忙了就忘了学习新东西,真是越大越懒。

做项目中,需要一个process流程的UI组件,翻遍公司组件和业界框架,都没有满足自适应要求的现成的process组件,只能自己实现。实现的过程中,发现有两个有意思的地方,特此分享出来。

首先看看最后需要的效果:=> 点我查看demo

实现

流程组件中,两个hr构成圆点之间的连接线。

圆点用span 通过 border-raduis: 50%实现。

接下来,第一个难点来了,如何实现 居中 并且 自适应。

自适应的意思是,拉伸浏览器的时候,流程组件也跟着变化长度,并且不变型。那么,我们自然的想到了用百分数设置宽度。

第一张方案:

用 outer 居中, inner平分内部,即每个inner占用 1/7 = 14.2%。内部原点span和文字通过每个inner的text-align:center;居中。

接下来就连接线hr的宽度的计算就成了问题。比如连接线hr的起始位置怎么计算?inner的1/2,也就是1/14=0.071?

第一次inner的1/7就有省略小数点的误差,再一半肯定更有误差,hr的宽度会再乘以2,乘以3,误差会更大,很有可能出现下面的情况:

第二种方案:

要解决节点span长度计算的问题,就必须让其乘以的倍数是精确可计算的。于是:

通过外层outer实现居中,inner+左侧等宽的空白 平分内部宽度,即 1/8=12.5%。

这里又来了另一个问题:如何使下方文字左移自身宽度一半?

父元素设置 text-align: center; ?? 不行,我们的圆点span只能从最左边开始。

自身position: absolute; left: 50%; margin-left: -宽度?不行,自身宽度不知道,变化的。

position: relative; left: -50%?不行,left 百分比是以最近已定位父元素的宽度为参照。

最后解决办法是,增加一层父元素,使父元素宽度为自身宽度。这样left百分比就可以相当于以自身宽度。

最后的效果:

02.06更新

由于是跨部门合作,对方返回的流程状态总是在变,从7个变到5个,从5个变到6个。

7个状态有8个span,这样 1/8 = 12.5

5个是加3个变8,也是12.5。通过margin-left微调。

6个同理,加2变8,通过margin-left微调。

自适应process组件的更多相关文章

  1. 使用Process组件访问本地进程

    实现效果; 知识运用: Process组件的StartInfo属性 //获取或设置要传递给Process的Start方法的属性 public ProcessStartInfo StartInfo {g ...

  2. C#的Process类调用第三方插件实现PDF文件转SWF文件

    在项目开发过程中,有时会需要用到调用第三方程序实现本系统的某一些功能,例如本文中需要使用到的swftools插件,那么如何在程序中使用这个插件,并且该插件是如何将PDF文件转化为SWF文件的呢?接下来 ...

  3. C# - 多线程 之 Process与Thread与ThreadPool

    Process 进程类, // 提供对本地和远程进程的访问,启动/停止本地系统进程 public class Process : Component { public int Id { get; } ...

  4. System.Diagnostics.Process.Star的用法

    System.Diagnostics.Process.Start(); 能做什么呢?它主要有以下几个功能: 1.打开某个链接网址(弹窗). 2.定位打开某个文件目录. 3.打开系统特殊文件夹,如“控制 ...

  5. C# Process.Start()方法详解

    System.Diagnostics.Process.Start(); 能做什么呢?它主要有以下几个功能: 1.打开某个链接网址(弹窗). 2.定位打开某个文件目录. 3.打开系统特殊文件夹,如“控制 ...

  6. Process类

    public bool Process.Start () 启动(或重用)此 Process 组件的 StartInfo 属性指定的进程资源,并将其与该组件关联. public bool Process ...

  7. 详解Bootstrap导航组件

    在bootstrap框架中将导航独立出来成为一个导航组件,根据不同的版本,可以找到相应的源码: LESS:  navs.less SASS:  _navs.scss 标签形导航,也称选项卡导航 标签形 ...

  8. C#使用Process类调用外部程序(转)

    在程序开发中,一个程序经常需要去调用其他的程序,C#中Process类正好提供了这样的功能.它提供对本地和远程进程的访问并使您能够启动和停止本地系统进程.一.启动进程实例 Process myProc ...

  9. C# Process类_进程_应用程序域与上下文之间的关系

    进程(Process)是Windows系统中的一个基本概念,它包含着一个运行程序所需要的资源.进程之间是相对独立的,一个进程无法直接访问另一个进程的数据(除非分布式),一个进程运行的失败也不会影响其他 ...

随机推荐

  1. python识别验证码

    1.tesseract-ocr安装 tesseract-ocr windows下载地址 http://digi.bib.uni-mannheim.de/tesseract/tesseract-ocr- ...

  2. java.util.Calendar简介

    Calendar是一个抽象类,我们无法直接实例化它,它有一个具体子类实体类java.util.GregorianCalendar,这个类实现的就是我们日常所用的公历历法,或者叫做阳历.我们可以直接使用 ...

  3. 微信小程序组件progress

    基础内容progress:官方文档 Demo Code: Page({ data:{ percent:0 }, onReady:function(){ this.percentAdd(); }, pe ...

  4. httpmessageconverter requestbody responsebody

    @ResponseBody @RequestMapping("/testHttpMessageConverter") public String testHttpMessageCo ...

  5. HDU - 6386 Age of Moyu 2018 Multi-University Training Contest 7 (Dijkstra变型)

    题意:N个点M条边的无向图,每条边都有属于自己的编号,如果一条路径上的边编号都相同,那么花费仅为1:改变至不同编号的路径,花费加1,无论这个编号之前是否走过. 分析:记录每个点的最小花费,再用set维 ...

  6. CodeForces - 987D Fair (BFS求最短路)

    题意:有N个城市,M条双向道路连接两个城市,整个图保证连通.有K种物品,但每个城市只有一种,现在它们都需要S种物品来举办展览,可以去其他城市获取该城市的物品,花费是两城市之间的最短路径长度.求每个城市 ...

  7. dojo 代码调试

    安装 Firebug 使用firedug

  8. 做为 Apple Store App 独立开发者,你要搞限时促销,为你的应用生成激活码(或者优惠券),使用 Python 如何生成 200 个激活码(或者优惠券)?

    import random import string def GenKey(length): chars = string.ascii_letters + string.digits return ...

  9. Makefile的简单编写【学习笔记】

    首先我们先创建两个简单的文件: main.c #include <stdio.h> extern void hi_fun(); int main() { printf("hell ...

  10. Spring_使用 JdbcTemplate和JdbcDaoSupport-代码

    applicationContext.xml <?xml version="1.0" encoding="UTF-8"?><beans xml ...