jquery实现界面无刷新加载登陆注册


Posted in Javascript onJuly 30, 2016

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

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

1这里是html内容

<!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>jQuery鼠标点击弹出登录框代码</title>
</head>
<body>
<br><br><br><br><br><br><br>
<div class="login-header"><a href="javascript:void(0);">点击,弹出登录框</a></div>
 <div class="login-header1"><a href="javascript:void(0);">点击,弹出登录框</a></div>

 <div id="js_login" class="js_login">
 <div class="js_title">
 <ul>
 <li class="conxk1" id="_xka1" onclick="switchTag('_xka','_xka_list',1,2,'conxk1','conxk2');">
 用户登录
 </li>
 <li class="conxk2" id="_xka2" onclick="switchTag('_xka','_xka_list',2,2,'conxk1','conxk2');">
 快速注册
 </li>
 </ul> <span class="close-login">×</span>
 </div>
 <div class="js_content">
 <div class="con_dak fixed clear">
 <div id="_xka_list1" class="showbox">
 <div class="de_list">
 <!----------login start------>
 <div id="login">
 <div class="inputbg" id="logtext">
 <input name="logusername" id="logusername" type="text" value="输入用户名" placeholder="输入用户名" class="inputsub" />
 </div>
 <div class="inputbg" id="pass">
 <input name="logpassword" placeholder="输入密码" type="password" value="" id="logpassword" class="inputsub" />
 </div>
 <div class="buttons">
 <input type="button" class="sub_btn1" id="login-submokaoba" onclick="ajaxlogin()" value="登 录" />
 </div>
 <div class="clr"></div>
 <div class="reg">
 忘记密码?<a href="http://www.mokaoba.com/">找回密码</a> <span id="errmsg"></span>
 </div>
 </div>
 <!--------login end--------->
 </div>
 </div>


 <div id="_xka_list2" class="hidden">
 <div class="de_list">
 <!--------register start--------->
 <form method="post" enctype="multipart/form-data" name="userinfoform" id="userinfoform">
 <input type="hidden" name="enews" value="register" />
 <input name="groupid" type="hidden" id="groupid" value="1" />
 <div id="register">
 <ul class="Reg-input">
  <li class="Reg-text">用户名:</li>
  <li><input name="UserName" id="UserName" type="text" class="input-text" required="" /> <span class="UserName"></span></li>
 </ul>
 <ul class="Reg-input">
  <li class="Reg-text">密码:</li>
  <li><input name="Password" onblur="CheckReg('Password', this.value)" type="password" id="Password" class="input-text" required="" /> <span class="Password"></span></li>
 </ul>
 <ul class="Reg-input">
  <li class="Reg-text">重复密码:</li>
  <li><input name="repassword" onblur="CheckReg('repassword',this.value)" type="password" id="repassword" class="input-text" required="" /> <span class="repassword"></span></li>
 </ul>
 <ul class="Reg-input">
  <li class="Reg-text">真实姓名:</li>
  <li><input name="RealName" onblur="CheckReg('RealName', this.value)" type="text" id="RealName" class="input-text" required="" /> <span class="RealName"></span></li>
 </ul>
 <ul class="Reg-input">
  <li class="Reg-text">手机号码:</li>
  <li><input name="Telephone" onblur="CheckReg('Telephone', this.value)" type="text" id="Telephone" class="input-text" required="" /> <span class="Telephone"></span></li>
 </ul>
 <ul class="Reg-input">
  <li class="Reg-text">E-mail:</li>
  <li><input name="Mail" onblur="CheckReg('Mail', this.value)" type="text" id="Mail" class="input-text" required="" /> <span class="Mail"></span></li>
 </ul>
 <ul class="Reg-input">
  <li class="Reg-text"> </li>
  <li id="checkbox"><input type="checkbox" id="checkin" onclick="checkpass('all')" /> 我已阅读并接受《<a href="/http://www.jiao4.com/javascript" target="_blank">服务条款</a>》</li>
 </ul>
 <div style="clear:both"></div>
 <div class="buttons">
  <input type="button" class="sub_btn1" id="Reg-submokaoba" onclick="ajaxzhuce()" name="zhuce" value="注 册" />  <span id="checkreg"></span>
 </div>
 <div class="clr"></div>
 </div>
 </form>
 <!--------register end--------->
 </div>
 </div>
 </div>
 </div>
 </div>
 <div class="login-bg"></div>
</body>
</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>

