这是一款效果非常精美炫酷的jQuery和CSS3联系方式表单美化插件。大多数网站上都有让用户填写的联系方式表单,一个设计良好的表单能够大大的提升用户的体验度。该表单美化插件在原生HTML表单的基础上进行加工,并使用jQuery来制作label动画,使表单样式更加大方得体。
这个表单美化插件中包含了常用的表单元素:输入框、下拉框、单选按钮、复选框和文本框。
HTML结构
该表单美化插件的HTML结构使用标准的表单
结构。元素中包含两个元素,它将整个表单分割为两个部分。每一个表单元素(通常包含+)都包装在一个Account Info
Name
Project Info
Budget
Select Budget
< $5000
$5000 - $10000
> $10000
Project type
Choice 1
Choice 2
Choice 3
Project description
CSS样式
这个表单美化插件的CSS可以分为3个部分:1、Form;2、自定义icons;3、浮动的labels。第一部分是必不可少的部分。
如何添加自定义icons?
要在元素上添加自定义图标,你需要在你想要添加图标的元素(input/select/textarea)上添加特定的class,如用户头像添加.user。然后还要在其父元素上添加class .icon。最后,在CSS样式表文件中通过自定义background-images属性来自定义图标,例如下边代码所示:
.cd-form .icon input, .cd-form .icon select, .cd-form .icon textarea {
padding-left: 54px !important;
}
.cd-form .user {
background: url("../img/cd-icon-user.svg") no-repeat 16px center;
}
.cd-form [required].user {
background: url("../img/cd-icon-user.svg") no-repeat 16px center,
url("../img/cd-required.svg") no-repeat top right;
}
浮动labels
浮动的labels标签是通过在.cd-form元素上添加class .floating-labels来实现的。你是否听说过UX pattern?它是由Matt D. Smith首先提出的。向了解更多可以查看他写的这篇文章。在本例的表单美化插件中使用的是这样的一种UX方案:开始的时候它允许你设置labels为占位文本,然后在用户开始输入是,labels开始过渡动画到输入框的上边。
在CSS文件中你会发现.floating-labels前面使用了.js class,这些class在浏览器支持javascript时由Modernizr自动添加。通过这种方式,如果浏览器不支持javascript,labels仍然能正常工作,只是.floating-labels会没有效果而已。
对于表单中的一些必填字段,这里使用的是HTML5的新特性required。而error只是在表单元素上添加了一个class。
.cd-form [required] {
background: url("../img/cd-required.svg") no-repeat top right;
}
.cd-form .error {
border-color: #e94b35 !important;
}
另外,该表单美化插件中还创建了自定义的单选按钮和复选框。你会发现他们的源文件其实非常简单。简单来说,插件中将单选按钮和复选框设置为position: absolute;和opacity: 0;,然后使用元素的自定义::before和::after伪元素来替换它们。
Javascript
该表单美化插件使用javascript来制作labels浮动效果。如果DOM中存在一个.floating-labels元素,插件将初始化floatLabels()方法:该方法会获取表单的input字段并为keyup()事件绑定checkVal()方法来检测用户是否开始键入文字。
if( $('.floating-labels').length > 0 ) floatLabels();
function floatLabels() {
var inputFields = $('.floating-labels .cd-label').next();
inputFields.each(function(){
var singleInput = $(this);
singleInput.keyup(function(){
checkVal(singleInput);
});
});
}
checkVal()函数会检测input输入框的值:如果它不为空,就会在它的前一个元素.cd-label添加float class,否则就移除它。