jQuery整理笔记七----几个经典表单应用
1、文本框获得(失去)焦点
当文本框获得输入焦点时,将该文本框高亮显示，算不得一个应用，仅仅是一个小技巧，能够提高用户体验。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<style type="text/css">
body{
font:normal 12px/17px Arial;
}
div{
padding:2px;
}
input, textarea {
width: 12em;
border: 1px solid #888;
}
.focus {
border: 1px solid #f00;
background: #fcc;
}
</style>
<!-- 引入jQuery -->
<script src="jquery-2.1.0.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
$(":input").focus(function(){
$(this).addClass("focus");
if($(this).val() ==this.defaultValue){
$(this).val("");
}
}).blur(function(){
$(this).removeClass("focus");
if ($(this).val() == '') {
$(this).val(this.defaultValue);
}
});
})
</script>
</head>
<body>
<form action="" method="post" id="regForm">
<fieldset>
<legend>个人基本信息</legend>
<div>
<label for="username">名称:</label>
<input id="username" type="text" value="名称" />
</div>
<div>
<label for="pass">password:</label>
<input id="pass" type="password" value="password" />
</div>
<div>
<label for="msg">具体信息:</label>
<textarea id="msg" rows="2" cols="20">具体信息</textarea>
</div>
</fieldset>
</form>
</body>
</html>
效果图：
2、Elastic弹性文本域
Elastic是一款功能专一的表单插件，他能够控制页面内表单域(<textarea>)标签高度自己主动伸缩。以适应包括的文本。应用这个插件的时候页面须要引入jquery.elastic.source.js。
插件下载地址：点击进入下载页面
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title> New Document </title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="jquery-2.1.0.min.js" type="text/javascript"></script>
<script src="jquery.elastic.source.js" type="text/javascript" ></script>
<script type="text/javascript">
//页面载入方法
$(function(){
$("textarea").elastic();//应用弹性文本框
})
</script>
</head> <body>
<textarea name="" rows="2" cols="43">
沁园春·雪
北国风光，千里冰封，万里雪飘。 望长城内外。惟余莽莽；大河上下，顿失滔滔。 山舞银蛇，原驱蜡象，欲与天公试比高。 须晴日，看红装素裹，分外妖娆。 江山如此多娇。引无数英雄竞折腰。 惜秦皇汉武，略输文採；唐宗宋祖，稍逊风骚。 一代天骄。成吉思汗，仅仅识弯弓射大雕。 俱往矣。数风流人物，还看今朝。 </textarea>
</body>
</html>
效果图：
我们最初设置的<textarea>标签的rows属性值为2 ,随着文本内容的增多高度会自己主动添加。当然了，随着内容的降低也能够高度降低的。
3、Autotab自己主动Tab文本框
Autotab也是一款功能专一的表单插件，它提供了自己主动跳格的功能，当用户输入的字符数一旦超过已定义的最大长度，则会依据事先设置的目标自己主动跳转到对应元素上。省却了
用户按【Tab】键的麻烦。最典型的应用就是输入IP地址、软件激活码等地方了，我们做的web项目中也有非常多地方能够用到这插件。对于提高用户体验还是非常有帮助的。
使用时须要引入jquery.autotab.js,下载地址：点击进入下载页面
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title> New Document </title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="jquery-2.1.0.min.js" type="text/javascript"></script>
<script src="jquery.autotab.js" type="text/javascript"></script>
<script type="text/javascript">
//页面载入方法
$(function(){
$('#autotab').submit(function(){
return false;
})
$('#autotab :input').autotab_magic();//为页面文本框绑定autotab插件
})
</script>
</head> <body>
<h1>jQuery整理笔记七</h1>
<h2>Autotab自己主动Tab文本框</h2>
<form method="post" action="" id="autotab">
<label>请输入验证码：
<input type="text" name="num1" id="num1" maxlength="3" size="3">
<input type="text" name="num2" id="num2" maxlength="3" size="3">
<input type="text" name="num3" id="num3" maxlength="3" size="3">
<input type="text" name="num4" id="num4" maxlength="3" size="3">
<input type="text" name="num5" id="num5" maxlength="3" size="3">
<input type="text" name="num6" id="num6" maxlength="3" size="3">
</form>
</body>
</html>
除了能够限定输入长度外，还能够通过autotab_filter()方法限定输入的字符类型，这种方法还能过滤大写、小写、空格、字母等。详细的用到了现查吧。
假设将上面的js改成：
$(function(){
$('#autotab').submit(function(){
return false;
});
$('#autotab :input').autotab_magic().autotab_filter('numeric');
})
就是仅仅能输入数字了。
4、passwordStrength密码强度指标
passwordStrength插件可以依据用户输入的password,以图形化方式显示password的强度。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>passwordStrength</title>
<link href="css/style.css" rel="stylesheet" type="text/css" media="all" />
<script type="text/javascript" src="jquery-2.1.0.min.js"></script>
<script type="text/javascript" src="passwordStrength.js"></script>
<script type="text/javascript">
$(function(){
$('input[name="password"]').passwordStrength();
})
</script>
<style type="text/css">
.is0{background:url(images/progressImg1.png) no-repeat 0 0;width:138px;height:7px;margin:10px 0 0 104px;}
.is10{background-position:0 -7px;}
.is20{background-position:0 -14px;}
.is30{background-position:0 -21px;}
.is40{background-position:0 -28px;}
.is50{background-position:0 -35px;}
.is60{background-position:0 -42px;}
.is70{background-position:0 -49px;}
.is80{background-position:0 -56px;}
.is90{background-position:0 -63px;}
.is100{background-position:0 -70px;} #autotab input { width:138px; }
</style>
</head>
<body>
<h1>jQuery整理笔记七</h1>
<h2>表单开发（Forms）</h2>
<hr />
<h3>passwordStrength密码强度指标</h3>
<form action="" method="post" id="autotab" class="p1">
<label>请输入密码：
<input type="password" name="password" />
<div id="passwordStrengthDiv" class="is0"></div>
</label>
</form>
</body>
</html>
上例用到一个图片：
watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvY2FvaGFpY2hlbmc=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" alt="">
运行效果图：
5、formToWizard表单填充向导
这个是什么意思呢？事实上我们实际见的也非常多，有非常多站点填写注冊信息的时候是分步进行的，例如说，先填写个人信息，然后再填写工作信息...然后一起提交。这就避免了庞
大的信息量都在一个页面上进行填写。
formToWizard就是解决问题的一个小插件，插件下载地址:点击进入下载页面
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title> New Document </title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="jquery-2.1.0.min.js" type="text/javascript"></script>
<script type="text/javascript" src="formToWizard.js"></script>
<script type="text/javascript">
//页面载入方法
$(function(){
$("#form1").formToWizard({ submitButton: 'SaveAccount' })
})
</script>
<style type="text/css">
#wrap { margin:1em 4em; font-size:12px; padding:1em 1em; border:solid 1px #fff; }
fieldset { border:none; width:320px; }
legend { font-size:18px; margin:0px; padding:10px 0px; color:#b0232a; font-weight:bold; }
label { display:block; margin:15px 0 5px; }
input[type=text], input[type=password] { width:300px; padding:5px; border:solid 1px #000; }
.prev, .next { background-color:#b0232a; padding:5px 10px; color:#fff; text-decoration:none; }
.prev:hover, .next:hover { background-color:#000; text-decoration:none; }
.prev { float:left; }
.next { float:right; }
#steps { list-style:none; width:100%; overflow:hidden; margin:0px; padding:0px; }
#steps li { font-size:24px; float:left; padding:10px; color:#b0b1b3; }
#steps li span { font-size:11px; display:block; }
#steps li.current { color:#000; }
#makeWizard { background-color:#b0232a; color:#fff; padding:5px 10px; text-decoration:none; font-size:18px; }
#makeWizard:hover { background-color:#000; }
</style>
</head> <body>
<div id="wrap">
<form id="form1" action="">
<fieldset>
<legend>登录信息</legend>
<label for="Name">昵称</label>
<input id="Name" type="text" />
<label for="Email">Email</label>
<input id="Email" type="text" />
<label for="Password">密码</label>
<input id="Password" type="password" />
</fieldset>
<fieldset>
<legend>公司信息</legend>
<label for="CompanyName">公司名称</label>
<input id="CompanyName" type="text" />
<label for="Website">公司网址</label>
<input id="Website" type="text" />
<label for="CompanyEmail">公司邮箱</label>
<input id="CompanyEmail" type="text" />
</fieldset>
<fieldset>
<legend>个人信息</legend>
<label for="NameOnCard">真实姓名</label>
<input id="NameOnCard" type="text" />
<label for="CardNumber">身份证号</label>
<input id="CardNumber" type="text" />
<label for="CreditcardMonth">发卡日期</label>
<select id="CreditcardMonth">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
</select>
<select id="CreditcardYear">
<option value="2009">2009</option>
<option value="2010">2010</option>
<option value="2011">2011</option>
</select>
<label for="Address1">地址1</label>
<input id="Address1" type="text" />
<label for="Address2">地址2</label>
<input id="Address2" type="text" />
<label for="City">城市</label>
<input id="City" type="text" />
<label for="Country">国家</label>
<select id="Country">
<option value="CA">Canada</option>
<option value="US">United States of America</option>
<option value="GB">United Kingdom (Great Britain)</option>
<option value="AU">Australia</option>
<option value="JP">Japan</option>
</select>
</fieldset>
<div>
<input id="SaveAccount" type="button" value="提交表单" />
</div>
</div>
</form>
</body>
</html>
效果图：
watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvY2FvaGFpY2hlbmc=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" alt="">
6、checkbox复选框(全选反选等操作)
曾经经经常使用。不说了。
7、下拉框的应用
这回先看个图：
大家肯定都见过类似效果的网页，怎么实现的呢,代码非常easy：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<style type="text/css">
* { margin:0; padding:0; }
div.centent {
float:left;
text-align: center;
margin: 10px;
}
span {
display:block;
margin:2px 2px;
padding:4px 10px;
background:#898989;
cursor:pointer;
font-size:12px;
color:white;
}
</style>
<!-- 引入jQuery -->
<script src="jquery-2.1.0.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
//移到右边
$('#add').click(function() {
//获取选中的选项。删除并追加给对方
$('#select1 option:selected').appendTo('#select2');
});
//移到左边
$('#remove').click(function() {
$('#select2 option:selected').appendTo('#select1');
});
//所有移到右边
$('#add_all').click(function() {
//获取所有的选项,删除并追加给对方
$('#select1 option').appendTo('#select2');
});
//所有移到左边
$('#remove_all').click(function() {
$('#select2 option').appendTo('#select1');
});
//双击选项
$('#select1').dblclick(function(){ //绑定双击事件
//获取所有的选项,删除并追加给对方
$("option:selected",this).appendTo('#select2'); //追加给对方
});
//双击选项
$('#select2').dblclick(function(){
$("option:selected",this).appendTo('#select1');
});
});
</script> </head>
<body>
<div class="centent">
<select multiple="multiple" id="select1" style="width:100px;height:160px;">
<option value="1">曹操</option>
<option value="2">曹昂</option>
<option value="3">曹丕</option>
<option value="4">曹彰</option>
<option value="5">曹植</option>
<option value="6">曹熊</option>
<option value="7">曹仁</option>
<option value="8">曹洪</option>
<option value="9">曹休</option>
<option value="10">曹真</option>
<option value="11">曹爽</option>
</select>
<div>
<span id="add" >选中加入到右边>></span>
<span id="add_all" >所有加入到右边>></span>
</div>
</div>
<div class="centent">
<select multiple="multiple" id="select2" style="width: 100px;height:160px;">
<option value="12">曹芳</option>
</select>
<div>
<span id="remove"><<选中删除到左边</span>
<span id="remove_all"><<所有删除到左边</span>
</div>
</div>
</body>
</html>
代码实现的功能：
1)、将选中的选项加入给对方
2)、将所有选项加入给对方
3)、双击某个选项将其加入给对方
jQuery整理笔记七----几个经典表单应用的更多相关文章
- jQuery整理笔记文件夹
jQuery整理笔记文件夹 jQuery整理笔记一----jQuery開始 jQuery整理笔记二----jQuery选择器整理 jQuery整理笔记三----jQuery过滤函数 jQuery整理笔 ...
- jQuery几个经典表单应用整理回想
1.文本框获得(失去)焦点 当文本框获得输入焦点时,将该文本框高亮显示,算不得一个应用.仅仅是一个小技巧,能够提高用户体验. [html] view plaincopy <span style= ...
- 使用jQuery.form插件，实现完美的表单异步提交
传送门:异步编程系列目录…… 时间真快,转眼一个月快结束了,一个月没写博客了!手开始生了,怎么开始呢…… 示例下载:使用jQuery.form插件,实现完美的表单异步提交.rar 月份的尾巴,今天的主 ...
- jQuery UI 对话框（Dialog） - 模态表单
<!doctype html><html lang="en"><head> <meta charset="utf-8" ...
- JQuery插件使用之Validation 快速完成表单验证的几种方式
JQuery的Validation插件可以到http://plugins.jquery.com/上去下载.今天来分享一下,关于这个插件的使用. 简易使用 这第一种方式可谓是傻瓜式的使用,我们只需要按照 ...
- Jquery easyui 重置按钮，easyui 清空表单，Jquery easyui 重置表单
Jquery easyui 重置按钮,easyui 清空表单,Jquery easyui 重置表单 >>>>>>>>>>>>&g ...
- 通过jQuery的Ajax方式来提交Form表单
通过jQuery的Ajax方式来提交Form表单 $.ajax({ url:ajaxCallUrl, type:"POST", cache:true, async:false, d ...
- jQuery---jq基础了解(语法,特性),JQ和JS的区别对比,JQ和JS相互转换,Jquery的选择器(基础选择器,层级选择器,属性选择器),Jquery的筛选器(基本筛选器,表单筛选器),Jquery筛选方法
jQuery---jq基础了解(语法,特性),JQ和JS的区别对比,JQ和JS相互转换,Jquery的选择器(基础选择器,层级选择器,属性选择器),Jquery的筛选器(基本筛选器,表单筛选器),Jq ...
- jQuery整理笔记2----jQuery选择整理
一个.基本的选择 1.ID选择器 JavaScript提供了原生方法实如今DOM中选择指定ID值得元素. 使用方法例如以下: var element=document.getElementById(& ...
随机推荐
- leetcode_684. Redundant Connection
https://leetcode.com/problems/redundant-connection/ 一个无向图,n个顶点有n条边,输出一条可以删除的边,删除后使得图成为一棵树.可以使用并查集解决. ...
- Js 之图片懒加载插件
一.PC端(lazyload) 1.引入js文件 <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.m ...
- react.js工程结构
1.index.html :UI界面入口.挂在点: 2.manifest.json:应用说明 3.package.json:工程说明.依赖说明等 4.source : 代码源文件
- 新引入thinkphp报错“应用目录[./Application/]不可写，目录无法自动生成！ 请手动生成项目目录~”
新引入thinkphp报错“应用目录[./Application/]不可写,目录无法自动生成! 请手动生成项目目录~”, 其主要原因是文件夹的权限问题,手动将项目文件夹权限更改为可读可写就OK,具体操 ...
- Spring.Boot.1 -- 概览
Spring Boot 是如何简化Java 开发的 SpringBoot的一些重要特征 长久以来,Spring 框架作为Java应用开发的框架地位稳固.最近在云计算.大数据.无结构数据持续化.函数式反 ...
- Elasticsearch入门和基本使用
1. 什么是Elasticsearch? Elasticsearch,分布式,高性能,高可用,可伸缩的搜索和分析系统:Elastic 是 Lucene 的封装,提供了 REST API 的操作接口,开 ...
- 洛谷——P4053 [JSOI2007]建筑抢修
P4053 [JSOI2007]建筑抢修 小刚在玩JSOI提供的一个称之为“建筑抢修”的电脑游戏:经过了一场激烈的战斗,T部落消灭了所有z部落的入侵者.但是T部落的基地里已经有N个建筑设施受到了严重的 ...
- BZOJ 4464 旅行时的困惑 最小流
题面: Waldives 有 N 个小岛.目前的交通系统中包含 N-1 条快艇专线,每条快艇 专线连接两个岛.这 N-1条快艇专线恰好形成了一棵树. 由于特殊的原因,所有N-1条快艇专线都是单向的.这 ...
- 笔试算法题（50）：简介 - 广度优先 & 深度优先 & 最小生成树算法
广度优先搜索&深度优先搜索(Breadth First Search & Depth First Search) BFS优缺点: 同一层的所有节点都会加入队列,所以耗用大量空间: 仅能 ...
- NodeJs中数据库的使用
另一遍通用的NODEJS数据库方法koa,express,node 通用方法连接MySQL 1.Node.js 连接 MySQL $ cnpm install mysql 连接mysql: var m ...