设为首页收藏本站

LUPA开源社区

 找回密码
 注册
文章 帖子 博客

提升用户体验的最佳免费jQuery表单插件

2013-10-8 16:52| 发布者: joejoe0332| 查看: 3450| 评论: 0|原作者: Sandy_guoguo, 你要爪子, yale8848, 徐继开, fanhang, anjingyuws|来自: 开源中国社区

摘要:     网页表单是一个老生常谈的话题。出于这样或那样的目的,一些示例中都会包括用户注册,电子商务结算,用户设置甚至联系人表格。而输入栏是非常容易用现代的CSS3技术来应用样式。但是到底什么决定整体用户体验 ...
    网页表单是一个老生常谈的话题。出于这样或那样的目的,一些示例中都会包括用户注册,电子商务结算,用户设置甚至联系人表格。而输入栏是非常容易用现代的CSS3技术来应用样式。但是到底什么决定整体用户体验?


    在这篇文章中,我想展示一些免费的开源jQuery插件来帮助开发者创建更简易的web表单。访问者不用太多的犹豫就能完成表单的填写。你也许不想太过华丽页面元素,它会干扰手头的任务。考虑这些附加的特性,它就像一个用户指南,能帮助用户填写表单,而它们又涉及到唯一的或者不熟悉的内容。


jQuery Autotab

jquery autotab plugin open source free preview

自动挑格是个很棒的功能,这个功能我们完全可以从头开发。但是如果你想节省时间的话,可以选择jQuery AutoTab这个强大的插件去简化这个功能。当一个字段达到最大长度时,jQuery AutoTab将会检测到,并自动跳到form表单的下一个元素中。

所有的input标签都是由以逗号间隔的字段组成的长字符串作为jQuery选择器来创建的。我喜欢这样的方式——使用这个插件,基于每个字段的tabindex属性,动态的,而不是手动地定义每个元素。它还有非常酷的过滤功能,以供你输入不同的内容,例如,数字的电话号码,或数字字母组合的街道地址。你可以从Github官网获得一个副本,来看一下这个插件是如何工作的。

Pickadate.js

pickadatejs jquery plugin open source preview picker

不久之前,我写了一篇文章详细介绍了很多种jQuery 日期选择插件。那个单子里,列出了一些非常不错的选择,但是我漏掉了一个非常好的解决方案,它的名字是pickadate.js。这是一个免费的开源插件,可以在任何网站项目,同时也支持移动设备的网页浏览器。Pickadate不仅仅可以让用户选择一个日期,而且可以选择一个特定的时间或者一个时间范围以上传至表单。

如果你有兴趣,可以读读我的另一篇文章。我真的非常喜欢把玩pickadate.js,因为它几乎可以支持所有的移动设备。我完全不是在推销这款插件,而是希望这个漂亮的接口可以完完全全地呈现在第一次使用它的用户面前。如果你需要一个快速的jQuery日期插件,那么我建议你从现在开始使用它,并把它介绍给其他人,如果有机会的话。

Progression.js

progression js jquery open source plugin preview

你见过随着用户的每一个输入字段进行引导的表单吧?这些表单可以通过隐藏的文本元素或工具提示来手动创建。但是你也可以选择包含一个插件,比如Progression来完成类似的功能。

这个开源项目让开发人员轻松地引导表单域,而不用进行过多的设置。你可以通过一系列的参数设置区调节宽度,动画风格和界面颜色。你可以查看在线文档以了解更多。我觉得Progression.js是一个简单的方法,可以让用户专注于填写每一个字段,并充满希望地完成整个表单。


酷毙
1

雷人

鲜花

鸡蛋

漂亮
  • 快毕业了,没工作经验,
    找份工作好难啊?
    赶紧去人才芯片公司磨练吧!!

最新评论

关于LUPA|人才芯片工程|人才招聘|LUPA认证|LUPA教育|LUPA开源社区 ( 浙B2-20090187 浙公网安备 33010602006705号