文档章节

JavaScript/jQuery 表单美化插件

voole
 voole
发布于 2017/09/06 10:45
字数 735
阅读 60
收藏 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
博文 79
码字总数 3761
作品 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
收藏几个漂亮的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
jquery 提交form表单

这个其实挺简单的,只是一开始我想错了,一开始我打算用jQuery + jQuery.form插件来做,其实不必的,只需要jQuery插件就可以了。首先,在jsp页面中导入jQuery, <script type="text/javascr...

背起行囊去远行
2013/03/20
0
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

maven坐标和依赖

一、maven坐标详解 <groupId>com.fgt.club</groupId><artifactId>club-common-service-facade</artifactId><version>3.0.0</version><packaging>jar</packaging> maven的坐标元素说......

老韭菜
今天
1
0
springmvc-servlet.xml配置表功能解释

问:<?xml version="1.0" encoding="UTF-8" ?> 答: xml version="1.0"表示是此xml文件的版本是1.0 encoding="UTF-8"表示此文件的编码方式是UTF-8 问:<!DOCTYPE beans PUBLIC "-//SPRING//......

隐士族隐逸
今天
1
0
基于TP5的微信的公众号获取登录用户信息

之前讲过微信的公众号自动登录的菜单配置,这次记录一下在TP5项目中获取自动登录的用户信息并存到数据库的操作 基本的流程为:微信设置自动登录的菜单—>访问的URL指定的函数里获取用户信息—...

月夜中徘徊
今天
0
0
youTrack

package jetbrains.teamsys.license.runtime; 计算lis package jetbrains.ring.license.reader; 验证lis 安装后先不要生成lis,要把相关文件进行替换 ring-license-checker-1.0.41.jar char......

max佩恩
今天
1
0
12.17 Nginx负载均衡

Nginx负载均衡 下面的dig看到可以返回2个IP,就是解析出来的IP,这样我们可以做负载均衡。 dig www.qq.com 1.vim /usr/local/nginx/conf/vhost/fuzai.conf 2.添加如下配置 upstream qq //定义...

芬野de博客
今天
0
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部