标签：c style class blog code java
1、文本框获得(失去)焦点
当文本框获得输入焦点时,将该文本框高亮显示，算不得一个应用，只是一个小技巧，可以提高用户体验。
-
<span style="font-family:SimSun;font-size:12px;"><!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>
-
-
<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></span>
效果图：
2、Elastic弹性文本域
Elastic是一款功能专一的表单插件，他可以控制页面内表单域(<textarea>)标签高度自动伸缩，以适应包含的文本。应用这个插件的时候页面需要引入jquery.elastic.source.js。
插件下载地址：点击进入下载页面
-
<span style="font-family:SimSun;font-size:12px;"><!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></span>
效果图：
我们最初设置的<textarea>标签的rows属性值为2 ,随着文本内容的增多高度会自动增加，当然了，随着内容的减少也可以高度降低的。
3、Autotab自动Tab文本框
Autotab也是一款功能专一的表单插件，它提供了自动跳格的功能，当用户输入的字符数一旦超过已定义的最大长度，则会根据事先设置的目标自动跳转到相应元素上，省却了
用户按【Tab】键的麻烦。最典型的应用就是输入IP地址、软件激活码等地方了，我们做的web项目中也有很多地方可以用到这插件，对于提高用户体验还是很有帮助的。
使用时需要引入jquery.autotab.js,下载地址：点击进入下载页面
-
<span style="font-family:SimSun;font-size:12px;"><!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></span>
除了可以限定输入长度外，还可以通过autotab_filter()方法限定输入的字符类型，这个方法还能过滤大写、小写、空格、字母等，具体的用到了现查吧。
如果将上面的js改成：
-
<span style="font-family:SimSun;font-size:12px;">$(function(){
-
$(‘#autotab‘).submit(function(){
-
return false;
-
});
-
$(‘#autotab :input‘).autotab_magic().autotab_filter(‘numeric‘);
-
})</span>
就是只能输入数字了。
4、passwordStrength密码强度指标
passwordStrength插件能够根据用户输入的密码,以图形化方式显示密码的强度。
-
<span style="font-family:SimSun;font-size:12px;"><!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></span>
上例用到一个图片：
执行效果图：
5、formToWizard表单填充向导
这个是什么意思呢？其实我们实际见的也很多，有很多网站填写注册信息的时候是分步进行的，比方说，先填写个人信息，然后再填写工作信息...然后一起提交。这就避免了庞
大的信息量都在一个页面上进行填写。
formToWizard就是解决这个问题的一个小插件，插件下载地址:点击进入下载页面
效果图：
6、checkbox复选框(全选反选等操作)
以前经常用，不说了。
7、下拉框的应用
这回先看个图：
大家肯定都见过类似效果的网页，怎么实现的呢,代码很简单：
-
<span style="font-family:SimSun;font-size:12px;"><!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>
-
-
<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></span>
代码实现的功能：
1)、将选中的选项添加给对方
2)、将全部选项添加给对方
3)、双击某个选项将其添加给对方
jQuery几个经典表单应用整理回顾,布布扣,bubuko.com
jQuery几个经典表单应用整理回顾
标签：c style class blog code java
原文地址：http://blog.csdn.net/zp522123428/article/details/27798067
