码迷，mamicode.com
首页 > Web开发 > 详细

jQuery整理笔记七----几个经典表单应用

时间：2014-05-03 17:00:57      阅读：456      评论：0      收藏：0      [点我收藏+]

标签：jquery   表单应用   select   autotab   elastic   

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">密码:</label>
					<input id="pass" type="password" value="密码" />
				</div>
                <div>
					<label for="msg">详细信息:</label>
					<textarea id="msg" rows="2" cols="20">详细信息</textarea>
				</div>
		</fieldset>
	</form>
</body>
</html>

效果图：

bubuko.com,布布扣

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>

效果图：

bubuko.com,布布扣

我们最初设置的<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插件能够根据用户输入的密码,以图形化方式显示密码的强度。

<!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>
上例用到一个图片：

bubuko.com,布布扣

执行效果图：

bubuko.com,布布扣

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>

效果图：

bubuko.com,布布扣bubuko.com,布布扣

bubuko.com,布布扣

6、checkbox复选框(全选反选等操作)

以前经常用，不说了。

7、下拉框的应用

这回先看个图：

bubuko.com,布布扣

大家肯定都见过类似效果的网页，怎么实现的呢,代码很简单：

<!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整理笔记七----几个经典表单应用,布布扣,bubuko.com

jQuery整理笔记七----几个经典表单应用

标签：jquery   表单应用   select   autotab   elastic   

原文地址：http://blog.csdn.net/caohaicheng/article/details/24802613
踩
(0)
赞
(0)
   
举报
评论 一句话评论（0）
登录后才能评论！
分享档案
更多>
2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)
周排行
mamicode.com排行更多图片
更多
友情链接
兰亭集智   国之画   百度统计   站长统计   阿里云   chrome插件   新版天听网
关于我们 - 联系我们 - 留言反馈
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码！