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: 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+AJAX实现无刷新下拉加载更多
随着互联网时代的发展,web前端已经和后台数据挂钩,作为web前端仅仅不是只切图写写html,css 和简单js交互. js code $(function() { var page = 1; var discount = $('#discount'); var innerHeight = window.innerHeight; var timer2 = null; $.ajax({ url: '/lightapp/marketing/verify/apply/list?page=1', t
-
jquery使用iscorll实现上拉、下拉加载刷新
本文实例为大家分享了iscorll实现上拉下拉加载刷新的具体代码,供大家参考,具体内容如下 实现原理是:判断fiiptop,flipdown是否显示为依据 myScroll = new iScroll('wraphome', { fixedScrollbar: true, hideScrollbar: true, fadeScrollbar: true, hScrollbar: false, vScrollbar: true, onScrollMove: function () { var to
-
PHP+jQuery实现滚屏无刷新动态加载数据功能详解
本文实例讲述了PHP+jQuery实现滚屏无刷新动态加载数据功能.分享给大家供大家参考,具体如下: index.php <?php require_once('connect.php'); //连接数据库 $user = array('demo1','demo2','demo3','demo3','<de></de>mo4'); //模拟了几个用户 ?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Trans
-
jQuery模拟原生态App上拉刷新下拉加载更多页面及原理
很多App中,新闻或者展示类都存在下拉刷新和上拉加载的效果,网上提供了实现这种效果的第三方类(详情请见MJRefresh和EGOTableViewPullRefresh),用起来很方便,但是闲暇之余,我们可以思考下,这种效果实现的原理是什么,我以前说过,只要是动画都是骗人的,只要不是硬件问题大部分效果都能在系统UI的基础上做出来. 下面通过jQuery手机端上拉下拉刷新页面代码,很像QQ空间客户端或者微信下拉刷新页面特效代码. 请看下面效果图: 在线预览 源码下载 html代码: <div
-
php+jquery+html实现点击不刷新加载更多的实例代码
基本原理:页面载入时,jQuery向后台请求数据,PHP通过查询数据库将最新的几条记录显示在列表页,在列表页的底部有个"更多"链接,通过触发该链接,向服务端发送Ajax请求,后台PHP程序得到请求参数,并作出相应,获取数据库相应的记录并以JSON的形式返回给前台页面,前台页面jQuery解析JSON数据,并将数据追加到列表页.其实就是Ajax分页效果. HTML 首先要引入jquery库和jquery.more.js插件,jquery.more.js已经将许多功能都封装好了,并提供了参
-
jquery实现界面无刷新加载登陆注册
官网的登陆注册每次要跳转到另一个界面,能不能做一个简单的,在界面弹出一个框框登陆,我想了想做了这么一个案例,大家来看看成不成 贴上代码,实现了在同一个弹出窗上加载了登陆注册功能!可自由点击!当然样式丑了一些!还请见谅!demo在下面 1这里是html内容 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transi
-
使用Yii整合的pjax（pushstate+ajax）实现无刷新加载页面
Pjax是啥? Pjax = history.pushState + Ajax = history.pushState + Async JS + XML(xhr?) BOM对象history被增强了一波,主要是对历史栈的操作,以前只有 replace , go 之类的,都会跳转并刷新整个页面,现在有了 pushState , replaceState 等等单纯操作历史栈的方法,只是单纯修改历史栈里的内容,没有副作用(页面不会跳转刷新) PJAX效果 通过url可以跟踪ajax的动态加载内容.这种
-
asp.net点击 查看更多 实现无刷新加载的实现代码
页面页面的js代码如下, 复制代码 代码如下: <script type="text/javascript"> $(function () { function init(count, start) { $.ajax({ type: "GET", dataType: "json", url: "Handler/Handler.ashx", data: { action: "GetMoreNews"
-
jQuery实现ajax无刷新分页页码控件
这段时间在做公司项目的时候需要用到ajax进行分页(点击页码也是无刷新的显示上一页或下一页的内容,不是一般的选择跳转),但是在网上找了一下,大部分分页插件都是直接刷新跳转的,感觉和我的需求差距比较大,就自己动手写了一个可以实现自己需要的功能的js来实现这个控件,实现的效果如下: 因为业务需要,我需要在一个页面创建多个这样的页码控件(有些是在ajax中生成的),显然为每一个控件写一个专属的js是不现实的,所以,我将公共部分提取出来,然后通过传入的选择器不同,对不同的控件进行相应方法的调用. 下面是
-
pc加载更多功能和移动端下拉刷新加载数据
感觉一个人玩lol也没意思了,玩会手机,看到这个下拉刷新功能就写了这个demo! 这个demo写的比较随意,咱不能当做插件使用,基本思想是没问题的,要用就自己封装吧! 直接上代码分析下吧! 布局: <ul class="show-area" style="min-height:100px;"></ul> <button class='page-btn-nick' >加载更多</button> 就2行,只为实现功能,足矣
-
ListView实现下拉刷新加载更多的实例代码(直接拿来用)
ListView Api bixu 好好看看 mNewsAdapter.notifyDataSetChanged();//刷新ListView 自定义的RefreashListView package com.itguang.dell_pc.myapplication.view; import android.content.Context; import android.util.AttributeSet; import android.view.MotionEvent; import and
-
JQuery页面随滚动条动态加载效果的简单实现(推荐)
Google阅读器上有一个AJAX scollLoad效果很不错,就是阅读项目时不需要翻页,浏览器滚动条往下拉到一定位置时自动加载新的一批项目进来,一直到所有项目加载完为止.要知道,数据量增加很频繁时,要通过定位页码来找到目标数据似乎并没有什么意义.我觉得用户体验成熟的WEB应用程序应当引导用户使用TAG或搜索等功能来找到目标数据.至于浏览数据,尤其是浏览最新的数据,利用浏览器滚动条来加载,是很好的尝试-- 我试着用jquery来实现这个功能.先要得到滚动条的总长属性值:scrollHeight
-
用js的document.write输出的广告无阻塞加载的方法
一.广告代码分析 很多第三方的广告系统都是使用document.write来加载广告,如下面的一个javascript的广告链接. 复制代码 代码如下: <script type="text/javascript" src="http://gg.5173.com/adpolestar/5173/;ap=2EBE5681_1BA3_4663_FA3F_E73D2B83FBDC;ct=js;pu=5173;/?"></script> 这个java
-
jQuery基于ajax实现页面加载后检查用户登录状态的方法
本文实例讲述了jQuery基于ajax实现页面加载后检查用户登录状态的方法.分享给大家供大家参考,具体如下: 拥有会员功能的网站,如果会员已经登录,那么要显示相应的登录状态,而且这种显示的需求是在网站的每个页面都有的(目前国内网站貌似都是这么做的,还没有见过其他形式的状态显示方式),这样,在打开一个新的页面时就要知道这个会员是否已经登录,需要判断登录的状态. 1.解决方案. 为了能够实现在每一个页面判断会员登录状态的功能,我采用了页面时通过ajax传递参数通过后端返回的登录状态结果进行判断,当然