JavaScript/jQuery 表单美化插件
博客专区 > voole 的博客 > 博客详情
JavaScript/jQuery 表单美化插件
voole 发表于3个月前
JavaScript/jQuery 表单美化插件
  • 发表于 3个月前
  • 阅读 35
  • 收藏 0
  • 点赞 0
  • 评论 0

腾讯云 技术升级10大核心产品年终让利>>>   

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

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

共有 人打赏支持
voole
粉丝 13
博文 56
码字总数 2778
作品 1
×
voole
如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作!
* 金额(元)
¥1 ¥5 ¥10 ¥20 其他金额
打赏人
留言
* 支付类型
微信扫码支付
打赏金额:
已支付成功
打赏金额: