码迷,mamicode.com
首页 > Web开发 > 详细

使用jquery为个人博客园首页公告栏添加用户登录与注销

时间:2016-09-17 00:21:15      阅读:218      评论:0      收藏:0      [点我收藏+]

标签:

  未登录前,注销的字体颜色为黑色,登录后,登录的字体为蓝色。

1、在公告栏添加布局显示代码

<!--显示登录 Begin-->
<!--   隐藏调用html代码-->
<div class="hide">
<!--------------------------用户登陆前后显示------------------------------->
    <div class="login_message " style="display: none;"></div>
        <div >
            <a id="lnkLogin">hi,请登录</a> - 
            <a href="https://ing.cnblogs.com/" target="_blank">闪存</a> - 
            <a href="http://msg.cnblogs.com/inbox" target="_blank">消息</a> - 
            <a id="lnkLoginout">注销</a></br>
        </div>
    </div>
<!-------------------------用户登陆前后显示结束---------------------------->
</div>
<!--   隐藏调用html代码end-->

2、在布局后添加js代码

<!--******js代码开始******-->
<script type="text/javascript">
    $(document).ready(function(){
        //***************全局变量*************
        var dangqurl=window.location.href;  //获取当前url
        var loginy ;   // 登陆状态        1为已登录         0为未登陆    
        //ajax获取设置登录信息
        $.ajax({  
            url:"http://www.cnblogs.com/GetLoginInfo.aspx",
            data:{},  
            type: post,
            async: false,
            dataType: text,
            contentType: application/json; charset=utf-8,
            success: function (data){    
                if (data) {   
                     var reset=data.replace(/document\.write\(\"/g,"").replace(/\"\)\;/,"").replace(/\[ /,"").replace(/\]/,"");
                     $(".login_message").html(reset);        
                     loginz=$(".login_message").find("a:first").html();
                     bkurl= $(".login_message").find("a:first").attr("href"); 
                //登录设置
                     if(loginz !="登录"){
                         $(".headTopRight").html($(".ylogin").html());
                          loginy=1  //设置登录状态
                          login_name=loginz;  
                    //获取博客地址     
                        var bokarr=new Array();        
                        bokarr=bkurl.split("/");
                        bok_link=bokarr[3];     
                        $(".login_namez").html(loginz);
                        $(".login_namez").attr("href","http://www.cnblogs.com/"+bok_link);
                        $(".login_namez1").attr("href","http://www.cnblogs.com/"+bok_link);
                        $("#lnkLoginout").attr("href","http://passport.cnblogs.com/logout.aspx?ReturnUrl="+dangqurl);
                        window.location_href=dangqurl;
                        $(".wdyz").attr("href","http://home.cnblogs.com/u/"+bok_link);      
                    }
                    if(loginz=="登录"){
                        $(".headTopRight").html($(".nlogin").html());
                             loginy=0  //设置登录状态          
                        $("#lnkLogin").attr("href","http://passport.cnblogs.com/login.aspx?ReturnUrl="+dangqurl);
                        window.location_href=dangqurl;
                    }
                //登录 设置结束
                }                 
            },                
            erro:function (){                 
                loginy=0;
                login_type="user";
                $(".login_main").html($(".nlogin").html());
                $("#lnkLogin").attr("href","http://passport.cnblogs.com/login.aspx?ReturnUrl="+dangqurl);
                window.location_href=dangqurl;
            }
        });
        //获取登录信息结束
    });
</script>
<!--显示登录 End-->

3、显示效果

技术分享

使用jquery为个人博客园首页公告栏添加用户登录与注销

标签:

原文地址:http://www.cnblogs.com/dinphy/p/5877681.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!