功能阐述:

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

 

 

 

posted on 2013-08-23 16:16  huanhuan8808  阅读(932)  评论(0编辑  收藏  举报