文档章节

JavaScript/jQuery 表单美化插件

voole
 voole
发布于 2017/09/06 10:45
字数 735
阅读 67
收藏 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

粉丝 13
博文 84
码字总数 4329
作品 1
海淀
2011年12月最新JQuery插件汇总

jQuery的工具提示插件 Tipped jQuery表格插件 colResizable jQuery虚拟键盘插件 jQuery keyboard Minimit Gallery 用于显示相册、幻灯片、卷帘等效果 jQuery 幻灯效果显示插件 Diapo jQuery...

晨曦之光
2012/02/24
0
0
JavaWeb05-HTML篇笔记(一)

1.1上次课内容回顾: JQuery: JQuery的概述:是一个轻量级的JavaScript的类库.对JS进行封装. 常见的JS的框架: JQuery的使用: JQuery的选择器:(*) JQuery实现效果: JQuery样式操作: JQuer...

我是小谷粒
05/10
0
0
网站开发进阶(五十三)浅谈JS、Ajax、JQuery之间的关系

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/sunhuaqiang1/article/details/82530844 网站开发进阶(五十三)浅谈JS、Ajax、JQuery之间的关系 在项目开发过...

孙华强
09/08
0
0
收藏几个漂亮的login页面验证

大气带JS表单验证功能的注册页面模板1 http://www.js-css.cn/a/css/template/reglogin/2014/0721/1272.html 大气带JS表单验证功能的登录页面模板2 http://www.js-css.cn/a/css/template/reg...

k_k_anna
2015/03/03
0
0
67 个节省开发者时间的实用工具、库与资源(前端向)

在这篇文章中,我不会与大家谈论大型的前端框架,如 React、Angular、Vue 等,也没有涉及那些流行的代码编辑器,如 Atom、VS Code、Sublime,我只想与大家分享一个有助于提升开发人员效率的工...

张孝国
06/26
0
0

没有更多内容

加载失败,请刷新页面

加载更多

创建第一个react项目

sudo npm i -g create-react-app@1.5.2 create-react-app react-app cd react-apprm -rf package-lock.jsonrm -rf node_modules #主要是为了避免报错npm installnpm start......

lilugirl
今天
3
0
在浏览器中进行深度学习:TensorFlow.js (八)生成对抗网络 (GAN)

Generative Adversarial Network 是深度学习中非常有趣的一种方法。GAN最早源自Ian Goodfellow的这篇论文。LeCun对GAN给出了极高的评价: “There are many interesting recent development...

naughty
今天
0
0
搬瓦工镜像站bwh1.net被DNS污染,国内打不开搬瓦工官网

今天下午(2018年10月17日),继搬瓦工主域名bandwagonhost.com被污染后,这个国内的镜像地址bwh1.net也被墙了。那么目前应该怎么访问搬瓦工官网呢? 消息来源:搬瓦工优惠网->搬瓦工镜像站b...

flyzy2005
今天
6
0
SpringBoot自动配置

本篇介绍下,如何通过springboot的自动配置,将公司项目内的依赖jar,不需要扫描路径,依赖jar的情况下,就能将jar内配置了@configuration注解的类,创建到IOC里面 介绍下开发环境 JDK版本1.8 spr...

贺小五
今天
5
0
命令行新建Maven多项目

参考地址 # DgroupId 可以理解为包名# DartifactId 可以理解为项目名mvn archetype:generate -DgroupId=cn.modfun -DartifactId=scaffold -DarchetypeArtifactId=maven-archetype-quickst......

阿白
今天
4
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部