登录、注册、个人信息、退出按钮的隐藏和出现

avatar 2016年8月9日20:53:12 1 512 views

先上效果图

1.未登录之前,隐藏个人信息和退出
这里写图片描述

2.登陆后,隐藏登陆和注册按钮,显示用户头像
这里写图片描述

3.点击头像,显示下拉列表
这里写图片描述

先上jQuery代码

  1. //注册,登录,个人信息,退出按钮的隐藏和出现
  2.     $('#member, #logout').hide();
  3.     if ($.cookie('username')) {
  4.         $('#member,#logout').show();
  5.         $('#reg_a,#login_a').hide();
  6.     } else {
  7.         $('#member,#logout').hide();
  8.         $('#reg_a,#login_a').show();
  9.     }

html代码

1.两个按钮

  1. <div class="double">
  2.       <button class="btn btn-success" data-toggle="modal"
  3.           data-target="#myModal" data-backdrop="static" id="login_a">即刻登陆</button>
  4.       <button class="btn btn-danger" data-toggle="modal"
  5.           data-target="#myModal1" data-backdrop="static" id="reg_a">马上注册</button>
  6.   </div>

2.个人信息及退出

  1. <div class="user" style="width: 200px; height: 200px; float: right;padding-top: 40px;"
  2.                     id="member">
  3.                     <div class="dropdown">
  4.                         <img src="__PUBLIC__/Uploads/{$userInfo.filename}"
  5.                             alt="{$Think.session.username}" width="100px" height="100px"
  6.                             class="img-circle dropdown" data-toggle="dropdown"
  7.                             aria-haspopup="true" aria-expanded="true"
  8.                             style="-moz-border-radius: 50%; -webkit-border-radius: 50%; border-radius: 50%; overflow: hidden;">
  9.                         <ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
  10.                             <li class="dropdown-header">
  11.                                 <!-- {$Think.session.username} -->{$userInfo.username}
  12.                             </li>
  13.                             <li><a href="#" data-toggle="modal" data-target="#myModal3"
  14.                                 data-backdrop="static">账号设置</a></li>
  15.                             <li><a href="#">Something else here</a></li>
  16.                             <li><a href="__URL__/doLogout" id="logout">退出</a></li>
  17.                         </ul>
  18.                     </div>
  19.                 </div>

 

本文地址:http://liuyanzhao.com/3498.html

转载请注明

 

 

  • 微信
  • 交流学习,有偿服务
  • weinxin
  • 博客/Java交流群
  • 资源分享,问题解决,技术交流。群号:590480292
  • weinxin
avatar

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

目前评论:1   其中:访客  1   博主  0

    • avatar 丽丽 0

      好:cool: