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

做项目中,需要一个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. golang SQLite3性能测试

    SQLite是个小型的数据库,很简洁,即支持文件也支持内存,比较适合小型的独立项目,在没有网络的时候做一些复杂的关系数据存储和运算. 为了考察性能做10M(1000万)条记录的测试,测试机4CPU.8 ...

  2. html当前文档的状态

    <script type="text/javascript"> document.onreadystatechange = loadingChange;//当页面加载状 ...

  3. 配置数据库,Flask-Alchemy

    Flask-Alchemy连接数据库的插件 获取当前项目路径(绝对路径) 来自为知笔记(Wiz)

  4. HDU - 1695 GCD (容斥+枚举)

    题意:求区间1<=i<=b与区间1<=j<=d之间满足gcd(i,j) = k 的数对 (i,j) 个数.(i,j)与(j,i) 算一个. 分析:gcd(i,j)=k可以转化为 ...

  5. jQuery获取URL的GET参数值

    // jQuery url get parameters function [获取URL的GET参数值] // <code> // var GET = $.urlGet(); //获取UR ...

  6. CSS流体(自适应)布局下宽度分离原则

    CSS流体(自适应)布局下宽度分离原则 这篇文章发布于 2011年02月28日,星期一,00:48,归类于 css相关. 阅读 73990 次, 今日 5 次 by zhangxinxu from h ...

  7. mysql行列互相转换

    列转行: mysql> select * from test; +------+----------+-------+ | id | subject | score | +------+---- ...

  8. WINDOWS和UNIX换行符的理解

    # WINDOWS和UNIX换行符的理解 **file1.txt**17.143.161.37   其他    美国54.163.255.40   其他    美国 弗吉尼亚州 亚马逊公司 **[ro ...

  9. Django学习笔记之Django模版系统

    官方文档 常用语法 只需要记两种特殊符号: {{  }}和 {% %} 变量相关的用{{}},逻辑相关的用{%%}. 变量 {{ 变量名 }} 变量名由字母数字和下划线组成. 点(.)在模板语言中有特 ...

  10. Sybase:存储过程中采用临时表存储统计数据

    Sybase:存储过程中采用临时表存储统计数据 作用 很有效的提升统计查询速度,对于数据量亿级.千万级多表之间关联查询,非常有效: 使用 --无需定义临时表,直接使用 --自动释放临时表 select ...