文档章节

JavaScript/jQuery 表单美化插件

voole
 voole
发布于 2017/09/06 10:45
字数 735
阅读 72
收藏 0

用过一些表单美化的工具,觉得不错,特地分享一下

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

使用方法,在页面头部引入以下脚本及样式即可:

 

1

2

3

4

5

6

7

8

9

10

<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

使用方法,在页面头部引入以下脚本及样式:

 

1

2

3

4

5

6

7

8

<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

使用方法,在页面头部引入以下脚本及样式即可:

 

1

2

3

4

5

6

7

8

<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/

使用方法,在页面头部引入以下脚本及样式即可:

 

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

<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/

使用方法,在页面头部引入以下脚本及样式即可:

 

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

<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:点击下载

本文转载自:http://www.cnblogs.com/lwme/archive/2012/02/14/javascript-jquery-form-beautify-tool.html

共有 人打赏支持
voole

voole

粉丝 16
博文 95
码字总数 4329
作品 1
海淀
私信 提问
10 个新的 jQuery 表单插件(2013年8月)

1. Chosen jQuery Chosen Plugin 是一个 jQuery 插件,用来将网页中的下拉框进行功能扩展和美化。可实现对下拉框的搜索,多个标签编辑等功能,如下图所示: 2. Form Validation Engine jQue...

oschina
2013/08/03
6.4K
11
使用jQuery插件开发一个完整验证功能的超酷动态留言版系统

在线演示 本地下载 今 天是情人节,这里我们将创建一个超酷的动态留言板来帮助大家度过这个情人节,可能大家使用过很多的评论或者留言系统,基本都是静态输入的形式,今天我们创 建的这个留言...

gbin1
2012/02/15
844
2
20个jQuery插件,帮你打造完美网页表单

网页表单主要是用来从用户那里收集一些必要的信息,是网页设计中不可或缺的一环。一个设计良好的表单能更有效的获取用户信息,也会给用户带来更好地使用体 验。基于这一点,很多设计师开始使...

鉴客
2012/03/31
4.9K
13
12 个必要的 jQuery 表单插件

Web表单是网站中很常见的Web组件,你用它来收集数据,用户的详细信息等。然而,现有的表单限制很多,功能比较简单,尽管有 HTML5 ,不幸的是,并非所有浏览器都支持它,所以现在我们可以使用...

红薯
2012/03/28
5.7K
8
10个强大的Javascript表单验证插件推荐

创建一个JavaScript表单验证插件,可以说是一个繁琐的过程,涉及到初期设计、开发与测试等等环节。实际上一个优秀的程序员不仅是技术高手,也应该是善假于外物的。本文介绍了10个不错的JavaS...

leon_rock
2012/04/20
41.4K
4

没有更多内容

加载失败,请刷新页面

加载更多

09.ajax局部渲染---《Beetl视频课程》

本期视频实现分类实时获取; 内容简介:使用了局部渲染技术,实现分类的实时获取 一起学beetl目录:https://my.oschina.net/u/1590490?tab=newest&catalogId=6214598 作者:GK Beetl满足了更...

Gavin-King
14分钟前
1
0
同步访问共享的可变数据(66)

关键字synchronized 保证同一时刻,只有一个线程执行某一个方法或代码块 当一个对象被一个线程修改时,可以阻止其他线程看到其内部的不一致状态 正确的使用同步可以避免任何对象看到其不一致...

Java搬砖工程师
16分钟前
1
0
银行卡二要素真实性查询

验证用户的银行卡号、持卡人姓名是否真实。 示例代码: private static String host = "https://bank.market.alicloudapi.com";private static String path = "/bank2";private sta...

貔貅叔
20分钟前
1
0
iOS补位动画、沙漏效果、移动UITableViewCell、模拟贪吃蛇、拖拽进度等源码

iOS精选源码 JHAlertView - 一款黑白配色的HUD之沙漏效果 继承UIButton的自定义按钮SPButton 用递归算法实现iOS补位动画 iOS 长按移动UITableViewCell JHLikeButton - 有趣的点赞动画 兼容X...

Android爱开源
31分钟前
1
0
上币至iamToken

https://github.com/consenlabs/token-profile 点击Fork按钮,插入到自己的github项目中 cd /Users/shijun/Desktop/blockChain/iamToken git clone https://github.com/yellmi1983/token-pro......

八戒八戒八戒
34分钟前
1
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部