你的位置:首页 > Java教程

[Java教程]jquery完成界面无刷新加载登陆注册


昨天公司说官网的登陆注册每次要跳转到另一个界面,能不能做一个简单的,在界面弹出一个框框登陆,我想了想做了这么一个案例,大家来看看成不成

贴上代码,实现了在同一个弹出窗上加载了登陆注册功能!可自由点击!当然样式丑了一些!还请见谅!demo在下面

1这里是html内容

 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html ="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5 <title>jQuery鼠标点击弹出登录框代码</title> 6 </head> 7 <body> 8 <br><br><br><br><br><br><br> 9 <div class="login-header"><a href="javascript:void(0);">点击,弹出登录框</a></div>10   <div class="login-header1"><a href="javascript:void(0);">点击,弹出登录框</a></div>11 12   <div id="js_login" class="js_login">13     <div class="js_title">14       <ul>15         <li class="conxk1" id="_xka1" onclick="switchTag('_xka','_xka_list',1,2,'conxk1','conxk2');">16           用户登录17         </li>18         <li class="conxk2" id="_xka2" onclick="switchTag('_xka','_xka_list',2,2,'conxk1','conxk2');">19           快速注册20         </li>21       </ul>      <span class="close-login">×</span>22     </div>23     <div class="js_content">24       <div class="con_dak fixed clear">25         <div id="_xka_list1" class="showbox">26           <div class="de_list">27             <!----------login start------>28             <div id="login">29               <div class="inputbg" id="logtext">30                 <input name="logusername" id="logusername" type="text" value="输入用户名" placeholder="输入用户名" class="inputsub" />31               </div>32               <div class="inputbg" id="pass">33                 <input name="logpassword" placeholder="输入密码" type="password" value="" id="logpassword" class="inputsub" />34               </div>35               <div class="buttons">36                 <input type="button" class="sub_btn1" id="login-submokaoba" onclick="ajaxlogin()" value="登  录" />37               </div>38               <div class="clr"></div>39               <div class="reg">40                 忘记密码?<a href="http://www.mokaoba.com/">找回密码</a> <span id="errmsg"></span>41               </div>42             </div>43             <!--------login end--------->44           </div>45         </div>46 47 48         <div id="_xka_list2" class="hidden">49           <div class="de_list">50             <!--------register start--------->51             <form method="post" enctype="multipart/form-data" name="userinfoform" id="userinfoform">52               <input type="hidden" name="enews" value="register" />53               <input name="groupid" type="hidden" id="groupid" value="1" />54               <div id="register">55                 <ul class="Reg-input">56                   <li class="Reg-text">用户名:</li>57                   <li><input name="UserName" id="UserName" type="text" class="input-text" required="" /> <span class="UserName"></span></li>58                 </ul>59                 <ul class="Reg-input">60                   <li class="Reg-text">密码:</li>61                   <li><input name="Password" onblur="CheckReg('Password', this.value)" type="password" id="Password" class="input-text" required="" /> <span class="Password"></span></li>62                 </ul>63                 <ul class="Reg-input">64                   <li class="Reg-text">重复密码:</li>65                   <li><input name="repassword" onblur="CheckReg('repassword',this.value)" type="password" id="repassword" class="input-text" required="" /> <span class="repassword"></span></li>66                 </ul>67                 <ul class="Reg-input">68                   <li class="Reg-text">真实姓名:</li>69                   <li><input name="RealName" onblur="CheckReg('RealName', this.value)" type="text" id="RealName" class="input-text" required="" /> <span class="RealName"></span></li>70                 </ul>71                 <ul class="Reg-input">72                   <li class="Reg-text">手机号码:</li>73                   <li><input name="Telephone" onblur="CheckReg('Telephone', this.value)" type="text" id="Telephone" class="input-text" required="" /> <span class="Telephone"></span></li>74                 </ul>75                 <ul class="Reg-input">76                   <li class="Reg-text">E-mail:</li>77                   <li><input name="Mail" onblur="CheckReg('Mail', this.value)" type="text" id="Mail" class="input-text" required="" /> <span class="Mail"></span></li>78                 </ul>79                 <ul class="Reg-input">80                   <li class="Reg-text">&nbsp;</li>81                   <li id="checkbox"><input type="checkbox" id="checkin" onclick="checkpass('all')" /> 我已阅读并接受《<a href="http://www.cnblogs.com//http://www.jiao4.com/javascript" target="_blank">服务条款</a>》</li>82                 </ul>83                 <div style="clear:both"></div>84                 <div class="buttons">85                   <input type="button" class="sub_btn1" id="Reg-submokaoba" onclick="ajaxzhuce()" name="zhuce" value="注  册" />&nbsp;&nbsp;<span id="checkreg"></span>86                 </div>87                 <div class="clr"></div>88               </div>89             </form>90             <!--------register end--------->91           </div>92         </div>93       </div>94     </div>95   </div>96   <div class="login-bg"></div>97 </body>98 </html>

