页面弹出登录框的功能整理

功能阐述:

1. 点击某个按钮，校验是否登录；

2.未登录，页面弹出登录框；

3.登录后，校验是否完善个人信息（手机号码，邮箱）；

4.未完善信息，弹出完善信息框，完善之后保存；

第一步，

加载弹出框的样式文件

<link rel="stylesheet" type="text/css" href="http://s.hqbcdn.com/??assets/v1/css/login.dialog.css?t=20130813" />
<link rel="stylesheet" type="text/css" href="http://s.hqbcdn.com/??lib/dialog/skins/dialog.css?t=20130813" />

加载弹出框及登录校验的js文件

<script type="text/javascript" src="http://s.hqbcdn.com/??lib/jquery/jquery-1.7.2.min.js,lib/jquery/jquery.cookie.js?t=20130813"></script>
<script type="text/javascript" src="http://s.hqbcdn.com/??lib/dialog/artDialog.js?t=20130813"></script>
<script type="text/javascript" src="http://s.hqbcdn.com/??assets/v2/script/dialog.login.js?t=20130813"></script>

第二步，

在页面中加入，“登录框”的DOM结构

<!--S 弹出DOM -->
<div style="display:none;" id="loginDialogDOM">
<div class="layerLodin dialog">
    <div class="loginCont">
        <div class="form_error" id="form_error"></div>
        <form action="" method="POST" id="__loginForm">
        <table class="loginDialogContainer">
            <tbody><tr>
                <td class="left">
                    <table>
                        <tbody><tr>
                            <td>
                            <div style="display:none;" class="tipsMsg_i"><p></p></div>
                            <div class="lgLst">
                                <label for="account">邮箱/昵称：</label>
                                <input type="text" maxlength="76" class="lgIpt call" name="account" id="account">
                            </div>
                            <div class="lgLst">
                                <label for="password">密&#12288;码：</label>
                                <input type="password" maxlength="16" class="lgIpt call" name="password" id="password">
                            </div>

                            <div class="ilink">
                                <table cellpadding="3">
                                    <tbody><tr>
                                        <td><input type="button" value="" class="loginBtn" id="dialogLogin"></td>
                                        <td style="font-size:12px;">&nbsp;<a href="http://login.okhqb.com/member/memberForget.html" target="_blank">忘记密码？</a></td>
                                    </tr>
                                </tbody></table>
                                <div class="reg">还没有华强北商城的账号？<a href="http://login.okhqb.com/member/register.html" target="_blank">立即注册</a></div>
                            </div>
                            </td>
                        </tr>
                    </tbody></table>
                </td>
            </tr>
            <tr>
                <td colspan="2" id="sns_login">                
                    <div class="login_sns">
                        <a href="javascript:;" class="tencent" id="__unionQQ">QQ登录</a>
                        <a href="javascript:;" class="sinaWeibo" id="__unionSina">新浪微博登录</a>
                        <a href="javascript:;" class="alipay" id="__unionAlipay">支付宝登录</a>
                    </div>                
                </td>
            </tr>            
        </tbody></table>
        </form>
    </div>
</div>
</div>
<!--E 弹出登录DOM-->

使用其他登录方式（qq登录，新浪微博登录，支付宝登录）的处理

<script type="text/javascript">
<!--
var _currURL = window.location.href;
$('#__unionAlipay').live('click', function(){
    window.location.href = 'http://login.okhqb.com/member/union/alipay.html?forward=' + _currURL;
    return false;
});
$('#__unionQQ').live('click', function(){
    window.location.href = 'http://login.okhqb.com/member/union/qq.html?forward=' + _currURL;
    return false;
});
$('#__unionSina').live('click', function(){
    window.location.href = 'http://login.okhqb.com/member/union/sina.html?forward=' + _currURL;
    return false;
});
//-->
</script>

第三步，在页面中如何调用

<script type="text/javascript">
<!--触发按钮的click事件，进行校验
$('#DEMO').click(function(){
    //获取是否登录的参数
    var _isLogin = HQB_dialogLogin.____isLogin();
    
    var __callback = function(){
        // 登录完成执行我
    }
    
    //未登录时，弹出登录框
    if( !_isLogin ){
        //进行登录操作
        HQB_dialogLogin.loginAction( 'loginDialogDOM', '__loginDialog', __callback );
    }

});
//-->
</script>

看看完整的demo  ，下载login_demo.zip