http://www.cnblogs.com/lwme/archive/2012/02/14/javascript-jquery-form-beautify-tool.html
用过一些表单美化的工具,觉得不错,特地分享一下
Niceforms
Niceforms是一款独立的表单美化工具,当前版本为2.0
官方主页:http://www.emblematiq.com/lab/niceforms/
官方演示:http://www.emblematiq.com/lab/niceforms/demo/niceforms.html
GitHub:https://github.com/emblematiq/Niceforms
使用方法,在页面头部引入以下脚本及样式即可:
1
2
3
4
5
6
7
8
9
10
|
<link href= "niceforms-v2.0/niceforms-default.css" rel= "stylesheet" />
<script src= "niceforms-v2.0/niceforms.js" ></script>
<!--[ if IE]>
<style> /*此样式用于radio/checkbox后面的label在ie下可能不正常*/
.opt { padding-left: 8px; } </style> <![endif]--> <script> imagesPath = "niceforms-v2.0/img/" ; // niceforms图片资源的路径
</script> |
效果:
Uniform
这是jQuery的表单美化插件
官方网站及在线演示:http://uniformjs.com/
github主页:https://github.com/pixelmatrix/uniform
使用方法,在页面头部引入以下脚本及样式:
1
2
3
4
5
6
7
8
|
<link rel= "stylesheet" href= "pixelmatrix-uniform/default/css/uniform.default.css" media= "screen" />
<script src= "jquery-1.7.1.min.js" ></script>
<script src= "pixelmatrix-uniform/jquery.uniform.min.js" charset= "utf-8" ></script>
<script> $( function () {
$( "input, textarea, select, button" ).uniform();
});
</script> |
Uniform包含3种主题default,Aristo,Agent,使用时引用相应目录下的css即可。
效果请直接看官方演示
Formly
Formly也是jQuery的一款表单美化插件
官方网站及在线演示:http://thrivingkings.com/formly/
github:https://github.com/ThrivingKings/Formly
使用方法,在页面头部引入以下脚本及样式即可:
1
2
3
4
5
6
7
8
|
<link href= "Formly/formly.css" rel= "stylesheet" />
<script src= "jquery-1.7.1.min.js" ></script>
<script src= "Formly/formly.js" ></script>
<script> $( function () {
$( "form" ).formly();
});
</script> |
效果请直接看官方演示
Ideal Forms
Ideal Forms也是jQuery的一款表单美化插件
官方网站:spacirdesigns.com/jqidealforms
GoogleCode:http://code.google.com/p/idealforms/
使用方法,在页面头部引入以下脚本及样式即可:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
|
<link href= "idealforms1.02/css/normalize.css" rel= "stylesheet" />
<link href= "idealforms1.02/css/idealforms/idealforms.css" rel= "stylesheet" />
<link href= "idealforms1.02/css/master.css" rel= "stylesheet" media= "screen" />
<style> ul.idealcheck li, ul.idealradio li {
display: inline-block;
}
li { margin: 0; }
body {
width: 700px;
}
</style> <!--[ if lt IE 8]>
<style> /*在ie8以下版本的浏览器可能会存在问题的修复*/
.main-label, ul.idealcheck, ul.idealcheck li, ul.idealradio, ul.idealradio li { float: left; } div { clear: both; } </style> <![endif]--> <script src= "jquery-1.7.1.min.js" ></script>
<script src= "idealforms1.02/js/jquery.idealforms.js" ></script>
<script> $( function () {
$( "#fancyform" ).idealforms();
});
</script> |
效果:
jqTransform
jqTransform也是jQuery的一款表单美化插件
官方网站及在线演示:http://www.dfc-e.com/metiers/multimedia/opensource/jqtransform/
使用方法,在页面头部引入以下脚本及样式即可:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
|
<link rel= "stylesheet" href= "jqtransformplugin/jqtransform.css" media= "all" />
<script src= "jquery-1.7.1.min.js" ></script>
<script src= "jqtransformplugin/jquery.jqtransform.js" ></script>
<style> /*表单元素不对齐的修复*/
form {
clear: both;
}
form.jqtransform .rowElem label {
width: 150px;
text-align: right;
}
form.jqtransform .rowElem label.radiovalue {
width: 30px;
display: block;
float: left;
}
form.jqtransform .rowElem label.checkboxvalue {
width: 70px;
display: block;
float: left;
padding-left: 5px;
}
.jqTransformSelectWrapper li {
padding: 0;
margin: 0;
}
</style> <script> $( function () {
$( 'form' ).jqTransform({ imgPath: 'jqtransformplugin/img/' });
});
</script> |
效果:
Carbon Fiber Signup Form
纤维化登录表单,这货没有任何js,只有css/html
官方网站:http://tutorialzine.com/2010/04/carbon-signup-form/
效果:
结尾
放上DEMO:点击下载
相关推荐
因此,出现了许多JavaScript和jQuery的表单美化插件,帮助开发者轻松实现表单的视觉升级,提高用户体验。本文将介绍几个流行的表单美化工具:Niceforms、Uniform、Formly以及Ideal Forms。 首先,Niceforms是一款...
今天我们将深入探讨的是一个关于jQuery的实用工具——"jquery form表单美化插件"。这个插件专门用于提升网页表单的用户体验和视觉效果,使原本平淡无奇的HTML表单变得更具吸引力。 首先,我们要理解jQuery Form插件...
而“很不错的jquery表单美化插件”正是基于jQuery的一款工具,旨在提升网页中表单元素的视觉效果和用户体验。这款插件能够帮助开发者轻松实现表单的美观化,同时保持良好的兼容性,覆盖了各种主流浏览器。 表单美化...
jQuery表单元素美化插件jqtransform是一个专门针对HTML表单组件进行美化和增强用户体验的JavaScript插件。这个插件能够将传统的、样式单一的表单元素,如文本输入框(text inputs)、复选框(checkboxes)、单选按钮...
"jquery form表单美化插件修订"这个主题涉及到了jQuery的一个具体应用,即对网页表单进行美化,以提供更好的用户体验。表单是网页互动的重要组成部分,美观且易用的表单设计可以提高用户满意度,从而提升网站的整体...
"jQuery inputbox表单美化插件自定义select框"是一个专注于改善select下拉框外观的解决方案。这个插件利用jQuery的强大功能,为传统的HTML select元素提供了自定义样式和交互效果,让表单看起来更加专业且用户友好。...
"带搜索框的jQuery下拉框美化插件"就是这样一款致力于优化网站表单元素的工具,它将传统的下拉框与搜索功能相结合,使得用户在面对大量选项时能够更加高效地找到所需信息。接下来,我们将深入探讨这款插件的工作原理...
总结来说,jQuery表单美化涉及的主要知识点包括:jQuery事件处理、DOM操作、样式切换、动画效果、表单序列化、Ajax提交以及第三方插件的使用。通过掌握这些技能,开发者能够打造出既实用又美观的网页表单,提升用户...
"带搜索框的jQuery下拉框美化插件 searchableSelect"就是这样一个工具,它旨在为开发者提供一个既美观又实用的下拉选项选择器,同时集成了搜索功能,让用户在大量数据中快速找到目标。 jQuery是一个广泛使用的...
3. **插件使用**:jQuery有许多优秀的表单插件,如jQuery UI、Bootstrap、jQuery Validation Plugin等,它们提供了丰富的预设样式和功能,能够快速实现表单美化。 二、jQuery UI美化表单 1. **jQuery UI组件**:...
JavaScript 表单美化和验证插件是Web开发中不可或缺的一部分,尤其在构建用户友好且具有交互性的网页时。这类插件通常提供丰富的功能,以提升表单的视觉吸引力和用户体验,同时确保数据的有效性。本插件具备以下关键...
在本文中,我们将深入探讨jQuery下拉框美化插件FancySpinBox,以及它如何通过增强交互性和视觉吸引力来提升网页表单的用户体验。FancySpinBox是一个专为改善标准HTML `<select>` 元素外观和功能而设计的JavaScript...
在实际应用中,jQuery表单美化插件通常会封装一些常用功能,例如自动填充、错误提示、表单验证等,开发者只需简单调用相关方法,就能快速实现表单的美化。同时,这些插件往往还支持自定义配置,以适应不同的设计需求...
"jQuery下拉框美化插件selectList"就是这样一个工具。 selectList是一款专为jQuery设计的轻量级插件,它的主要目标是将传统的HTML下拉框进行美化,提供更好的视觉体验和交互功能。以下是一些关于selectList插件的...
"jQuery下拉菜单表单美化插件",如"Image DropDown",正是为了提升这种体验而诞生的工具。这款插件是基于JavaScript库jQuery开发的,其主要目标是将传统的HTML `<select>` 下拉菜单转化为更具吸引力、更易用的交互...
最后,`js`目录中的文件通常是JavaScript代码,其中包含了使用jQuery进行表单美化和交互增强的逻辑。jQuery提供了一系列方法,如`.addClass()`, `.removeClass()`, `.toggleClass()`, `.attr()`, `.val()`等,可以...
为了提升用户体验和网站美观度,"form表单美化插件"应运而生。这个插件专门针对这一问题,旨在通过简单的方式将普通的HTML表单元素转化为更为现代、优雅的样式。 该插件基于jQuery库,这意味着它能够无缝集成到使用...
在表单美化方面,jQuery插件可以方便地添加动态效果,增强用户交互体验。例如,通过jQuery,我们可以实现表单元素的聚焦、验证提示、输入反馈等动态效果,使得用户在填写表单时有更流畅的感受。 该项目的核心特性...