要资料 文章 文库 视频 Code iProcess 课程 认证 咨询 工具 讲座吧   专家招募  
会员   
 
  
每天15篇文章
不仅获得谋生技能
更可以追随信仰
 
 
     
   
分享到
如何创建浮动式标签模式?
 
作者 夏梦竹 火龙果软件 发布于 2014-04-18
 

Matt Smith分享了一种新颖的表单交互模式,也就是我们所说的浮动式标签。在这种模式中,当用户聚焦于某个输入框并输入内容之后,原有的内联标签就会“浮”到已输入的内容之上。这种超赞模式值得我们去学习!

Matt Smith是位著名的设计师和开发者,专注于UX/UI。他在博客中分享了一种新颖的表单交互模式,也就是我们所说的浮动式标签。在这种模式中,当用户聚焦于某个输入框并输入内容之后,原有的内联标签就会“浮”到已输入的内容之上。见下图演示:

Matt Smith在客中解释道,他第一次尝试使用相同的概念将占位符变成一个图标,但是没有坚持下来。这是因为他觉得不够好,没有将占位符/标签信息表达清楚,于是Matt决定让文字“动”起来。

使用浮动标签有许多优点,当用户聚焦于字段并输入内容之后,仍可保持上下文信息可见。这带来了更好的可访问性。在默认情况下可以保持简洁,便于视线扫描。这种模式在默认情况下就是原来的内联标签,只有当用户产生交互行为后才会成为浮动样式。总的来说,这种模式很棒。

Code

Jesse Shawl创建的这款Codepen代码编辑工具很强大,它可以帮助你创建完美的、可视的浮动标签模式。下面我们就来演示如何在HTML、CSS以及JavaScript中创建浮动式标签。

HTML

在HTML中首先我们需要创建一个表格,你只需将下面这段代码复制您的网页中即可使用。该代码旨在使其看起来像有一个动画的占位符。

CSS

CSS代码片段比较复杂。下面我们来逐步解析。

上面的这段代码,可以很清晰看到只是在输入字段定义了样式列表。没有任何特别之处。而下面的这段代码,你就能看到动画效果。规则就是,input + label定义了标签输入样式。通过设定all,可以改变所有的属性,包括属性,位置、尺寸以及色彩。

如果标签是聚焦点,这就意味着我们想要的颜色、字体大小和位置都将发生改变。 这里我们将translateY(-50%)改为transform:none。

下面的这段代码可帮助你将背景设置成浅灰色。在这.not-empty起到了很大作用。

JavaScript

代码第一行抓取了输入形式。很简单。

现在我们有一个for循环,每次点击输入,选择类型输入,我们将其称为bindUI运行功能。

定义这个bindUI函数,操作流程如下,如果需要输入一个值,在这可以添加一个被命为.not-empty的字段。'not-empty'意味着有个占位符。

当然,并不是所有人都喜欢采用浮动标签,比如,当你没有足够的空间来同时输出标签与占位符,你就不会选择这种模式了。但不管这样,这种模式很看上去性感,动效也很细腻,不是吗?你可以在GitHub上查看FloatLabeled更多信息。

 
相关文章

深度解析:清理烂代码
如何编写出拥抱变化的代码
重构-使代码更简洁优美
团队项目开发"编码规范"系列文章
 
相关文档

重构-改善既有代码的设计
软件重构v2
代码整洁之道
高质量编程规范
 
相关课程

基于HTML5客户端、Web端的应用开发
HTML 5+CSS 开发
嵌入式C高质量编程
C++高级编程
 
分享到
 
 


十天学会DIV+CSS(WEB标准)
HTML 5的革新:结构之美
介绍27款经典的CSS框架
35个有创意的404错误页面
最容易犯的13个JavaScript错误
设计易理解和操作的网站
更多...   


设计模式原理与应用
从需求过渡到设计
软件设计原理与实践
如何编写高质量代码
单元测试、重构及持续集成
软件开发过程指南


东软集团 代码重构
某金融软件服务商 技术文档
中达电通 设计模式原理与实践
法国电信 技术文档编写与管理
西门子 嵌入式设计模式
中新大东方人寿 技术文档编写
更多...   
 
 
 
 
 
每天2个文档/视频
扫描微信二维码订阅
订阅技术月刊
获得每月300个技术资源
 
 

关于我们 | 联系我们 | 京ICP备10020922号 京公海网安备110108001071号