jQuery整理笔记七----几个经典表单应用
来源：互联网 发布：sql where between 编辑：程序博客网 时间：2024/04/29 09:27
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>效果图：
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插件能够根据用户输入的密码,以图形化方式显示密码的强度。
<!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>上例用到一个图片：
执行效果图：
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>效果图：
6、checkbox复选框(全选反选等操作)
以前经常用，不说了。
7、下拉框的应用
这回先看个图：
大家肯定都见过类似效果的网页，怎么实现的呢,代码很简单：
<!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)、双击某个选项将其添加给对方
71 0
- jQuery整理笔记七----几个经典表单应用
- jQuery整理笔记七----几个经典表单应用
- jQuery整理笔记七----几个经典表单应用
- jQuery整理笔记七----几个经典表单应用
- jQuery整理笔记七----几个经典表单应用 .
- jQuery整理笔记七----几个经典表单应用
- jQuery整理笔记七----几个经典表单应用
- jQuery整理笔记七----几个经典表单应用
- jQuery整理笔记七----几个经典表单应用
- jQuery几个经典表单应用整理回顾
- 几个经典表单应用
- 几个经典表单应用
- jQuery----经典表单应用
- jQuery学习笔记之七-----表单选择器
- JQuery笔记（表单验证）七 errorcontainer-demo_5.html errorElement
- C#笔记整理(七)
- jquery表单应用
- jquery表单验证实例【经典】
- 如何在dos中运行java程序
- Java程序员之从菜鸟到职场高手的必看...
- mybatis显示sql语句 log4j.properties配置文件
- 图解FFMPEG打开媒体的函数avformat_open_input
- myEclipse莫名其妙的不编译了
- jQuery整理笔记七----几个经典表单应用
- Android应用开发中对Bitmap的内存优化
- 创建运行Openwrt镜像的虚拟机
- HDFS集中式缓存管理（Centralized Cache Management）
- 3个Activity间的切换
- Java中Json数据格式的使用
- Linux 内核编译：配置内核make menuconfig 出错：curses.h：No such file or directory
- [LeetCode] Copy List with Random Pointer
- sklearn.metrics中的评估方法介绍
