zoukankan      html  css  js  c++  java

  • jQuery几个经典表单应用整理回想

    1、文本框获得(失去)焦点

    当文本框获得输入焦点时,将该文本框高亮显示，算不得一个应用。仅仅是一个小技巧，能够提高用户体验。


    [html] view plaincopy在CODE上查看代码片派生到我的代码片
    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">  
    2. <html xmlns="http://www.w3.org/1999/xhtml">  
    3. <head>  
    4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
    5. <title></title>  
    6. <style type="text/css">  
    7. body{  
    8.     font:normal 12px/17px Arial;  
    9. }  
    10. div{  
    11.     padding:2px;  
    12. }   
    13. input, textarea {   
    14.       12em;   
    15.      border: 1px solid #888;  
    16. }  
    17. .focus {   
    18.      border: 1px solid #f00;  
    19.      background: #fcc;  
    20. }   
    21. </style>  
    22. <!--   引入jQuery -->  
    23. <script src="jquery-2.1.0.min.js" type="text/javascript"></script>  
    24. <script type="text/javascript">  
    25.     $(function(){  
    26.         $(":input").focus(function(){  
    27.               $(this).addClass("focus");  
    28.               if($(this).val() ==this.defaultValue){    
    29.                   $(this).val("");             
    30.               }   
    31.         }).blur(function(){  
    32.              $(this).removeClass("focus");  
    33.              if ($(this).val() == '') {  
    34.                 $(this).val(this.defaultValue);  
    35.              }  
    36.         });  
    37.     })  
    38.     </script>  
    39. </head>  
    40. <body>  
    41.     <form action="" method="post" id="regForm">  
    42.         <fieldset>  
    43.             <legend>个人基本信息</legend>  
    44.                 <div>  
    45.                     <label  for="username">名称:</label>  
    46.                     <input id="username" type="text" value="名称" />  
    47.                 </div>  
    48.                 <div>  
    49.                     <label for="pass">password:</label>  
    50.                     <input id="pass" type="password" value="密码" />  
    51.                 </div>  
    52.                 <div>  
    53.                     <label for="msg">具体信息:</label>  
    54.                     <textarea id="msg" rows="2" cols="20">具体信息</textarea>  
    55.                 </div>  
    56.         </fieldset>  
    57.     </form>  
    58. </body>  
    59. </html></span>  

    效果图：


    2、Elastic弹性文本域

    Elastic是一款功能专一的表单插件，他能够控制页面内表单域(<textarea>)标签高度自己主动伸缩，以适应包括的文本。应用这个插件的时候页面须要引入jquery.elastic.source.js。

    插件下载地址：点击进入下载页面

    [html] view plaincopy在CODE上查看代码片派生到我的代码片
    1. <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">  
    2. <html>  
    3.  <head>  
    4.   <title> New Document </title>  
    5.   <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
    6.   <script  src="jquery-2.1.0.min.js" type="text/javascript"></script>  
    7.   <script src="jquery.elastic.source.js" type="text/javascript" ></script>  
    8.   <script type="text/javascript">  
    9.     //页面载入方法  
    10.     $(function(){  
    11.         $("textarea").elastic();//应用弹性文本框  
    12.     })  
    13.   </script>  
    14.  </head>  
    15.   
    16.  <body>  
    17.     <textarea name="" rows="2" cols="43">  
    18.     沁园春·雪  
    19. 北国风光。千里冰封，万里雪飘。  
    20.   
    21. 望长城内外，惟余莽莽；大河上下。顿失滔滔。

        

    22.   
    23. 山舞银蛇，原驱蜡象。欲与天公试比高。  
    24.   
    25. 须晴日，看红装素裹，分外妖娆。  
    26.   
    27. 江山如此多娇，引无数英雄竞折腰。  
    28.   
    29. 惜秦皇汉武，略输文採。唐宗宋祖，稍逊风骚。  
    30.   
    31. 一代天骄，成吉思汗，仅仅识弯弓射大雕。  
    32.   
    33. 俱往矣。数风流人物。还看今朝。

        

    34.     </textarea>  
    35.  </body>  
    36. </html></span>  

    效果图：


    我们最初设置的<textarea>标签的rows属性值为2 ,随着文本内容的增多高度会自己主动添加，当然了。随着内容的降低也能够高度降低的。


    3、Autotab自己主动Tab文本框

    Autotab也是一款功能专一的表单插件。它提供了自己主动跳格的功能。当用户输入的字符数一旦超过已定义的最大长度，则会依据事先设置的目标自己主动跳转到对应元素上，省却了

    用户按【Tab】键的麻烦。最典型的应用就是输入IP地址、软件激活码等地方了，我们做的web项目中也有非常多地方能够用到这插件，对于提高用户体验还是非常有帮助的。

    使用时须要引入jquery.autotab.js,下载地址：点击进入下载页面

    [html] view plaincopy在CODE上查看代码片派生到我的代码片
    1. <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">  
    2. <html>  
    3.  <head>  
    4.   <title> New Document </title>  
    5.   <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
    6.   <script  src="jquery-2.1.0.min.js" type="text/javascript"></script>  
    7.   <script  src="jquery.autotab.js" type="text/javascript"></script>  
    8.   <script type="text/javascript">  
    9.     //页面载入方法  
    10.     $(function(){  
    11.         $('#autotab').submit(function(){  
    12.             return false;  
    13.         })  
    14.         $('#autotab :input').autotab_magic();//为页面文本框绑定autotab插件  
    15.     })  
    16.   </script>  
    17.  </head>  
    18.   
    19.  <body>  
    20.     <h1>jQuery整理笔记七</h1>  
    21.     <h2>Autotab自己主动Tab文本框</h2>  
    22.     <form method="post" action=""  id="autotab">  
    23.         <label>请输入验证码：  
    24.         <input type="text" name="num1" id="num1" maxlength="3"  size="3">  
    25.         <input type="text" name="num2" id="num2" maxlength="3"  size="3">  
    26.         <input type="text" name="num3" id="num3" maxlength="3"  size="3">  
    27.         <input type="text" name="num4" id="num4" maxlength="3"  size="3">  
    28.         <input type="text" name="num5" id="num5" maxlength="3"  size="3">  
    29.         <input type="text" name="num6" id="num6" maxlength="3"  size="3">  
    30.     </form>  
    31.  </body>  
    32. </html></span>  

    除了能够限定输入长度外，还能够通过autotab_filter()方法限定输入的字符类型。这种方法还能过滤大写、小写、空格、字母等，详细的用到了现查吧。

    假设将上面的js改成：

    [html] view plaincopy在CODE上查看代码片派生到我的代码片
    1. <span style="font-family:SimSun;font-size:12px;">$(function(){  
    2.     $('#autotab').submit(function(){  
    3.         return false;  
    4.     });  
    5.     $('#autotab :input').autotab_magic().autotab_filter('numeric');  
    6. })</span>  
    就是仅仅能输入数字了。

    4、passwordStrength密码强度指标

    passwordStrength插件可以依据用户输入的password,以图形化方式显示password的强度。

    [html] view plaincopy在CODE上查看代码片派生到我的代码片
    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">  
    2. <html xmlns="http://www.w3.org/1999/xhtml">  
    3. <head>  
    4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
    5. <title>passwordStrength</title>  
    6. <link href="css/style.css" rel="stylesheet" type="text/css" media="all" />  
    7. <script type="text/javascript" src="jquery-2.1.0.min.js"></script>  
    8. <script type="text/javascript" src="passwordStrength.js"></script>  
    9. <script type="text/javascript">  
    10. $(function(){  
    11.     $('input[name="password"]').passwordStrength();  
    12. })  
    13. </script>  
    14. <style type="text/css">  
    15. .is0{background:url(images/progressImg1.png) no-repeat 0 0;138px;height:7px;margin:10px 0 0 104px;}  
    16. .is10{background-position:0 -7px;}  
    17. .is20{background-position:0 -14px;}  
    18. .is30{background-position:0 -21px;}  
    19. .is40{background-position:0 -28px;}  
    20. .is50{background-position:0 -35px;}  
    21. .is60{background-position:0 -42px;}  
    22. .is70{background-position:0 -49px;}  
    23. .is80{background-position:0 -56px;}  
    24. .is90{background-position:0 -63px;}  
    25. .is100{background-position:0 -70px;}  
    26.    
    27. #autotab input { 138px; }  
    28. </style>  
    29. </head>  
    30. <body>  
    31. <h1>jQuery整理笔记七</h1>  
    32. <h2>表单开发（Forms）</h2>  
    33. <hr />  
    34. <h3>passwordStrength密码强度指标</h3>  
    35. <form action="" method="post" id="autotab" class="p1">  
    36.     <label>请输入password：  
    37.         <input type="password" name="password" />  
    38.         <div id="passwordStrengthDiv" class="is0"></div>  
    39.     </label>  
    40. </form>  
    41. </body>  
    42. </html></span>  
    上例用到一个图片：

    运行效果图：

    5、formToWizard表单填充向导

    这个是什么意思呢？事实上我们实际见的也非常多，有非常多站点填写注冊信息的时候是分步进行的。例如说，先填写个人信息，然后再填写工作信息...然后一起提交。

    这就避免了庞

    大的信息量都在一个页面上进行填写。

    formToWizard就是解决问题的一个小插件。插件下载地址:点击进入下载页面

    [html] view plaincopy在CODE上查看代码片派生到我的代码片
    1. <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">  
    2. <html>  
    3.  <head>  
    4.       <title> New Document </title>  
    5.       <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
    6.       <script  src="jquery-2.1.0.min.js" type="text/javascript"></script>  
    7.       <script type="text/javascript" src="formToWizard.js"></script>  
    8.       <script type="text/javascript">  
    9.         //页面载入方法  
    10.         $(function(){  
    11.             $("#form1").formToWizard({ submitButton: 'SaveAccount' })  
    12.         })  
    13.       </script>  
    14.       <style type="text/css">  
    15.         #wrap { margin:1em 4em; font-size:12px; padding:1em 1em; border:solid 1px #fff; }  
    16.         fieldset { border:none; 320px; }  
    17.         legend { font-size:18px; margin:0px; padding:10px 0px; color:#b0232a; font-weight:bold; }  
    18.         label { display:block; margin:15px 0 5px; }  
    19.         input[type=text], input[type=password] { 300px; padding:5px; border:solid 1px #000; }  
    20.         .prev, .next { background-color:#b0232a; padding:5px 10px; color:#fff; text-decoration:none; }  
    21.         .prev:hover, .next:hover { background-color:#000; text-decoration:none; }  
    22.         .prev { float:left; }  
    23.         .next { float:right; }  
    24.         #steps { list-style:none; 100%; overflow:hidden; margin:0px; padding:0px; }  
    25.         #steps li { font-size:24px; float:left; padding:10px; color:#b0b1b3; }  
    26.         #steps li span { font-size:11px; display:block; }  
    27.         #steps li.current { color:#000; }  
    28.         #makeWizard { background-color:#b0232a; color:#fff; padding:5px 10px; text-decoration:none; font-size:18px; }  
    29.         #makeWizard:hover { background-color:#000; }  
    30.       </style>  
    31.  </head>  
    32.   
    33.  <body>  
    34.  <div id="wrap">  
    35.       <form id="form1" action="">  
    36.         <fieldset>  
    37.             <legend>登录信息</legend>  
    38.             <label for="Name">昵称</label>  
    39.             <input id="Name" type="text" />  
    40.             <label for="Email">Email</label>  
    41.             <input id="Email" type="text" />  
    42.             <label for="Password">password</label>  
    43.             <input id="Password" type="password" />  
    44.         </fieldset>  
    45.         <fieldset>  
    46.             <legend>公司信息</legend>  
    47.             <label for="CompanyName">公司名称</label>  
    48.             <input id="CompanyName" type="text" />  
    49.             <label for="Website">公司网址</label>  
    50.             <input id="Website" type="text" />  
    51.             <label for="CompanyEmail">公司邮箱</label>  
    52.             <input id="CompanyEmail" type="text" />  
    53.         </fieldset>  
    54.         <fieldset>  
    55.             <legend>个人信息</legend>  
    56.             <label for="NameOnCard">真实姓名</label>  
    57.             <input id="NameOnCard" type="text" />  
    58.             <label for="CardNumber">身份证号</label>  
    59.             <input id="CardNumber" type="text" />  
    60.             <label for="CreditcardMonth">发卡日期</label>  
    61.             <select id="CreditcardMonth">  
    62.                 <option value="1">1</option>  
    63.                 <option value="2">2</option>  
    64.                 <option value="3">3</option>  
    65.                 <option value="4">4</option>  
    66.                 <option value="5">5</option>  
    67.                 <option value="6">6</option>  
    68.                 <option value="7">7</option>  
    69.                 <option value="8">8</option>  
    70.                 <option value="9">9</option>  
    71.                 <option value="10">10</option>  
    72.                 <option value="11">11</option>  
    73.                 <option value="12">12</option>  
    74.             </select>  
    75.             <select id="CreditcardYear">  
    76.                 <option value="2009">2009</option>  
    77.                 <option value="2010">2010</option>  
    78.                 <option value="2011">2011</option>  
    79.             </select>  
    80.             <label for="Address1">地址1</label>  
    81.             <input id="Address1" type="text" />  
    82.             <label for="Address2">地址2</label>  
    83.             <input id="Address2" type="text" />  
    84.             <label for="City">城市</label>  
    85.             <input id="City" type="text" />  
    86.             <label for="Country">国家</label>  
    87.             <select id="Country">  
    88.                 <option value="CA">Canada</option>  
    89.                 <option value="US">United States of America</option>  
    90.                 <option value="GB">United Kingdom (Great Britain)</option>  
    91.                 <option value="AU">Australia</option>  
    92.                 <option value="JP">Japan</option>  
    93.             </select>  
    94.         </fieldset>  
    95.         <div>  
    96.             <input id="SaveAccount" type="button" value="提交表单" />  
    97.         </div>  
    98.         </div>  
    99.     </form>  
    100.  </body>  
    101. </html>  
    102. </span>  

    效果图：

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

    曾经经经常使用，不说了。

    7、下拉框的应用

    这回先看个图：

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

    [html] view plaincopy在CODE上查看代码片派生到我的代码片
    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">  
    2. <html xmlns="http://www.w3.org/1999/xhtml">  
    3. <head>  
    4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
    5. <title></title>  
    6. <style type="text/css">  
    7. * { margin:0; padding:0; }  
    8. div.centent {  
    9.    float:left;  
    10.    text-align: center;  
    11.    margin: 10px;  
    12. }  
    13. span {   
    14.     display:block;   
    15.     margin:2px 2px;  
    16.     padding:4px 10px;   
    17.     background:#898989;  
    18.     cursor:pointer;  
    19.     font-size:12px;  
    20.     color:white;  
    21. }  
    22. </style>  
    23. <!--   引入jQuery -->  
    24. <script src="jquery-2.1.0.min.js" type="text/javascript"></script>  
    25. <script type="text/javascript">  
    26. $(function(){  
    27.     //移到右边  
    28.     $('#add').click(function() {  
    29.     //获取选中的选项，删除并追加给对方  
    30.         $('#select1 option:selected').appendTo('#select2');  
    31.     });  
    32.     //移到左边  
    33.     $('#remove').click(function() {  
    34.         $('#select2 option:selected').appendTo('#select1');  
    35.     });  
    36.     //所有移到右边  
    37.     $('#add_all').click(function() {  
    38.         //获取所有的选项,删除并追加给对方  
    39.         $('#select1 option').appendTo('#select2');  
    40.     });  
    41.     //所有移到左边  
    42.     $('#remove_all').click(function() {  
    43.         $('#select2 option').appendTo('#select1');  
    44.     });  
    45.     //双击选项  
    46.     $('#select1').dblclick(function(){ //绑定双击事件  
    47.         //获取所有的选项,删除并追加给对方  
    48.         $("option:selected",this).appendTo('#select2'); //追加给对方  
    49.     });  
    50.     //双击选项  
    51.     $('#select2').dblclick(function(){  
    52.        $("option:selected",this).appendTo('#select1');  
    53.     });  
    54. });  
    55. </script>  
    56.   
    57. </head>  
    58. <body>  
    59.     <div class="centent">  
    60.         <select multiple="multiple" id="select1" style="100px;height:160px;">  
    61.             <option value="1">曹操</option>  
    62.             <option value="2">曹昂</option>  
    63.             <option value="3">曹丕</option>  
    64.             <option value="4">曹彰</option>  
    65.             <option value="5">曹植</option>  
    66.             <option value="6">曹熊</option>  
    67.             <option value="7">曹仁</option>  
    68.             <option value="8">曹洪</option>  
    69.             <option value="9">曹休</option>  
    70.             <option value="10">曹真</option>  
    71.             <option value="11">曹爽</option>  
    72.         </select>  
    73.         <div>  
    74.             <span id="add" >选中加入到右边>></span>  
    75.             <span id="add_all" >所有加入到右边>></span>  
    76.         </div>  
    77.     </div>  
    78.     <div class="centent">  
    79.         <select multiple="multiple" id="select2" style=" 100px;height:160px;">  
    80.             <option value="12">曹芳</option>  
    81.         </select>  
    82.         <div>  
    83.             <span id="remove"><<选中删除到左边</span>  
    84.             <span id="remove_all"><<所有删除到左边</span>  
    85.         </div>  
    86.     </div>  
    87. </body>  
    88. </html></span>  

    代码实现的功能：

    1)、将选中的选项加入给对方

    2)、将所有选项加入给对方

    3)、双击某个选项将其加入给对方
  • 相关阅读:
    for语句及switch case用法示例
    ●验证控件
    ●LinQ to SQL
    ●操作Word
    141107●VS2012的一些使用技巧
    ●Winform拖动无边框窗口、播放音频、启动外部exe程序
    ●操作文件目录及文件
    ●流
    ●事务及异常处理
    ●Winform对话框
  • 原文地址：https://www.cnblogs.com/cxchanpin/p/6761274.html
Copyright © 2011-2022 走看看