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 相关文章推荐
JS实现日期加减的方法
Nov 29 Javascript
JS实现弹性漂浮效果的广告代码
Sep 02 Javascript
javascript数组去重小结
Mar 07 Javascript
几种二级联动案例(jQuery\Array\Ajax php)
Aug 13 Javascript
详解Vue 2.0封装axios笔记
Jun 22 Javascript
JS实现简单的浮动碰撞效果示例
Dec 28 Javascript
js正则表达式校验指定字符串的方法
Jul 23 Javascript
webpack4 + react 搭建多页面应用示例
Aug 03 Javascript
vue.js表单验证插件(vee-validate)的使用教程详解
May 23 Javascript
微信小程序中悬浮窗功能的实现代码
Aug 02 Javascript
node后端服务保活的实现
Nov 10 Javascript
JS原型和原型链原理与用法实例详解
Feb 05 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函数分享之curl方式取得数据、模拟登陆、POST数据
2014/06/04 PHP
如何写php守护进程(Daemon)
2015/12/30 PHP
微信公众平台开发教程⑥ 微信开发集成类的使用图文详解
2019/04/10 PHP
JAVASCRIPT实现的WEB页面跳转以及页面间传值方法
2010/05/13 Javascript
Javascript中的delete介绍
2012/09/02 Javascript
Js日期选择器并自动加入到输入框中示例代码
2013/08/02 Javascript
JavaScript实现的日期控件具体代码
2013/11/18 Javascript
深入理解javascript中return的作用
2013/12/30 Javascript
js判断为空Null与字符串为空简写方法
2014/02/24 Javascript
vue通过watch对input做字数限定的方法
2017/07/13 Javascript
基于Bootstrap框架菜鸟入门教程(推荐)
2017/09/17 Javascript
JS笛卡尔积算法与多重数组笛卡尔积实现方法示例
2017/12/01 Javascript
微信小程序分享海报生成的实现方法
2018/12/10 Javascript
微信小程序本地存储实现每日签到、连续签到功能
2019/10/09 Javascript
JS document对象简单用法完整示例
2020/01/14 Javascript
uni-app如何页面传参数的几种方法总结
2020/04/28 Javascript
Jquery $.map使用方法实例详解
2020/09/01 jQuery
简单的连接MySQL与Python的Bottle框架的方法
2015/04/30 Python
Python2.7简单连接与操作MySQL的方法
2016/04/27 Python
Python变量和字符串详解
2017/04/29 Python
Python + selenium自动化环境搭建的完整步骤
2018/05/19 Python
Python图像的增强处理操作示例【基于ImageEnhance类】
2019/01/03 Python
python使用celery实现异步任务执行的例子
2019/08/28 Python
python 判断txt每行内容中是否包含子串并重新写入保存的实例
2020/03/12 Python
Pytorch转tflite方式
2020/05/25 Python
python 发送get请求接口详解
2020/11/17 Python
Canvas globalCompositeOperation
2018/12/18 HTML / CSS
Joe Fresh官网:加拿大时尚品牌和零售连锁店
2016/11/30 全球购物
德国机车企业:FC-Moto
2017/10/27 全球购物
马来西亚网上美容店:Hermo.my
2017/11/25 全球购物
德国家用电器购物网站:Premiumshop24
2019/08/22 全球购物
2014年保险业务员工作总结
2014/12/23 职场文书
2015年大学生工作总结
2015/04/21 职场文书
2015暑期社会实践个人总结
2015/07/13 职场文书
《亲亲我的妈妈》观后感(3篇)
2019/09/26 职场文书
Log4j.properties配置及其使用
2021/08/02 Java/Android