nicejforms——美化表单不用愁_jquery

nicejforms可以算是jquery的一个插件,可以起到非常好的美化表单的作用

demo:http://www.healdream.com/upload/html/nicejforms/nicejforms_green.html
down:http://www.51files.com/?O4IXTNT9ZO9BIL954XTP

用法:
首先将两个js包含进来,就像这样

复制代码 代码如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<title>Page title</title>

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="nicejforms.js"></script>
</head>
<body>

然后加入css

复制代码 代码如下:

<style type="text/css" media="screen">@import url("niceforms.css")</style>

接着对form,设定class

复制代码 代码如下:

<form action="vars.php" method="POST" class="niceform">

最后写下如下语句
<script type="text/javascript">
$(document).ready( function() { $.NiceJForms.build(); } );
</script>
这样就大功告成了!

时间: 2024-08-03 21:25:28

nicejforms——美化表单不用愁_jquery的相关文章

jqTransform美化表单_jquery

jqTransform,是DFC Engineering写的一个jQuery的样式插件,用于美化表单元素,使用方便简单,能美化所有表单元素包括input,radio,textarea,select,checkbox.运行效果图: 使用方法: 1.添加javascript引用和css文件的引用 <link rel="stylesheet" type="text/css" href="jqtransform.css" /> <scr

基于jQuery实现的文字按钮表单特效整理_jquery

1.jQuery幻灯片按钮控制图片过渡特效 基于jQuery实现的幻灯片按钮控制图片过渡特效源码,共有4幅图片进行自动切换,且切换时有幻灯片过度的效果.用户还可自定义幻灯片的标题文字和内容.是一款非常优秀的特效源码. 在线演示 源码下载 2.htm5+CSS3实现的表单美化带输入验证特效 纯html5+css3实现的表单美化效果,以及具有输入验证特效的代码,此种特效在网站非常实用. 在线演示 源码下载 3.jquery制作的带有遮罩弹出层实现登录注册等表单 实现了点击后在原始页面上弹出想用页面的

Jquery插件easyUi实现表单验证示例_jquery

要实现的功能:在做添加学生信息的时候,利用easyui的验证功能判断 学号是否重复和学号只能为数字 最终效果如下图: 但在做这个的过程中,遇到了一系列的问题: 扩展validatebox的验证方法,最开始的验证代码如下: //学号格式只能为数字 ****//这里没有问题**** number: {//value值为文本框中的值 validator: function (value) { var reg = /^[0-9]*$/; return reg.test(value); }, messag

jquery validate表单验证插件_jquery

对于初学者而言,html表单验证是一项极其琐碎的事情.要做好表单验证,需要准备以下基本要素: 1.html表单结构:包含需要校验的表单元素: 2.js逻辑控制:在需要校验的表单元素上绑定事件,如点击.获取焦点.失去焦点等事件,并设置这些事件对应的执行函数: 3.css样式设置:针对需要校验的表单元素,需要设置默认的初始样式,以及触发元素绑定事件后的变化样式. 这3类基本要素中,html表单结构的创建相对简单.表单验证的重点和难点在于如何利用js及时有效地提醒用户有关表单操作的信息.这里我参考了百

jQuery ajaxSubmit 实现ajax提交表单局部刷新_jquery

AJAX简介 AJAX = Asynchronous JavaScript and XML(异步的 JavaScript 和 XML). AJAX 不是新的编程语言,而是一种使用现有标准的新方法. AJAX 是与服务器交换数据并更新部分网页的艺术,在不重新加载整个页面的情况下. 需要引入 : jquery-form.js 使用说明: Java代码 $(document).ready(function() { var options = { target: '#mydiv', // 需要刷新的区域

功能强大的jquery.validate表单验证插件_jquery

本文实例为大家分享了jquery.validate表单验证的使用方法,供大家参考,具体内容如下 1 .表单验证的准备工作 在开启长篇大论之前,首先将表单验证的效果展示给大家. 1.点击表单项,显示帮助提示   2.鼠标离开表单项时,开始校验元素 3.鼠标离开后的正确.错误提示及鼠标移入时的帮助提醒 对于初学者而言,html表单验证是一项极其琐碎的事情.要做好表单验证,需要准备以下基本要素: 1).html表单结构:包含需要校验的表单元素: 2).js逻辑控制:在需要校验的表单元素上绑定事件,如点

易操作的jQuery表单提示插件_jquery

本文实例讲述了一款轻量级的表单提示插件---jQuery Form Toolltip.分享给大家供大家参考.具体如下: jQuery Form Toolltip 特点: 你可以单独自定义提示信息的CSS样式. 你可以指定淡入淡出的方向,当前支持Top, Bottom, Right 和 Left 运行效果截图如下: 具体代码如下: jquery实例:jQuery Form Toolltip使用方法引入核心文件 <script src="js/jquery/2.1.1/jquery.min.j

详解利用 HTML5 美化表单教程

全新的表单元素.属性.输入类型.基于浏览器的验证.CSS3 样式技术以及 FormData 对象让创建表单变得更轻松,甚至可能更富有趣味性. 浏览器支持 在撰写本文时,所有新的表单和输入元素以及属性和类型的支持情况都会因浏览器的不同而存在很大差异.甚至在支持特定功能的各个浏览器之间,它们的行为也会互不相同.但 HTML5 表单的支持情况变化很快,且仍在不断改进.在撰写本文时,这些图表是我能找到的最新图表,它们详细说明了各个浏览器对 HTML5 表单的支持情况. 新增内容概述 新元素 HTML5

jquery自定义表单验证插件_jquery

本文实例为大家分享了jquery表单验证插件,供大家参考,具体内容如下 //正则表达式 var map = new Map(); map.put("*", /[\w\W]+/); map.put("*6-16", /^[\w\W]{6,16}$/); map.put("n", /^\d+$/); map.put("n6-16", /^\d{6,16}$/); map.put("s", /^[\u4E00-\