JavaScript/jQuery 表单美化插件小结


Posted in Javascript onFebruary 14, 2012

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
使用方法,在页面头部引入以下脚本及样式即可:

<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>

效果:
JavaScript/jQuery 表单美化插件小结

Uniform
这是jQuery的表单美化插件
官方网站及在线演示:http://uniformjs.com/
github主页:https://github.com/pixelmatrix/uniform
使用方法,在页面头部引入以下脚本及样式:

<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
使用方法,在页面头部引入以下脚本及样式即可:

<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/
使用方法,在页面头部引入以下脚本及样式即可:

<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>

效果:
JavaScript/jQuery 表单美化插件小结

jqTransform
jqTransform也是jQuery的一款表单美化插件
官方网站及在线演示:http://www.dfc-e.com/metiers/multimedia/opensource/jqtransform/
使用方法,在页面头部引入以下脚本及样式即可:

<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>

效果:
JavaScript/jQuery 表单美化插件小结

Carbon Fiber Signup Form
纤维化登录表单,这货没有任何js,只有css/html
官方网站:http://tutorialzine.com/2010/04/carbon-signup-form/
效果:
JavaScript/jQuery 表单美化插件小结

结尾
放上DEMO:打包下载地址

Javascript 相关文章推荐
JavaScript通过使用onerror设置默认图像显示代替alt
Mar 01 Javascript
js 求时间差的实现代码
Apr 26 Javascript
第一篇初识bootstrap
Jun 21 Javascript
Angular-Touch库用法示例
Dec 22 Javascript
各种选择框jQuery的选中方法(实例讲解)
Jun 27 jQuery
纯js实现页面返回顶部的动画(超简单)
Aug 10 Javascript
javascript 面向对象实战思想分享
Sep 07 Javascript
JS鼠标3次点击事件实现代码及扩展思路
Sep 12 Javascript
解决jQuery使用append添加的元素事件无效的问题
Aug 30 jQuery
Vue.js 中 axios 跨域访问错误问题及解决方法
Nov 21 Javascript
Vue 前端实现登陆拦截及axios 拦截器的使用
Jul 17 Javascript
vue 判断两个时间插件结束时间必选大于开始时间的代码
Nov 04 Javascript
Firefox/Chrome/Safari的中可直接使用$/$$函数进行调试
Feb 13 #Javascript
情人节之礼 js项链效果
Feb 13 #Javascript
jQuery.getScript加载同域JS的代码
Feb 13 #Javascript
理解JavaScript的prototype属性
Feb 11 #Javascript
情人节专属 纯js脚本1k大小的3D玫瑰效果
Feb 11 #Javascript
基于jquery实现状态限定编辑的代码
Feb 11 #Javascript
通过jquery还原含有rowspan、colspan的table的实现方法
Feb 10 #Javascript
You might like
php数据库密码的找回的步骤
2011/01/12 PHP
php中判断数组相等的方法以及数组运算符介绍
2015/03/30 PHP
PHPExcel导出2003和2007的excel文档功能示例
2017/01/04 PHP
PHP后台微信支付和支付宝支付开发
2017/04/28 PHP
laravel框架使用FormRequest进行表单验证,验证异常返回JSON操作示例
2020/02/18 PHP
JS Timing
2007/04/21 Javascript
Javascript验证Visa和MasterCard信用卡号的方法
2015/07/27 Javascript
深入理解jQuery中的事件冒泡
2016/05/24 Javascript
JS中用三种方式实现导航菜单中的二级下拉菜单
2016/10/31 Javascript
javascript实现页面滚屏效果
2017/01/17 Javascript
jQuery通过改变input的type属性实现密码显示隐藏切换功能
2017/02/08 Javascript
JavaScript中数组Array.sort()排序方法详解
2017/03/01 Javascript
vue音乐播放器插件vue-aplayer的配置及其使用实例详解
2017/07/10 Javascript
Angular6中使用Swiper的方法示例
2018/07/09 Javascript
js实现网页同时进行多个倒计时功能
2019/02/25 Javascript
VUEX采坑之路之获取不到$store的解决方法
2019/11/08 Javascript
通过js实现压缩图片上传功能
2020/02/25 Javascript
js前端对于大量数据的展示方式及处理方法
2020/12/02 Javascript
python uuid模块使用实例
2015/04/08 Python
在Django中创建URLconf相关的通用视图的方法
2015/07/20 Python
python使用json序列化datetime类型实例解析
2018/02/11 Python
python使用Flask操作mysql实现登录功能
2018/05/14 Python
Python基于opencv调用摄像头获取个人图片的实现方法
2019/02/21 Python
Python学习笔记之文件的读写操作实例分析
2019/08/07 Python
python 实现视频 图像帧提取
2019/12/10 Python
深入了解Python enumerate和zip
2020/07/16 Python
FLIR美国官网:热成像, 夜视和红外摄像系统
2018/07/13 全球购物
List、Map、Set三个接口,存取元素时,各有什么特点?
2015/09/27 面试题
怎样建立和理解非常复杂的声明?例如定义一个包含N 个指向返回 指向字符的指针的函数的指针的数组?
2013/03/19 面试题
师范应届生语文教师求职信
2013/10/29 职场文书
保护环境倡议书500字
2014/05/19 职场文书
大学生毕业评语
2014/12/31 职场文书
2015年会计个人工作总结
2015/04/02 职场文书
幼儿园中班班级总结
2015/08/10 职场文书
Python包argparse模块常用方法
2021/06/04 Python
Golang解析JSON对象
2022/04/30 Golang