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 相关文章推荐
跨浏览器的设置innerHTML方法
Sep 18 Javascript
判断浏览器的javascript版本的代码
Sep 03 Javascript
javascript之bind使用介绍
Oct 09 Javascript
JS、CSS加载中的小问题探讨
Nov 26 Javascript
javascript数据结构之二叉搜索树实现方法
Nov 25 Javascript
JS实现的表格操作类详解(添加,删除,排序,上移,下移)
Dec 22 Javascript
浅谈JavaScript 浏览器对象
Jun 03 Javascript
knockoutjs动态加载外部的file作为component中的template数据源的实现方法
Sep 01 Javascript
在html中引入外部js文件,并调用带参函数的方法
Oct 31 Javascript
js实现砖头在页面拖拉效果
Nov 20 Javascript
详解nuxt sass全局变量(公共scss解决方案)
Jun 27 Javascript
重学 JS:为啥 await 不能用在 forEach 中详解
Apr 15 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控制网页过期时间的代码
2008/09/28 PHP
基于PHP异步执行的常用方式详解
2013/06/03 PHP
php class中public,private,protected的区别以及实例分析
2013/06/18 PHP
使用PHP实现阻止用户上传成人照片或者裸照
2014/12/25 PHP
php判断邮箱地址是否存在的方法
2016/02/13 PHP
Extjs4 消息框去掉关闭按钮(类似Ext.Msg.alert)
2013/04/02 Javascript
JS加jquery简单实现标签元素的显示或隐藏
2013/09/23 Javascript
浅析js中的浮点型运算问题
2014/01/06 Javascript
基于javascript制作微博发布栏效果
2016/04/04 Javascript
基于hover的用法实例(推荐)
2017/07/04 Javascript
vue实现全选和反选功能
2017/08/31 Javascript
详解Node.js中的Async和Await函数
2018/02/22 Javascript
KOA+egg.js集成kafka消息队列的示例
2018/11/09 Javascript
微信小程序的开发范式BeautyWe.js入门详解
2019/07/10 Javascript
Vue为什么要谨慎使用$attrs与$listeners
2020/08/27 Javascript
如何通过JS实现日历简单算法
2020/10/14 Javascript
推荐下python/ironpython:从入门到精通
2007/10/02 Python
使用python实现递归版汉诺塔示例(汉诺塔递归算法)
2014/04/08 Python
Python中线程的MQ消息队列实现以及消息队列的优点解析
2016/06/29 Python
python中的计时器timeit的使用方法
2017/10/20 Python
安装python3的时候就是输入python3死活没有反应的解决方法
2018/01/24 Python
python 通过麦克风录音 生成wav文件的方法
2019/01/09 Python
ubuntu上安装python的实例方法
2019/09/30 Python
pygame实现烟雨蒙蒙下彩虹雨
2019/11/11 Python
使用Pandas将inf, nan转化成特定的值
2019/12/19 Python
tensorflow没有output结点,存储成pb文件的例子
2020/01/04 Python
2014学年自我鉴定
2014/02/23 职场文书
元宵节晚会主持人串词
2014/03/25 职场文书
颐和园导游词400字
2015/01/30 职场文书
财务工作个人总结
2015/02/27 职场文书
2015学校年度工作总结
2015/05/11 职场文书
2015年检察院个人工作总结
2015/05/20 职场文书
2016学习全国教书育人楷模先进事迹心得体会
2016/01/21 职场文书
Python中X[:,0]和X[:,1]的用法
2021/05/10 Python
实现一个简单得数据响应系统
2021/11/11 Javascript
Navicat Premium自定义 sql 标签的创建方式
2022/09/23 数据库