首页 > web前端 > js教程 > 正文

JavaScript/jQuery 表单美化插件小结_javascript技巧

WBOY
发布: 2016-05-16 17:56:12
原创
1385 人浏览过
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
使用方法,在页面头部引入以下脚本及样式即可:
复制代码 代码如下:




<script> <br>imagesPath = "niceforms-v2.0/img/";// niceforms图片资源的路径 <br></script>

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

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




<script> <br>$(function() { <br>$("input, textarea, select, button").uniform(); <br>}); <br></script>

Uniform包含3种主题default,Aristo,Agent,使用时引用相应目录下的css即可。
效果请直接看官方演示

Formly
Formly也是jQuery的一款表单美化插件
官方网站及在线演示:http://thrivingkings.com/formly/
github:https://github.com/ThrivingKings/Formly
使用方法,在页面头部引入以下脚本及样式即可:
复制代码 代码如下:




<script> <br>$(function() { <br>$("form").formly(); <br>}); <br></script>

效果请直接看官方演示

Ideal Forms
Ideal Forms也是jQuery的一款表单美化插件
官方网站:spacirdesigns.com/jqidealforms
GoogleCode:http://code.google.com/p/idealforms/
使用方法,在页面头部引入以下脚本及样式即可:
复制代码 代码如下:








<script> <br>$(function() { <br>$("#fancyform").idealforms(); <br>}); <br></script>

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

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





<script> <br>$(function() { <br>$('form').jqTransform({ imgPath: 'jqtransformplugin/img/' }); <br>}); <br></script>

效果:



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


结尾
放上DEMO:打包下载地址
相关标签:
来源:php.cn
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
最新问题
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板