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 相关文章推荐
Jquery 高亮显示文本中重要的关键字
Dec 24 Javascript
javascript textContent与innerText的异同分析
Oct 22 Javascript
用JS实现一个TreeMenu效果分享
Aug 28 Javascript
js实现仿百度瀑布流的方法
Feb 05 Javascript
JavaScript正则表达式的分组匹配详解
Feb 13 Javascript
JavaScript中的原型prototype完全解析
May 10 Javascript
jQuery获取访问者IP地址的方法(基于新浪API与QQ查询接口)
May 25 Javascript
js 实现获取name 相同的页面元素并循环遍历的方法
Feb 14 Javascript
浅谈如何使用 webpack 优化资源
Oct 20 Javascript
vue中使用localstorage来存储页面信息
Nov 04 Javascript
JS内置对象和Math对象知识点详解
Apr 03 Javascript
vue动态合并单元格并添加小计合计功能示例
Nov 26 Vue.js
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使用正则表达式获取图片url的方法
2015/01/16 PHP
PHP里的单例类写法实例
2015/06/25 PHP
PHP实现git部署的方法教程
2017/12/19 PHP
iframe 上下滚动条如何默认在下方实现原理
2012/12/10 Javascript
jquery图片放大镜功能的实例代码
2013/03/26 Javascript
jQuery图片轮播的具体实现
2013/09/11 Javascript
js控制分页打印、打印分页示例
2014/02/08 Javascript
jquery 操作css样式、位置、尺寸方法汇总
2014/11/28 Javascript
AngularJS入门教程(零):引导程序
2014/12/06 Javascript
jquery实现的淡入淡出下拉菜单效果
2015/08/25 Javascript
js实现基于正则表达式的轻量提示插件
2015/08/29 Javascript
利用js获取下拉框中所选的值
2016/12/01 Javascript
jQuery.Form上传文件操作
2017/02/05 Javascript
100多个基础常用JS函数和语法集合大全
2017/02/16 Javascript
浅谈Vue.js
2017/03/02 Javascript
关于javascript sort()排序你可能忽略的一点理解
2017/07/18 Javascript
JS实现的判断方法、变量是否存在功能示例
2020/03/28 Javascript
Vue项目路由刷新的实现代码
2019/04/17 Javascript
vue子组件改变父组件传递的prop值通过sync实现数据双向绑定(DEMO)
2020/02/01 Javascript
使用nodeJS中的fs模块对文件及目录进行读写,删除,追加,等操作详解
2020/02/06 NodeJs
使用 Python 获取 Linux 系统信息的代码
2014/07/13 Python
结合Python的SimpleHTTPServer源码来解析socket通信
2016/06/27 Python
[原创]教女朋友学Python(一)运行环境搭建
2017/11/29 Python
python交易记录整合交易类详解
2019/07/03 Python
Python面向对象之Web静态服务器
2019/09/03 Python
Docker部署Python爬虫项目的方法步骤
2020/01/19 Python
css3中背景尺寸background-size详解
2014/09/02 HTML / CSS
CSS3绘制圆角矩形的简单示例
2015/09/28 HTML / CSS
html5唤起app的方法
2017/11/30 HTML / CSS
缅甸网上购物:Shop.com.mm
2017/12/05 全球购物
瑞典香水、须后水和美容产品购物网站:Parfym-Klick.se
2019/12/29 全球购物
计算机科学与技术应届生求职信
2013/11/07 职场文书
产品质量承诺书
2014/03/27 职场文书
广播体操口号
2014/06/18 职场文书
二手房购房协议书范本
2014/10/05 职场文书
postgresql无序uuid性能测试及对数据库的影响
2021/06/11 PostgreSQL