15 款优化表单的 jQuery 插件

网页上的表单提供给用户的一种交互的方式,用户输入数据,提交到服务器,等待后续的处理。这些表单在我们浏览的网页中随处可见,也容易被我们忽略。 比如,“联系我们”页面会提供一个表单给用户填写他们的信息和想提的建议或者问题,但是开发者往往只关注网站的设计和用户交互的内容,并不会注意到用户进 行交互的方式——表单。

以下整理的这个列表就是为 Web 开发者准备的,包括了 15 款优化表单的 jQuery 插件。希望大家能从中找到适合自己的 jQuery 插件,优化网页表单,更好的与用户进行交互。看完要记得和大家分享你的感想哦:)

一个精选的 AJAX Contact 表单

Demo || Tutorial

这个插件提供一个简单可靠的反馈表单。

创建一个霓虹灯闪烁效果的表单

Demo || Tutorial

不需要使用 Flash 就可以创建一个霓虹灯效果的表单。

高级 JavaScript 表单分类器 – TinyTable V3

Demo || Tutorial

第三代 TinyTable 表单分类脚本添加了搜索,列平均值和合计,记录号,查看所有函数视图和重置功能。大小接近 6 KB,非常轻量级。

完整经济业务表单

Demo || Tutorial

Recurly.js 是完整经济业务表单非常安全,兼容 PCI,支持完全自定义的 CSS。

使用纯 CSS 创建表单,使用 jQuery 优化

Demo || Tutorial

在这个教程中,我们使用纯 CSS 来创建一个表单,使用 jQuery 插件来给表单元素加上皮肤,比如文本框,下拉列表,选项框。

Jq Transform Plug in

Demo || Tutorial

这个插件是个 jQuery 样式插件,允许为表单元素加上皮肤。

PrettyCheckboxes

Demo || Tutorial

这个脚本提供给想要在各种浏览器中保持一致外观的单选按钮的用户,使用这个脚本就可以保证常规输入的可用性。

使用 JavaScript 创建一个进度条

Demo || Tutorial

使用 jQuery 构建进度条到各种 UI 部件库和交互帮手,用户可以查看表单的完成程度。

jQuery 信用卡验证插件: Smart Validate

Demo || Tutorial

Smart Validate 是 jQuery 信用卡验证插件,使得信用卡验证变成一个简单的任务。它能保证用户输入有效的信用卡号。

Autotab: jQuery 自动 Tab 和过滤插件

Demo || Tutorial

Autotab 是一款 jQuery 插件,提供表单自动 Tab 和过滤文本字段的功能。当达到文本字段的最大字符数就会自动跳到下一个表单元素。

jQuery 高亮插件

Demo || Tutorial

这个插件会高亮用户与页面交互的元素,比如当输入文本时,会高亮文本框区域;当选择选项时,会高亮选项区域。

Sisyphus

Demo || Tutorial

Sisyphus.js 是一个利用 HTML5 技术实现的自动保存草稿插件,它能将表单数据自动保存到 LocalStorage 中。当浏览器崩溃后,只要重新打开浏览器就能恢复数据。它也是一个轻量级的 jQuery 插件,使用也非常简单,可以设置每隔一段时间或者是数据有变化时自动保存数据。

jqPlot

Demo || Tutorial

jqPlot 是 JavaScript 框架,同时也是 jQuery 绘图和图标插件。jqPlot 提供各种漂亮的折线,条形和饼图图表。

via dizyne.net

时间: 2024-11-08 18:12:43

15 款优化表单的 jQuery 插件的相关文章

最常用的15个前端表单验证JS正则表达式

在表单验证中,使用正则表达式来验证正确与否是一个很频繁的操作,本文收集整理了15个常用的JavaScript正则表达式,其中包括用户名.密码强度.整数.数字.电子邮件地址(Email).手机号码.身份证号.URL地址. IPv4地址. 十六进制颜色. 日期. QQ号码. 微信号.车牌号.中文正则. 1 用户名正则 //用户名正则,4到16位(字母,数字,下划线,减号) var uPattern = /^[a-zA-Z0-9_-]{4,16}$/; //输出 true console.log(uP

jquery表单验证validator插件用法

这段时间工作上比较闲,总感觉不能让自己的技术荒废,于是又操起了老行,做起了小demo来. 这次我做了一个js版本的表单验证插件,总体的原理参照了jquery validate,但是在一些小方面还是有自己的创新. 这个插件主要功能有以下几点. 1.验证规则自定义 可以自己配置需要验证的表单项,对于验证通过或者错误时的处理,也可以自己决定,最大限度地保证了插件的灵活性. 2.验证方式多样 插件提供了丰富的验证种类,比如为空.长度.大小.相等.远程验证.数据类型验证等. 3.提示机制健全 当每次操作表

