自适应process组件
很久没有写博客了,自从工作忙了就忘了学习新东西,真是越大越懒。
做项目中,需要一个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组件的更多相关文章
- 使用Process组件访问本地进程
实现效果; 知识运用: Process组件的StartInfo属性 //获取或设置要传递给Process的Start方法的属性 public ProcessStartInfo StartInfo {g ...
- C#的Process类调用第三方插件实现PDF文件转SWF文件
在项目开发过程中,有时会需要用到调用第三方程序实现本系统的某一些功能,例如本文中需要使用到的swftools插件,那么如何在程序中使用这个插件,并且该插件是如何将PDF文件转化为SWF文件的呢?接下来 ...
- C# - 多线程 之 Process与Thread与ThreadPool
Process 进程类, // 提供对本地和远程进程的访问,启动/停止本地系统进程 public class Process : Component { public int Id { get; } ...
- System.Diagnostics.Process.Star的用法
System.Diagnostics.Process.Start(); 能做什么呢?它主要有以下几个功能: 1.打开某个链接网址(弹窗). 2.定位打开某个文件目录. 3.打开系统特殊文件夹,如“控制 ...
- C# Process.Start()方法详解
System.Diagnostics.Process.Start(); 能做什么呢?它主要有以下几个功能: 1.打开某个链接网址(弹窗). 2.定位打开某个文件目录. 3.打开系统特殊文件夹,如“控制 ...
- Process类
public bool Process.Start () 启动(或重用)此 Process 组件的 StartInfo 属性指定的进程资源,并将其与该组件关联. public bool Process ...
- 详解Bootstrap导航组件
在bootstrap框架中将导航独立出来成为一个导航组件,根据不同的版本,可以找到相应的源码: LESS: navs.less SASS: _navs.scss 标签形导航,也称选项卡导航 标签形 ...
- C#使用Process类调用外部程序(转)
在程序开发中,一个程序经常需要去调用其他的程序,C#中Process类正好提供了这样的功能.它提供对本地和远程进程的访问并使您能够启动和停止本地系统进程.一.启动进程实例 Process myProc ...
- C# Process类_进程_应用程序域与上下文之间的关系
进程(Process)是Windows系统中的一个基本概念,它包含着一个运行程序所需要的资源.进程之间是相对独立的,一个进程无法直接访问另一个进程的数据(除非分布式),一个进程运行的失败也不会影响其他 ...
随机推荐
- MySQL之存储引擎(Day39)
一 什么是存储引擎 mysql中建立的库=====>文件夹 库中建立的表=====>文件 现实生活中我们用来存储数据的文件应该有不同的类型:比如存文本用txt类型,存表格用excel,存图 ...
- 查看虚拟机操作系统、cpu核数、内存命令
1.查看操作系统 在终端中执行下列指令:cat/etc/issue可以查看当前正在运行的 Ubuntu 的版本号.其输出结果类似下面的内容:Ubuntu 10.04 LTS \n \l方法二:使用 l ...
- k8s使用ceph作为后端存储挂载
一.在ceph集群上操作: 1.创建池(主要使用存储类来进行持久卷的挂载,其他的挂载方式不好使也太麻烦):ceph osd pool create k8s 64 二.在k8s上操作: 1.安装客户端( ...
- [ufldl]Supervised Neural Networks
要实现的部分为:forward prop, softmax函数的cost function,每一层的gradient,以及penalty cost和gradient. forwad prop forw ...
- .NET计时器的使用-Stopwatch类
作用: 微软提供的常用于统计时间消耗的类,作为一个固定的API接口供大家使用. 先看代码: using System; using System.Collections.Generic; using ...
- Python3:Django连接Mysql数据库时出错,'Did you install mysqlclient or MySQL-python?'
Python3:Django连接Mysql数据库时出错,'Did you install mysqlclient or MySQL-python?' 一.原因 因为Python版本问题,MySQLdb ...
- 介绍Web项目中用到的几款JS日历日期控件和JS文本编辑框插件
第一款日历日期控件:layDate 官方网站:http://laydate.layui.com/ 第二款日历日期控件:my97 官方网站:http://www.my97.net/ 第三款 文本编辑器控 ...
- os包方法
os包中实现了平台无关的接口,设计向Unix风格,但是错误处理是go风格,当os包使用时,如果失败之后返回错误类型而不是错误数量. os包中函数设计方式和Unix类似,下面来看一下. func Chd ...
- Java_Chapter6_类与对象
6.1 类与对象的概念 6.2 定义类 class Cylinder { double radius; int height; double pi; void setCylinder(double r ...
- Cisco交换机设备配置镜像端口
查看交换机端口的基本情况,输入命令 show ip int bri,可以查看端口状态 FastEthernet表示百兆以太网端口,GigabitEthernet表示千兆以太网端口. 进入全局模式 设置 ...