效果图:

jquery实现界面无刷新加载登陆注册

以上就是本文的全部内容,希望对大家的学习有所帮助。

Javascript 相关文章推荐
JScript 脚本实现文件下载 一般用于下载木马
Oct 29 Javascript
jquery实现table鼠标经过变色代码
Sep 25 Javascript
Javascript获取当前日期的农历日期代码
Oct 08 Javascript
jQuery选择器之基本选择器与层次选择器
Mar 03 Javascript
jquery特效 点击展示与隐藏全文
Dec 09 Javascript
javascript跑马灯抽奖实例讲解
Apr 17 Javascript
vuejs2.0运用原生js实现简单的拖拽元素功能示例
Feb 24 Javascript
使用Vue开发动态刷新Echarts组件的教程详解
Mar 22 Javascript
微信小程序手机号码验证功能的实例代码
Aug 28 Javascript
小程序实现左滑删除功能
Oct 30 Javascript
如何封装了一个vue移动端下拉加载下一页数据的组件
Jan 06 Javascript
解决vant框架做H5时踩过的坑(下拉刷新、上拉加载等)
Nov 11 Javascript
AngularJS ng-change 指令的详解及简单实例
Jul 30 #Javascript
Javascript中级语法快速入手
Jul 30 #Javascript
AngularJS ng-blur 指令详解及简单实例
Jul 30 #Javascript
AngularJS ng-bind-template 指令详解
Jul 30 #Javascript
AngularJS ng-bind-html 指令详解及实例代码
Jul 30 #Javascript
AngularJS ng-bind 指令简单实现
Jul 30 #Javascript
AngularJS ng-app 指令实例详解
Jul 30 #Javascript
You might like
php实现递归与无限分类的方法
2015/02/16 PHP
CI映射(加载)数据到view层的方法
2016/03/28 PHP
全面解析PHP面向对象的三大特征
2017/06/10 PHP
利用XMLHTTP传递参数在另一页面执行并刷新本页
2006/10/26 Javascript
深入理解JavaScript系列(11) 执行上下文(Execution Contexts)
2012/01/15 Javascript
iphone safari不支持position fixed的解决方法
2012/05/04 Javascript
基于jQuery的遍历同id元素 并响应事件的代码
2012/06/14 Javascript
$.each与$().each的区别示例介绍
2014/03/20 Javascript
Egret引擎开发指南之运行项目
2014/09/03 Javascript
jQuery.Highcharts.js绘制柱状图饼状图曲线图
2015/03/14 Javascript
js实现文本框支持加减运算的方法
2015/08/19 Javascript
jQuery实现的超酷苹果风格图标滑出菜单效果代码
2015/09/16 Javascript
javascript学习之json入门
2016/12/22 Javascript
ES6新特性之类(Class)和继承(Extends)相关概念与用法分析
2017/05/24 Javascript
使用Ajax和Jquery配合数据库实现下拉框的二级联动的示例
2018/01/25 jQuery
使用puppeteer破解极验的滑动验证码
2018/02/24 Javascript
微信小程序如何自定义table组件
2019/06/29 Javascript
Vue.js递归组件实现组织架构树和选人功能
2019/07/04 Javascript
Python自动化运维和部署项目工具Fabric使用实例
2016/09/18 Python
Python基于回溯法子集树模板解决选排问题示例
2017/09/07 Python
python模块之time模块(实例讲解)
2017/09/13 Python
python下10个简单实例代码
2017/11/15 Python
python实现数据导出到excel的示例--普通格式
2018/05/03 Python
opencv与numpy的图像基本操作
2019/03/08 Python
浅谈Python批处理文件夹中的txt文件
2019/03/11 Python
python实现微信自动回复机器人功能
2019/07/11 Python
python opencv根据颜色进行目标检测的方法示例
2020/01/15 Python
Camper鞋西班牙官方网上商店:西班牙马略卡岛的鞋类品牌
2019/03/14 全球购物
网络教育毕业生自我鉴定
2013/10/10 职场文书
文秘专业大学生求职信
2013/11/10 职场文书
单位提档介绍信
2014/01/17 职场文书
安全责任书
2015/01/29 职场文书
2016年教师党员创先争优承诺书
2016/03/24 职场文书
python基础之类属性和实例属性
2021/10/24 Python
对讲机的最大通讯距离是多少
2022/02/18 无线电
bat批处理之字符串操作的实现
2022/03/16 Python