使用javaeye的登陆效果

在项目中突然感觉登陆放在什么地方都不舒服，不如做成javaeye的样式好了，也想顺便看一看是如何的实现。google中搜索'ajax 模式对话框'还真有一些，去年的程序员杂志中有一篇类似的介绍，说明了一下原理，就是把登陆的代码放在一个隐藏的div中，登陆时使用一些CSS的样式达到效果。CSS我不怎么样，看来估计要使用工具类了。结果果然搜索到了，还是在javaeye上找到的，就是这个网址啦， http://prototype-window.xilinus.com。

 

下载之后是windows_js_1.2.1版本，发现其中也使用到了prototype.js，感谢外国人的无私奉献。

先贴上我的隐藏部分，就是登陆表单

html 代码

1. <div id="login" style="display:none">  
2.     <p><span id='login_error_msg' class="login_error" style="display:none">&nbsp;</span></p>  
3.     <div style="clear:both"></div>  
4.     <p><span class="login_label">会员名</span> <span class="login_input"><input id="usrid" name="usrid" type="text"/></span></p>  
5.     <div style="clear:both"></div>  
6.     <p><span class="login_label">密码</span> <span class="login_input"><input id="pswrd" name="pswrd" type="password"/></span></p>  
7.     <div style="clear:both"></div>  
8. </div>  

 

然后就是他给提供的一系列效果了，看过一些example发现很有意思，我使用的是其中的对话框

js 代码

1. function openAjaxConfirm() {   
2.         Dialog.confirm($('login').innerHTML, {className:"alphacube", width:400,   
3.                                   okLabel: "login", cancelLabel: "cancel",   
4.                                   onOk:function(win){   
5.                                         checkUser();   
6.                                         }});   
7.     }  

 

其中的onOk就是点击OK按钮执行的动作啦，这里需要一个检查用户的ajax代码

js 代码

1. function checkUser() {   
2.         if($F("usrid" )== "") {   
3.             return false;   
4.         }   
5.   
6.         var params = 'actionflag=user&usrid=' + $F("usrid") + '&pswrd=' + $F("pswrd");   
7.         var url = '../foreground/userAjaxBean';   
8.         var myAjax = new Ajax.Request(   
9.                         url,   
10.                         {method: 'post', parameters: params, onComplete: showResponse}   
11.                      );   
12.     }  

../foreground/userAjaxBean是我的servlet(感觉这部分贴上来意义不大，毕竟不一定非要使用servlet，所以贴上部分代码)

java 代码

1. public String validateUser(String usrid,String pswrd) {   
2.         fgUser = fguserService.getUserByUsridAndPwd(usrid.toLowerCase(),EchanceUtil.encryptPwd(pswrd));   
3.         if(fgUser == null){   
4.             return "error";   
5.         }else{   
6.             if(!"Y".equalsIgnoreCase(fgUser.getAccs())){   
7.                 return "error";   
8.             }   
9.             fgUser.setPswrd(null);   
10.             fgUser.setUsrid(fgUser.getUsrid().toLowerCase());   
11.             ActionContext.getActionContext().getSessionMap().put(BaseConstants.FG_USER_SESSIONKEY,fgUser);   
12.         }   
13.         return "success";   
14.     }  

 

里面使用了一些工具类等文件，如果验证正确会返回success，否则返回error。

下面又到了客户端了，接受服务器返回的javascript

js 代码

1. function showResponse(originalRequest){   
2.         if(originalRequest.responseText == "error"){   
3.             $('login_error_msg').innerHTML='登陆失败';   
4.             $('login_error_msg').style.display = "";   
5.             Windows.focusedWindow.updateHeight();   
6.             //new Effect.Shake(Windows.focusedWindow.getId()); 打开此处如果验证失败会震动哦  
7.             return false;   
8.         }else{   
9.             window.location='index.shtml';   
10.             //window.location.reload(true); 刷新当前页面，我是直接刷新到首页  
11.             return true;   
12.         }   
13.     }  

到这里就结束了，给大家上个效果看看，打开对话框时页面就是不可编辑啦，根据自己喜欢的样子对CSS略加改动，就OK了。篇幅原因CSS就不贴上来了，意义不大。