效果:
www.94qing.cn
更新了MyStyles.css 不会用代码标签 之前全部出错了现在好了 如果不行就到我博客啦
30号更新了在静态注册的问题,把onclick=""location.href='register.asp'"" 修改成onclick=""location.href='"&SiteURL&"/register.asp'""
Ajax登陆样式效果见本站,本站也使用的Ajax登陆样式,这样方便了某些文件需要登陆才能下载。但是以前登陆后会返回首页,给大家带来不少麻烦。
下面教给大家如何添加Ajax登陆样式!
需要添加的文件:
ajax.js ---- 添加到common目录
ajaxLogin.asp --- 添加到blog根目录
MyStyles.css --- 添加到blog根目录,要修改弹出框的样式,就修改这个CSS文件。内有注释。
[local]ajax登陆需要添加的3个文件
[/local]
修改方法:
在
common\common.js最下面添加:
///////////////////////////////////////////////////////////////////////////////////////
//ajax登陆
function $(id){
return document.getElementById(id);
}
function AJAXLogin(){
var username, pwd, validate;
var param;
if ($("AJAXLoginUserName").value == ""){
$("AJAXMsg").innerHTML = "<br>用户名不能为空哦,请输入!";
return;
}
if ($("AJAXLoginPassword").value == ""){
$("AJAXMsg").innerHTML = "<br>没有密码是不能登陆的哟!";
return;
}
param = "action=login";
param += "&username=" + escape($("AJAXLoginUserName").value);
param += "&password=" + escape($("AJAXLoginPassword").value);
param += "&validate=0000";
if ($("AJAXKeepLogin").checked){
param += "&KeepLogin=1";
}
$("AJAXMsg").innerHTML = "<br>登录中,请稍候……";
SendRequest("ajaxLogin.asp", param, "POST",
function(responseText){
if (responseText == "登录成功"){
$("AJAXMsg").innerHTML = "<br>登录成功,自返回该页面!";
setTimeout("location.reload()", 0000);
}else{
$("AJAXMsg").innerHTML = "<br>登录失败,请检查用户名和密码";
}
});
}
function AJAXLogout(){
var param;
param = "action=logout";
SendRequest("ajaxLogin.asp", param, "POST",
function(responseText){
alert(" 退出登录成功,自返回该页面!");
setTimeout("location.reload()", 0000);
});
}
//ajax弹出框登陆
function $(id){
return document.getElementById(id);
}
function AJAXLogins(){
var username, pwd, validate;
var param;
if ($("AJAXLoginUserNames").value == ""){
$("AJAXMsgs").innerHTML = "用户名不能为空哦,请输入!<br>";
return;
}
if ($("AJAXLoginPasswords").value == ""){
$("AJAXMsgs").innerHTML = "没有密码是不能登陆的哟!<br>";
return;
}
param = "action=login";
param += "&username=" + escape($("AJAXLoginUserNames").value);
param += "&password=" + escape($("AJAXLoginPasswords").value);
param += "&validate=0000";
if ($("AJAXKeepLogins").checked){
param += "&KeepLogin=1";
}
$("AJAXMsgs").innerHTML = "<br>登录中,请稍候……";
SendRequest("ajaxLogin.asp", param, "POST",
function(responseText){
if (responseText == "登录成功"){
$("AJAXMsgs").innerHTML = "<br>登录成功,自返回该页面!";
setTimeout("location.reload()", 0000);
}else{
$("AJAXMsgs").innerHTML = "<br>登录失败,请检查用户名和密码";
}
});
}
function AJAXLogouts(){
var param;
param = "action=logout";
SendRequest("ajaxLogin.asp", param, "POST",
function(responseText){
alert(" 退出登录成功,自返回该页面!");
setTimeout("location.reload()", 0000);
});
}
function AJAXShowLogins(){
$("AJAXLoginContainers").style.display = "block";
$("AJAXLoginUserNames").focus();
$("AJAXMsgs").innerHTML = "";
}
function AJAXCloseLogins(){
$("AJAXLoginContainers").style.display = "none";
}
///////////////////////////////////////////////////////////////////////////////////////
修改common\library.asp:
找到:
复制内容到剪贴板
代码:
If memName<>Empty Then
userPanel = userPanel&"<a href=""member.asp?action=edit"" class=""sideA"" accesskey=""M"">修改个人资料</a><a href=""login.asp?action=logout"" class=""sideA"" accesskey=""Q"">退出系统</a>"
Else
userPanel = userPanel&"<a href=""login.asp"" class=""sideA"" accesskey=""L"">登录</a><a href=""register.asp"" class=""sideA"" accesskey=""U"">用户注册</a>"
End If替换成:
///////////////////////////////////////////////////////////////////////////////////////
if memName<>Empty then
userPanel=userPanel&"<a href=""member.asp?action=edit"" class=""sideA"" accesskey=""M"">修改资料</a><a href=""JavaScript:void(0);"" class=""sideA"" accesskey=""Q"" onclick=""AJAXLogout()"">退出系统</a>"
else
userPanel=userPanel&"<label><b>用户名︰</b><input type=""text"" id=""AJAXLoginUserName"" class=""userpass"" size=""12""/></label><br/><label><B>密 码︰</B><input type=""password"" id=""AJAXLoginPassword"" class=""userpass"" size=""12""/></label><br/><label><input type=""checkbox"" id=""AJAXKeepLogin"" /><label for=""AJAXKeepLogin"">记住我的登陆信息</label><p/><input type=submit align=absMiddle border=0 id=""AJAXLoginBtn"" onclick=""AJAXLogin();"" value=""登 陆"" class=""userbutton""/> <input type=button align=absMiddle border=0 value=""注 册"" class=""userbutton""/ onclick=""location.href='"&SiteURL&"/register.asp'""/> <br><span id=""AJAXMsg"" style=""font-weight:bold;color:#FF0000;""></span>"
end if
///////////////////////////////////////////////////////////////////////////////////////
修改common\ubbcode.asp:
查找所有:
复制内容到剪贴板
代码:
<a href=""login.asp"">登录</a>替换成:
复制内容到剪贴板
代码:
<a href=""JavaScript:void(0);"" accesskey=""L"" onclick=""AJAXShowLogins()"">登录</a>修改header.asp:
在</head>上面添加:
复制内容到剪贴板
代码:
<script type="text/javascript" src="common/ajax.js"></script>
<link rel="stylesheet" href="MyStyles.css" type="text/css" media="all" />查找:
复制内容到剪贴板
代码:
<body onload="initJS()" onkeydown="PressKey()">
<a href="default.asp" accesskey="i"></a>
<a href="javascript:history.go(-1)" accesskey="z"></a>
<%getSkinFlash%>替换成:
///////////////////////////////////////////////////////////////////////////////////////
<body onload="initJS()" onkeydown="PressKey()">
<a href="default.asp" accesskey="i"></a>
<a href="javascript:history.go(-1)" accesskey="z"></a>
<div id="AJAXLoginContainers">
<div id="AJAXLogins">
<div id="MsgHead"><span style=font-size:16px> 用户登录</span> <br></div></br>
<label><b>用户名︰</b><input type="text" id="AJAXLoginUserNames" class="userpass" size="15"/></label><br/>
<label><b>密 码︰</b><input type="password" id="AJAXLoginPasswords" class="userpass" size="15"/></label><br>
<label><input type="checkbox" id="AJAXKeepLogins" />记住我的登录信息</label><br><br>
<input type="submit" align=absMiddle border=0 id="AJAXLoginBtns" onclick="AJAXLogins();" value="登 陆" class="userbutton"/> <input type=button align=absMiddle border=0 value="注 册" class="userbutton"/ onclick="location.href='register.asp'"/> <input type=button value="取 消" class="userbutton" align=absMiddle border=0 id="AJAXCancelBtns" onclick="AJAXCloseLogins();"/><br><span id="AJAXMsgs" style="font-weight:bold;color:#FF0000;"></span>
</div>
</div>
<%getSkinFlash%>
///////////////////////////////////////////////////////////////////////////////////////
静态修改:
Template/static.htm:
找到:
复制内容到剪贴板
代码:
<script type="text/javascript" src="common/common.js"></script>在下插入:
复制内容到剪贴板
代码:
<script type="text/javascript" src="common/ajax.js"></script>完成
[
本帖最后由 qlwz1 于 2008-7-30 18:07 编辑 ]