本站推荐

QQ登陆网页后用户状态的自定义教程

来 源:共享世纪 作 者:lennyash 时间:2013-01-14 点击:
loading...

在开始本篇之前,如果您还不会在网页中加入QQ登陆按钮的话,请先阅读本站另一篇教程:
1、快速为网站加入QQ登陆的教程

使用上述方法,接入QQ登陆的,默认登陆后的状态如下:


默认登陆后状态

其实,可以通过另外一段代码,来自定义 登陆后状态 以及 QQ登陆按钮 效果 :

将登陆页面中<body>标签中的代码:

  1. <script type="text/javascript"
  2.     QC.Login({ 
  3.        btnId:"qqLoginBtn"   //插入按钮的节点id 
  4. }); 
  5. </script> 

替换为以下代码:

  1. <script type="text/javascript"
  2.    //调用QC.Login方法,指定btnId参数将按钮绑定在容器节点中 
  3.    QC.Login({ 
  4.        //btnId:插入按钮的节点id,必选 
  5.        btnId:"qqLoginBtn",   
  6.        //用户需要确认的scope授权项,可选,默认all 
  7.        scope:"all"
  8.        //按钮尺寸,可用值[A_XL| A_L| A_M| A_S|  B_M| B_S| C_S],可选,默认B_S 
  9.        size: "A_XL" 
  10.    }, function(reqData, opts){//登录成功 
  11.        //根据返回数据,更换按钮显示状态方法 
  12.        var dom = document.getElementById(opts['btnId']), 
  13.        _logoutTemplate=[ 
  14.             //头像 
  15.             '<span><img src="{figureurl}" class="{size_key}"/></span>'
  16.             //昵称 
  17.             '<span>{nickname}</span>'
  18.             //退出 
  19.             '<span><a href="javascript:QC.Login.signOut();">退出</a></span>'   
  20.                      ].join(""); 
  21.        dom && (dom.innerHTML = QC.String.format(_logoutTemplate, { 
  22.            nickname : QC.String.escHTML(reqData.nickname), 
  23.            figureurl : reqData.figureurl 
  24.               })); 
  25.    }, function(opts){//注销成功 
  26. alert('QQ登录 注销成功'); 
  27.                      } 
  28. ); 
  29. </script> 

参数调整:
1、scope:可调整QQ登陆前登陆按钮的尺寸和形式,可用值为:A_XL A_L A_M A_S B_M B_S C_S,可选,默认B_S。
2、_logoutTemplate的值为登陆状态后的头像,昵称,以及退出链接,懂得HTML此处就会修改,故不再赘述。

比如:可将_logoutTemplate的值改为:

  1. '<div style="text-align:center"><span><a href="http://www.2ky.cn" target="_blank"><img src="{figureurl}" class="{size_key}"/></a></span><br/>', 
  2. //昵称 
  3. '<span style="font-size:9px"><a href="http://t.qq.com/lennyash" target="_blank">{nickname}</a></span>,', 
  4. //退出 
  5. '<span style="font-size:9px"><a href="javascript:QC.Login.signOut();">退出</a></span></div>

可在 http://www.2ky.cn/qqlogin/status.htm 页面用QQ登陆后,查看状态的自定义效果!

来源:http://www.2ky.cn/h/17/qqlogin-status.htm
转载要求注明来源,请尊重作者版权!

关键字: QQ登陆

会员登陆close X