8款超赞的最新jQuery插件工具

jQuery是迄今为止我最喜欢的Javascript框架,开发者用jQuery创造出惊人的视觉效果,以及处理数据,等等. 在这篇文章中,我给所有web开发人员推荐8款超赞的jQuery插件工具. 1.jQuery Mobile 由于iPhone和BlackBerry移动设备的普及,网络趋向于移动,jQuery Mobile是一个完整的框架,让您轻松地创建移动网站.如果你想要一个例子或者演示,就看一看这个教程我已经写了几个月了. 如果你想要我加入你的手机移动网站,只要给我一个电子邮件,我将成为你的

20款Web开发者必备的jQuery插件,超赞!

JS框架jQuery的易扩展性吸引了来自全球的开发者来共同编写jQuery插件.jQuery插件不仅能够增强网站的可用性,有效地改善用户体验,还可以大大减少开发时间.现在的jQuery插件很多,可以根据您的项目需要来选择.这里为您介绍20款非常不错的插件. Creative Radical Web TypographyLettering.js是一个轻量经的.易于使用的jQuery插件,可创造出极具个性的网页排版,是2010年最佳jQuery插件之一. 演示 | 下载New FancyMoves

20 个增强表单功能的 jQuery 插件

1) jQtransform jQuery Plugin 对表单进行外观美化的插件 2) Live Validation LiveValidation 是一个轻量的表单验证库.除了传统的验证功能,还提供实时验证,可以一边输入一遍验证.Ruby on Rails 用户可能会发现这个库非常好用,因为他们的命名规则和参数十分近似.该库既有独立版本,又有一个 Prototype 版本. 3) jQuery Comment Preview 4) In Field Labels jQuery Plugin

10款新鲜出炉的 jQuery 插件(Ajax 插件,有幻灯片、图片画廊、菜单等)_jquery

1. Chrome Style jQuery Image Gallery 一款用于实现漂亮的Chrome风格图片画廊的 jQuery 插件,在线演示 2. Awkward Showcase 使用这款插件可以实现各种内容的幻灯片展示效果,例如文本.图片.视频等等,在线演示 3. Waypoints 这款插件可以让你实现当滚动到某个目标元素的时候执行特定的动作,例如回到顶部,在线演示 4. bxSlider 这是一个内容滑块和图片幻灯片展示插件,可自定义很多参数,在线演示 5. A simple a

IE下异步提交表单,jquery.form方式没作用

问题描述 我在其他浏览器像谷歌.360.火狐等用jquery.from的方式来异步提交表单,但是到了IE下就不管用了,想问一下大家IE下对异步提交表单有什么要求,大家都用什么方式呢? 解决方案 解决方案二:不能用?有什么错误吗?解决方案三:jquery不熟,不过浏览器之间的差异还是很大的,这个你开发的时候要和客户做好沟通,看客户习惯使用什么浏览器访问,即都需要支持什么浏览器.解决方案四:用jquery的ajax方法提交,form内要提交的内容用data参数,方法post就完事了么.$.ajax(

推荐12款非常有用的流行 jQuery 插件

jQuery 是一个非常优秀的 JavaScript 框架,在现在的 Web 开发项目中扮演着重要角色.jQuery 使用简单灵活,同时还有许多成熟的插件可供选择,它可以帮助你在项目中加入一些非常好的效果,让网站有更好的可用性和用户体验.今天这篇文章向大家推荐12款个实用的 jQuery 插件. 1. jmpress.js 非常酷的幻灯片插件,基于 CSS3 transform 和 transition 实现,带水平切换.旋转切换和3D效果,灵感来自于prezi.com. 2. Arctext.

10款新鲜出炉的 jQuery 插件

这篇文章与大家分享的是10款新鲜出炉的基于 jQuery 开发的 Ajax 插件,有幻灯片.图片画廊.菜单等很多有用的插件.这些作者的想法特别新颖,希望你能从中找到自己需要的插件. 1. Chrome Style jQuery Image Gallery 一款用于实现漂亮的Chrome风格图片画廊的 jQuery 插件,在线演示 2. Awkward Showcase 使用这款插件可以实现各种内容的幻灯片展示效果,例如文本.图片.视频等等,在线演示 3. Waypoints 这款插件可以让你实现