脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → 表单美化

JavaScript/jQuery 表单美化插件小结

 更新时间：2012年02月14日 15:26:33   作者：  
用过一些表单美化的工具，觉得不错，特地分享一下
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>

效果：


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>

效果：


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>

效果：



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


结尾
放上DEMO：打包下载地址
您可能感兴趣的文章:

相关文章

  • 详谈ES6中的迭代器(Iterator)和生成器(Generator)

    详谈ES6中的迭代器(Iterator)和生成器(Generator)

    下面小编就为大家带来一篇详谈ES6中的迭代器(Iterator)和生成器(Generator)。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2017-07-07
  • Javascript调用函数方法的几种方式介绍

    Javascript调用函数方法的几种方式介绍

    这篇文章主要介绍了Javascript调用函数方法的几种方式介绍,本文讲解了func()、(function(arg){})(window)、func.bind(sth)()、func.call()、func.apply()等5种方式,需要的朋友可以参考下
    2015-03-03
  • Three.js实现3D乒乓球小游戏(物理效果)

    Three.js实现3D乒乓球小游戏(物理效果)

    本文将使用React Three Fiber 和 Cannon.js 来实现一个具有物理特性的乒乓球小游戏，使用 React Three Fiber 搭建基础三维场景、如何使用新技术栈给场景中对象的添加物理特性等，最后利用上述知识点，将开发一个简单的乒乓球小游戏,需要的朋友可以参考下
    2023-03-03
  • 关于javascript event flow 的一个bug详解

    关于javascript event flow 的一个bug详解

    描述了firefox，safari 有一个bug和DOM 3 规范不一致：在event.currentTarget等于event.target的时候（即event flow处于target phase时），会调用添加到currentTarget上的useCapture为true的listener
    2013-09-09
  • aspx中利用js实现确认删除代码

    aspx中利用js实现确认删除代码

    在一些程序开发中，对于删除操作，最好再让用户确认一下，以免误操作，带来的损失，下面的方法，大家可以参考下。各个语言下，都通用的思路。
    2010-07-07
  • javascript 单例/单体模式(Singleton)

    javascript 单例/单体模式(Singleton)

    首先，单例模式是对象的创建模式之一，此外还包括工厂模式。
    2011-04-04
  • ionic2 tabs使用 Modal底部tab弹出框

    ionic2 tabs使用 Modal底部tab弹出框

    最近做了一个项目，其中要实现这样的功能，在首页底部中间的tab弹出一个页面，而且是没有底部栏的，而不是像平常滑动的一个子页面。其实实现方法很简单，下面通过本文给大家介绍下
    2016-12-12
  • 微信小程序自定义带价格显示日历效果

    微信小程序自定义带价格显示日历效果

    这篇文章主要为大家详细介绍了微信小程序自定义带价格显示日历效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2018-12-12
  • JavaScript实现浏览器网页自动滚动并点击的示例代码

    JavaScript实现浏览器网页自动滚动并点击的示例代码

    这篇文章主要介绍了JavaScript实现浏览器网页的自动滚动并点击的示例代码，帮助大家更好的理解和学习JavaScript的使用，感兴趣的朋友可以了解下
    2020-12-12
  • 利用Javascript实现简单的转盘抽奖

    利用Javascript实现简单的转盘抽奖

    这篇文章主要介绍了利用Javascript实现的简单的转盘抽奖，文中分享了两种抽奖效果，一种是默认转动，一种是需要点击开始转动的，并给出了晚上的示例代码，需要的朋友可以参考借鉴，下面来一起看看吧。
    2017-02-02

最新评论