jquery完成界面无刷新加载登陆注册
昨天公司说官网的登陆注册每次要跳转到另一个界面，能不能做一个简单的，在界面弹出一个框框登陆，我想了想做了这么一个案例，大家来看看成不成
贴上代码，实现了在同一个弹出窗上加载了登陆注册功能！可自由点击！当然样式丑了一些！还请见谅！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:;
margin:;
list-style: none;
} .login-header {
text-align: center;
height: 30px;
font-size: 24px;
line-height: 30px;
} .js_login {
display: none;
position: fixed;
opacity:;
z-index:;
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:; /* 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:;
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:;
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
jquery完成界面无刷新加载登陆注册的更多相关文章
- jQuery Pjax – 页面无刷新加载，优化用户体验
pjax 是 HTML5 pushState 以及 Ajax 两项技术的简称,综合这两个技术可以实现在不刷新页面的情况下载入 HTML 到当前网页,带给你超快速的浏览器体验,而且有固定链接.标题以及后 ...
- emlog通过pjax实现无刷新加载网页--完美解决cnzz统计和javascript失效问题
想要更详细了解pjax,需要查看官网 或者看本站文章:jQuery.pjax.js:使用AJAX和pushState无刷新加载网页(官网教程中文翻译) 效果看本站,音乐无刷新播放,代码高亮和复制js加 ...
- js中对arry数组的各种操作小结 瀑布流AJAX无刷新加载数据列表--当页面滚动到Id时再继续加载数据 web前端url传递值 js加密解密 HTML中让表单input等文本框为只读不可编辑的方法 js监听用户的键盘敲击事件，兼容各大主流浏览器 HTML特殊字符
js中对arry数组的各种操作小结 最近工作比较轻松,于是就花时间从头到尾的对js进行了详细的学习和复习,在看书的过程中,发现自己平时在做项目的过程中有很多地方想得不过全面,写的不够合理,所以说啊 ...
- 瀑布流AJAX无刷新加载数据列表--当页面滚动到Id时再继续加载数据
瀑布流加载显示数据,在当下已经用的很普遍,尤其是我们在做网上商城时,在产品列表页面已经被普遍使用. 对于实现瀑布流布局的解决方案主要有以下两种方式: 1.对每一条显示数据使用绝对定位+浮动的方式,这样 ...
- asp.net mvc 无刷新加载
1.视图(index) <!--start--> <div data-am-widget="list_news" class="am-list-news ...
- jquery+ajax无刷新加载数据，新闻浏览更多
<script type="text/javascript"> $(document).ready(function (){ $(window).scroll(fu ...
- ajax实现下拉菜单无刷新加载更多
$(function() { var page = 1; var discount = $('#discount'); var innerHeight = window.innerHeight; va ...
- pushState与ajax实现无刷新加载
一.JS代码: $(document).ready(function() { getContent();//初始化页面 $("nav a").click(function() { ...
- thinkphp5.0调用ajax无刷新加载数据
控制器层那边就是调数据返回,这里不再赘述,视图层页面ajax部分写法如下 function shanchu(obj) { var code = $(obj).attr("code" ...
随机推荐
- .NET MVC 学习笔记（六）— 数据导入
.NET MVC 学习笔记(六)—— 数据导入 在程序使用过程中,有时候需要新增大量数据,这样一条条数据去Add明显不是很友好,这时候最好就是有一个导入功能,导入所需要的数据,下面我们就一起来看一下导 ...
- Nmap命令的常用实例
一.Nmap简介 nmap是一个网络连接端扫描软件,用来扫描网上电脑开放的网络连接端.确定哪些服务运行在哪些连接端,并且推断计算机运行哪个操作系统(这是亦称 fingerprinting).它是网络管 ...
- [学习笔记]普通平衡树Splay
哈哈哈哈哈哈哈终于会打\(splay\)啦 现在我来发一下\(splay\)的讲解吧 小蒟蒻由于码风与他人不同,所以自己找了上百篇码风诡异的\(splay\)合成的,感谢\(zcysky\)的代码与我 ...
- C#6.0语言规范(十五) 委托
委托启用其他语言(如C ++,Pascal和Modula)已使用函数指针进行寻址的方案.但是,与C ++函数指针不同,委托是完全面向对象的,与成员函数的C ++指针不同,委托封装了对象实例和方法. 委 ...
- MySQL 并行复制(MTS) 从库更新的记录不存在实际却存在
目录 背景 版本 分析 测试 背景 开了并行复制的半同步从库SQL 线程报1032错误,异步复制从库没有报错,偶尔会出现这种 版本 mysql 5.7.16 redhat 6.8 mysql> ...
- 机器学习基石笔记：16 Three Learning Principles
三个理论上界: 三个线性模型: 三个关键工具: 三条学习规则: 1.奥卡姆剃刀定律 先从简单模型开始, 训练后出现欠拟合, 再尝试复杂点模型. 2.采样误差 训练.验证.测试数据尽量同分布. 3.数据 ...
- Caffe 使用记录（一）mnist手写数字识别
1. 运行它 1. 安装caffe请参考 http://www.cnblogs.com/xuanyuyt/p/5726926.html 此例子在官网 http://caffe.berkeleyvis ...
- wnmp(windows+nginx+mysql+php)环境搭建和配置
要求 必备知识 熟悉基本编程环境搭建. 运行环境 windows 7(64位); nginx-1.4.7;MySQL Server 5.5php-5.4.39-nts 下载地址 环境下载 Nginx是 ...
- 配置Zookeper
在整个的codis架构之中,codis-proxy将作为所有的codis-server的对外的代理,而在整个的处理之中,codis-proxy所保存的数据一定是所有的codis-server的信息,那 ...
- 理解Golang包导入
Golang使用包(package)这种语法元素来组织源码,所有语法可见性均定义在package这个级别,与Java .python等语言相比,这算不上什么创新,但与C传统的include相比,则是显 ...