摘要:
mozilla 对于美化 select 元素的样式有这样一段描述( "用 CSS 美化 Select 元素" ): 众所周知,select 元素很难用 CSS 进行高效的设计。你可以影响任何元素的某些方面 例如,操纵框模型,显示的字体等,你可以使用 appearance 属性来删除默认的系统外观。 阅读全文
摘要:
在前端开发写CSS时,往往不能很好的把握格式和属性顺序,阅读起来不友好。CSScomb帮助我们解决了这个问题! CSScomb(CSS梳理)是一个可以用来格式化和排序CSS属性的插件,官网地址http://csscomb.com/。 一、安装CSScomb 要使用CSScomb,需要先安装CSSco 阅读全文
摘要:
daterangepicker daterangepicker 是一款日期时间控件,可选择“年,月,日,时,分,秒”,可选择单面板,也可选择双面板(起止时间)。 单面板示例:daterangepicker 单面板 codepen 在线示例 双面板示例:daterangepicker 双面板 code 阅读全文
摘要:
在上一篇文章 Echarts 多曲线“断点”问题解决方法 中说到了Angular 项目中要使用 Echarts 的方法。 说明了自己解决当“每一条曲线的横坐标不相同”时,在各条曲线上,它们的值采用数组类型,也就是 series.data[i] (i 表示该条曲线的索引)的值采用数组类型,第一个值对应 阅读全文
摘要:
Echarts 用来做可视化曲线是非常优秀的一个库。建议使用 Echarts 作为项目的可视化图标库时,仔细研究 官方实例,根据需求来选择类似的示例,下载实例模板来开发,节省时间,减少出错,提高效率。 最近在项目中遇到了一个棘手的问题: 1. 在图表中要显示多条曲线 2. 每一条曲线的横坐标(时间轴 阅读全文
摘要:
在某些场景下,我们需要根据兄弟元素的总数来为它们设置样式。最常见的场景就是,当一个列表不断延长时,通过隐藏控件或压缩控件等方式来节省屏幕空间,以此提升用户体验。 为保证一屏内容能展示更多的内容,需要将多余的列表项隐藏。 二级导航菜单:当菜单项为 1 项时,宽度为 100%;当菜单项为 2 项时,每项 阅读全文
摘要:
angular 生命周期钩子的详细介绍在 https://angular.cn/guide/lifecycle-hooks 文档中做了介绍。 ngOnInit() 在 Angular 第一次显示数据绑定和设置指令/组件的输入属性之后,初始化指令/组件; ngAfterViewInit() 初始化完组 阅读全文
摘要:
最近在工作中遇到了一些不常用的布局,很多使用 CSS table 属性,并结合 ::before,::after 伪元素完成了,使得 HTML 的结构相对更简单,更具有语义性。当 HTML 结构越清晰,越有规律时,便于阅读,循环套数据时也可以少很多的判断。 一、有下面这样一个设计,上面是标题,中间是 阅读全文
摘要:
一、需求演变及描述: 1. 有一个“客户对公司的总体评价”的字段(evalutation)。字段为枚举类型,0-5,对应关系为:0-暂无评价,1-很差,2-差,3-一般,4-好,5-很好 2. 后来需要根据评分使用星星来表现,一共5颗星,分为实星和空星,例如,当3分时,三颗星星被点亮,即3颗实星2颗 阅读全文
摘要:
datetimepocker 是一个日期时间选择器,bootstrap datetimepicker 是 bootstrap 日期时间表单组件。访问 bootstrap-datetimepicker 。 这次在项目中用到日期时间选择器,分享其用法和总结。 一、截图 功能完成后的项目截图 1. 时间起 阅读全文
摘要:
Angular 的应用就是一棵组件树,一个页面可以是一个组件,某一页面的一个区块也可以是一个组件。为了弄明白组件及组件树,我将原来做过的一个静态网站进行组件改造。 原项目地址 https://github.com/xinjie-just/tuobei-customer-back-end.git。 原 阅读全文
摘要:
要弄清楚 Angular 的启动过程,就要弄明白 Angular 启动时加载了哪个页面,加载了哪些脚本,这些脚本做了哪些事? 通过 Angular 的编译依赖文件 .angular-cli.json 可以看到 apps 这个对象类的数组 这个对象中有 root 这个属性,这个是 Angular 应用 阅读全文
摘要:
工欲善其事必先利其器,开发 Angular 项目首先要搭建环境。Angular 的环境搭建包括三个方面,开发环境 WebStorm,命令行工具 Angular CLI,以及 nodejs。 一、安装 nodejs 进入到 nodejs 的官网 https://nodejs.org/en/ 去下载安装 阅读全文
摘要:
首先推荐两款个人比较优秀的控件: 一、https://huangchanghuan.github.io/city-picker/ 这个是由 city-picker 控件(npm 安装方法: npm install city-picker),地址三级改造而来,数据由京东数据库提供。 优点: 1. 样式 阅读全文
摘要:
通过 CSS 来插入换行的需求在越来越多的场景中运用到,例如我们使用定义列表来呈现一行行的名值对,例如下面一段代码: 我期望达到下面的效果: 我依次做了下面的尝试: 1. 在每一个 <dd> 后面添加了一个 <br> ,让他们换行,可效果却是这样的: 查找资料我明白了,<dd> 本来是块级元素,并且 阅读全文