孙向锦 / SunvoteEducation

Commit 377085dbcd33c096e84235f32b85d74c359eeed7

Authored by jack
1 parent 8757d38a

1、优化登录界面历史记录交互

Inline Side-by-side
Showing 1 changed file with 50 additions and 9 deletions
WebRoot/WEB-INF/jsp/system/index/login.jsp
  View file @377085d
... ... @@ -19,12 +19,14 @@
19 19 <!-- Bootstrap -->
20 20 <link href="static/css/bootstrap.min.css" rel="stylesheet">
21 21 <link href="static/login/style_login.css" rel="stylesheet">
  22 +<link href="static/css/mb_style.css" rel="stylesheet">
22 23  
23 24 <script src="static/js/jquery-1.7.2.js"></script>
24 25 <script src="static/login/js/jquery.easing.1.3.js"></script>
25 26 <script type="text/javascript" src="static/js/jQuery.md5.js"></script>
26 27 <script type="text/javascript" src="static/js/jquery.tips.js"></script>
27 28 <script type="text/javascript" src="static/js/lang.js"></script>
  29 +<script type="text/javascript" src="static/js/remove.js"></script>
28 30 <script type="text/javascript" >
29 31 if(lang() != 'zh'){
30 32  
... ... @@ -45,6 +47,15 @@ body{
45 47 font-size: 14px;
46 48 letter-spacing: 1px;
47 49 }
  50 +.clear_history{
  51 + text-align:right;
  52 + line-height:30px;
  53 + margin: 0;
  54 +}
  55 +.clear_history a{
  56 + text-decoration: underline;
  57 + margin-right: 15px;
  58 +}
48 59 </style>
49 60  
50 61 <!-- HTML5 shim 和 Respond.js 是为了让 IE8 支持 HTML5 元素和媒体查询（media queries）功能 -->
... ... @@ -80,6 +91,7 @@ body{
80 91 <ul>
81 92  
82 93 </ul>
  94 + <p class="clear_history"><a onclick="clear_history()">清除记录</a></p>
83 95 </div>
84 96 </div>
85 97  
... ... @@ -107,26 +119,39 @@ body{
107 119 $("#loginname").focus();
108 120  
109 121 });
110   - $("#loginname").focus(function(){
  122 + $("#loginname").focus(function(e){
111 123 var _html="";
112 124 var u_list=JSON.parse(storage.getItem('userNameList'));
113   - for(var i=0;i<u_list.length;i++){
114   - _html+='<li>'+u_list[i]+'</li>';
  125 + console.log(u_list);
  126 + if((u_list!=null)||(u_list.length>0)){
  127 + $("#loginname").blur(function(){
  128 + $(".history").hide();
  129 + })
  130 + for(var i=0;i<u_list.length;i++){
  131 + _html+='<li>'+u_list[i]+'</li>';
  132 + }
  133 + $(".history ul").html(_html);
  134 + $(".history").show();
115 135 }
116   - $(".history ul").html(_html);
117   - $(".history").toggle();
  136 +
118 137 });
119 138  
  139 + $('.history').hover(function(){
  140 + $("#loginname").unbind("blur");
  141 + },function(){
  142 + $("#loginname").blur(function(){
  143 + $(".history").hide();
  144 + })
  145 + });
120 146  
121   - $(document).on('hover','.history li',function(){
  147 + $(document).on('click','.history li',function(){
122 148 var p_list=JSON.parse(storage.getItem('passWordList'));
123 149 $("#loginname").val($(this).text());
124 150 $("#password").val(p_list[$(this).index()]);
125   - //$(".history").hide();
126   - })
127   - $("#loginname").blur(function(){
128 151 $(".history").hide();
129 152 })
  153 +
  154 +
130 155  
131 156  
132 157 //客户端校验
... ... @@ -166,6 +191,8 @@ body{
166 191  
167 192 return true;
168 193 }
  194 +
  195 +
169 196  
170 197 //服务器校验
171 198 function severCheck(){
... ... @@ -229,6 +256,20 @@ body{
229 256  
230 257 //console.log(JSON.parse(storage.getItem('userNameList')));
231 258  
  259 + //清除历史记录
  260 + function clear_history(){
  261 + window.top.remove.init({"title":"确定清除历史记录吗？","func":function(success){
  262 + if(success){
  263 + storage.clear();
  264 + $(".history").hide();
  265 + }else{
  266 + console.log("false");
  267 + }
  268 + }});
  269 + window.top.remove.show();
  270 +
  271 + }
  272 + //保存登录记录
232 273 function saveCookie() {
233 274 if(!window.localStorage){
234 275 alert("浏览器不支持localstorage");
... ...