功能阐述:
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">密 码:</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;"> <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