使用javaeye的登陆效果

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

 

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

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

html 代码

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

 

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

js 代码

function openAjaxConfirm() {
        Dialog.confirm($('login').innerHTML, {className:"alphacube", width:400,
                                  okLabel: "login", cancelLabel: "cancel",
                                  onOk:function(win){
                                        checkUser();
                                        }});
    }

 

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

js 代码

function checkUser() {
        if($F("usrid" )== "") {
            return false;
        }

        var params = 'actionflag=user&usrid=' + $F("usrid") + '&pswrd=' + $F("pswrd");
        var url = '../foreground/userAjaxBean';
        var myAjax = new Ajax.Request(
                        url,
                        {method: 'post', parameters: params, onComplete: showResponse}
                     );
    }

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

java 代码

public String validateUser(String usrid,String pswrd) {
        fgUser = fguserService.getUserByUsridAndPwd(usrid.toLowerCase(),EchanceUtil.encryptPwd(pswrd));
        if(fgUser == null){
            return "error";
        }else{
            if(!"Y".equalsIgnoreCase(fgUser.getAccs())){
                return "error";
            }
            fgUser.setPswrd(null);
            fgUser.setUsrid(fgUser.getUsrid().toLowerCase());
            ActionContext.getActionContext().getSessionMap().put(BaseConstants.FG_USER_SESSIONKEY,fgUser);
        }
        return "success";
    }

 

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

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

js 代码

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

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

评论

4 楼 east_java 2008-05-30  

..

请问,登陆成功后,怎么跳到原来的页面呢?

3 楼 javaEye_good 2007-06-04  

在2000操作系统上怎么不行啊？

2 楼 javaEye_good 2007-05-25  

用window如何做？兄弟 给个例子阿 [e-mail]

1 楼 小嘴看世界 2007-03-23  

为了方便还是贴上CSS的代码，这一段是官方example中提供的。

.login_label, .login_input, .login_error  {
  padding:10px;
  color:#000;
  text-align:left;
  float:left; 
  width:100px;
  font-size:20px;
  color:#64355A;
}

.login_input {
  width:200px;
}

.login_error {
  width:250px;
  color:#F00;
}

.login_input input {
  width:100%;
}
#login {
  background:#123;
}