文档章节

JavaScript/jQuery 表单美化插件

voole
 voole
发布于 2017/09/06 10:45
字数 735
阅读 53
收藏 0
点赞 0
评论 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

粉丝 12
博文 75
码字总数 3549
作品 1
海淀
JavaWeb05-HTML篇笔记(一)

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

我是小谷粒 ⋅ 05/10 ⋅ 0

jQuery之validate验证表单

访问jQuery validate官网下载最新插件 https://jqueryvalidation.org/ validate是用来验证表单的 以前我们都是用js手动验证 现在可以通过这个插件直接调用别人写好的方法 更加简单方便 vali...

codingcoge ⋅ 05/19 ⋅ 0

强大的JQuery-自定义插件

====jQuery插件编写原则===== 1.命名 jQuery..js 2.插件内部,this指向的是当前选择器取得的JQuery对象,不是内部对象, 例如click(), 内部的this指向的是DOM元素 3.this.each可以遍历所有元素...

chengfei_liu ⋅ 05/25 ⋅ 0

jQuery学习笔记--选择器和事件

以下内容参考 W3school 简书 你要是问我什么是jQuery 那可以这么两句话概括: jQuery 是一个 JavaScript 库。 jQuery 极大地简化了 JavaScript 编程。 要学jQuery最好有点javaScript的基础 ...

codingcoge ⋅ 05/17 ⋅ 0

来学着写自己的“jQuery”

jQuery是一套跨浏览器的JavaScript库,简化HTML与JavaScript之间的操作 jQuery是开源软件,使用MIT许可证授权。jQuery的语法设计使得许多操作变得容易,如操作文档对象(document)、选择文档...

YyzclYang ⋅ 05/24 ⋅ 0

jQuery函数attr()和prop()的区别

在jQuery中,attr()函数和prop()函数都用于设置或获取指定的属性,它们的参数和用法也几乎完全相同。 但不得不说的是,这两个函数的用处却并不相同。下面我们来详细介绍这两个函数之间的区别...

Apirl ⋅ 05/16 ⋅ 0

js (jQuery) 之 取值

都是一些老生常谈,没什么新东西,算是开发过程中不知道怎么写去百度的一些东西 。都说程序员写博客是一个好习惯,算是一份保存笔记,以后不用到处百度然后出来的一些答非所问的答案 。 1: ...

architect刘源源 ⋅ 05/07 ⋅ 0

JavaScript 参考手册

JavaScript 参考手册 http://www.w3school.com.cn/jsref/index.asp 本部分提供完整的 JavaScript 参考手册: JavaScript 本地对象和内置对象 Browser 对象(BOM) HTML DOM 对象 JavaScript...

chenhao_asd ⋅ 05/25 ⋅ 0

缅甸银河国际开户13170533331

解决这个问题涉及到两个方面的问题: 配置问题 、引入静态文件问题 1、配置问题 web.xml配置的DispatchServlet如下: [html] view plain copy springmvc org.springframework.web.servlet.D...

银河国际 ⋅ 05/26 ⋅ 0

写的一个轻量级javascript框架的设计模式

公司一直使用jQuery框架,一些小的项目还是觉得jQuery框架太过于强大了,于是自己周末有空琢磨着写个自己的框架。谈到js的设计模式,不得不说说js的类继承机制,javascript不同于PHP可以轻松...

thinkyoung ⋅ 2014/12/05 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

linux 安装docker

通过以下命令下载安装docker wget -qO- https://get.docker.com | sh 执行以上命令后输出以下内容说明安装成功,注意红框中的内容,docker安装成功后默认只有root能使用,红框中给出的提示是...

haoyuehong ⋅ 24分钟前 ⋅ 0

482. License Key Formatting - LeetCode

Question 482. License Key Formatting Solution 思路:字符串转化为char数组,从后遍历,如果是大写字母就转化为小写字母,如果是-就忽略,如果遍历了k个字符(排除-)就追加一个-。 Java实现...

yysue ⋅ 43分钟前 ⋅ 0

聊聊spring cloud gateway的LoadBalancerClientFilter

序 本文主要研究一下spring cloud gateway的LoadBalancerClientFilter GatewayLoadBalancerClientAutoConfiguration spring-cloud-gateway-core-2.0.0.RELEASE-sources.jar!/org/springfram......

go4it ⋅ 今天 ⋅ 0

详解:Nginx反代实现Kibana登录认证功能

Kibana 5.5 版后,已不支持认证功能,也就是说,直接打开页面就能管理,想想都不安全,不过官方提供了 X-Pack 认证,但有时间限制。毕竟X-Pack是商业版。 下面我将操作如何使用Nginx反向代理...

问题终结者 ⋅ 今天 ⋅ 0

002、nginx配置虚拟主机

一、nginx配置虚拟主机可分为三种方式,分别为: 1、基于域名的虚拟主机,通过域名来区分虚拟主机——应用:外部网站 2、基于端口的虚拟主机,通过端口来区分虚拟主机——应用:公司内部网站...

北岩 ⋅ 今天 ⋅ 0

shell脚本之死循环写法

最近在学习写shell脚本,在练习if while等流程控制时,突然它们的死循环写法是怎么样的?经过百度与亲测记录如下: for死循环 #! /bin/bashfor ((;;));do date sleep 1d...

hensemlee ⋅ 今天 ⋅ 0

苹果的ARKit2.0有多可怕,看了就知道

序言 ARKit主要由三部分组成: 跟踪(Tracking) 跟踪是ARKit的核心组件之一,其提供了设备在物理世界中的位置与方向信息,并对物体进行跟踪,如人脸。 2.场景理解(Scene Understanding) 场...

_小迷糊 ⋅ 今天 ⋅ 0

5.1 vim介绍 5.2 vim移动光标 5.3 ,5.4vim一般模式下移动光标,复制粘贴

vim命令 vim是vi的一个升级版;vim可以显示文字的颜色 安装vim这一个包vim-enhanced 如果不知道安装包,可以使用 命令下面命令来查看vim命令是那个包安装的。 [root@linux-128 ~]# yum prov...

Linux_老吴 ⋅ 今天 ⋅ 0

vim一般模式

vim 是什么 vim是什么 ? 在之前接触Linux,编辑网卡配置文件的时候我们用过了vi ,vim简单说就是vi的升级版,它跟vi一样是Linux系统中的一个文本编辑工具。 如果系统中没有vim ,需要安装一...

李超小牛子 ⋅ 今天 ⋅ 0

docker实战

构建企业级Docker虚拟化平台实战 重点剖析虚拟化和云计算概念; 分析Docker虚拟化的概念和原理; 从0开始实战Docker虚拟化平台; 基于Docker构建Nginx WEB服务器和CentOS虚拟机; 基于开源监...

寰宇01 ⋅ 今天 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部