2接下来是样式css

@charset "utf-8";    /*/////*登陆//////by liangguanyu/////*/    .js_login h1, h2, h3, h4, h5, h6, p, ul, li {      padding: 0;      margin: 0;      list-style: none;    }    .login-header {      text-align: center;      height: 30px;      font-size: 24px;      line-height: 30px;    }    .js_login {      display: none;      position: fixed;      opacity: 1;      z-index: 11000;      left: 50%;      margin-left: -250px;      top: 100px;    }      .js_login a {        color: blue;        text-decoration: none;      }  .sub_btn1 { /*position:absolute; right:0px; top:50px;*/    width:105px;    height:35px;    display: inline-block;    zoom: 1; /* zoom and *display = ie7 hack for display:inline-block */    *display: inline;    vertical-align: baseline;    margin: 0 2px;    outline: none;    cursor: pointer;    text-align: center;    align-content:center    font: 15px/100% Arial, Helvetica, sans-serif;    text-shadow: 0 1px 1px rgba(0,0,0,.6);    -webkit-border-radius: 3px;    -moz-border-radius: 3px;    border-radius: 3px;    -webkit-box-shadow: 0 1px 2px rgba(0,0,0,.2);    -moz-box-shadow: 0 1px 2px rgba(0,0,0,.2);    box-shadow: 0 1px 2px rgba(0,0,0,.2);    color: white; /*#e8f0de*/    border: solid 1px #538312;    background: #64991e; /* #64991e*/    background: -webkit-gradient(linear, left top, left bottom, from(#43CD80), to(#3CB371)); /*#7db72f  #4e7d0e*/    background: -moz-linear-gradient(top, #7db72f, #4e7d0e);    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#7db72f', endColorstr='#4e7d0e');  }      .sub_btn1:hover {        background: #538018;        background: -webkit-gradient(linear, left top, left bottom, from(#2E8B57), to(#008B45));        background: -moz-linear-gradient(top, #6b9d28, #436b0c);        filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#6b9d28', endColorstr='#436b0c');      }    .inputbg {      height: 40px;      width: 280px;      margin: 0 auto;      margin-top: 20px;      border-radius: 4px;      border: 1px solid #eee;      text-align: left;      color: #333;    }    #username * {      vertical-align: middle;    }    .inputsub {      outline: 0;      font-family: Tahoma,Geneva,sans-serif;      font-size: 14px;      width: 270px;      float: left;      border: none;      text-align: left;      color: #333;      margin: 10px 0 3px 8px;      background: none;      overflow: hidden;    }    .buttons {      width: 280px;      margin: 0 auto;      margin-top: 25px;      text-align: left;    }    #login-submokaoba {      width: 105px;      height: 35px;    }    #qql {      float: right;    }    .reg {      padding: 20px;      margin: 0 auto;      width: 280px;    }    #login {      margin-top: 20px;    }    .hidden {      display: none;    }    .js_login {      position: absolute;      width: 500px;      background: #fff;      display: none;      color: #999;    }      .js_login .js_title {        overflow: hidden;        height: 42px;        background: #f9f9f9 url(http://www.jiao4.com/java) repeat-x;        border-left: 1px solid #ccc;        border-right: 1px solid #ccc;      }        .js_login .js_title span {          float: right;          line-height: 40px;          padding: 0 9px;          cursor: pointer;          font-family: "";          font-size: 30px;        }          .js_login .js_title span:hover {            color: #555;          }        .js_login .js_title li {          float: left;          width: 130px;          text-align: center;          font-family: "微软雅黑";          font-size: 18px;          cursor: pointer;          height: 43px;        }          .js_login .js_title li a {            float: left;            width: 130px;            text-align: center;          }            .js_login .js_title li a:hover {            }    .conxk1 {      border-top: 3px solid #15B300;      border-right: 1px solid #dfdfdf;      background: #fff;      height: 39px;      line-height: 39px;      color: #11B200;    }      .conxk1 a {        color: #11B200;      }        .conxk1 a:hover {          color: #11B200;          text-decoration: none;        }    .conxk2 {      border-right: 1px solid #dfdfdf;      height: 39px;      line-height: 39px;      padding-top: 3px;      color: #646464;    }      .conxk2 a {        color: #646464;      }        .conxk2 a:hover {          color: #646464;          text-decoration: none;        }    .js_login .js_content {      overflow: hidden;      padding: 13px 15px;      background: #fff;      border: 1px solid #ccc;      border-top-width: 0px;    }      .js_login .js_content .de_list {        width: 100%;        padding-top: 12px;      }      .js_login .js_content a:visited {        color: blue;      }      .js_login .js_content a:hover {        color: red;        text-decoration: underline;      }    .Reg-input {      display: block;      clear: both;      padding: 5px 0;    }      .Reg-input li {        display: inline;        float: left;      }      .Reg-input .input-text {        width: 220px;        height: 25px;        border: 1px solid #ccc;        outline: none;        border-radius: 2px;      }    .input-text:focus {      border: 1px solid #339933;    }    .Reg-input .Reg-text {      width: 100px;      text-align: right;      font-size: 14px;    }    .Reg-input .input_text {      width: 70px;      float: left;    }    .js_login #checkbox {      text-align: left;    }    .js_login #errmsg {      color: red;    }    .js_login .sub_btn1 {      font-size: 20px;    }    #lean_overlay {      position: fixed;      z-index: 100;      top: 0px;      left: 0px;      height: 100%;      width: 100%;      background: #000;      display: none;    }

后面更上js,记得要把jquery给加上哦!红色区域的代码负责登陆注册点击切换的事件,在代码点击方法加上黄色代码可在点击后加载到当前界面!

<script type="text/javascript">  $(function () {    H_login = {};    H_login.openLogin = function () {      $('.login-header a').click(function () {        switchTag('_xka', '_xka_list', 1, 2, 'conxk1', 'conxk2');        $('.js_login').show();        $('.login-bg').show();      });      $('.login-header1 a').click(function () {        switchTag('_xka', '_xka_list', 2, 2, 'conxk1', 'conxk2');        $('.js_login').show();        $('.login-bg').show();      });    };    H_login.closeLogin = function () {      $('.close-login').click(function () {        $('.js_login').hide();        $('.login-bg').hide();      });    };    H_login.loginForm = function () {    };    H_login.run = function () {      this.closeLogin();      this.openLogin();      this.loginForm();    };    H_login.run();  });  function switchTag(tag, content, k, n, stylea, styleb) {    for (i = 1; i <= n; i++) {      if (i == k) {        document.getElementById(tag + i).className = stylea;        document.getElementById(content + i).className = "showbox"      } else {        document.getElementById(tag + i).className = styleb;        document.getElementById(content + i).className = "hidden"      }    }  };  function ajaxlogin() {    var username = $("#logusername");    var usernameValue = $("#logusername").val();    var password = $("#logpassword");    var passwordValue = $("#logpassword").val();    alert(usernameValue + passwordValue);
     window.location.reload(); } function ajaxzhuce() { var usernameValue = $("#UserName").val(); var passwordValue = $("#Password").val(); var realNameValue = $("#RealName").val(); var telephoneValue = $("#Telephone").val(); var emailValue = $("#Mail").val(); alert(usernameValue + passwordValue + realNameValue + telephoneValue + emailValue);
     window.location.reload(); }</script>

给大家看一下效果哈!

 

 

 

 

最后献上demo:http://download.csdn.net/detail/nightmareyan/9590361