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

jack
1 parent 8757d38a
Showing 1 changed file with 50 additions and 9 deletions
WebRoot/WEB-INF/jsp/system/index/login.jsp
@@ -19,12 +19,14 @@
 <!-- Bootstrap -->
 <link href="static/css/bootstrap.min.css" rel="stylesheet">
 <link href="static/login/style_login.css" rel="stylesheet">
+<link href="static/css/mb_style.css" rel="stylesheet">
 <script src="static/js/jquery-1.7.2.js"></script>
 <script src="static/login/js/jquery.easing.1.3.js"></script>
 <script type="text/javascript" src="static/js/jQuery.md5.js"></script>
 <script type="text/javascript" src="static/js/jquery.tips.js"></script>
 <script type="text/javascript" src="static/js/lang.js"></script>
+<script type="text/javascript" src="static/js/remove.js"></script>
 <script type="text/javascript" >
 	if(lang() != 'zh'){
@@ -45,6 +47,15 @@ body{
 	font-size: 14px;
 	letter-spacing: 1px;
 }
+.clear_history{
+	text-align:right;
+	line-height:30px;
+	    margin: 0;
+}
+.clear_history a{
+	text-decoration: underline;
+	margin-right: 15px;
+}
 </style>
 <!-- HTML5 shim 和 Respond.js 是为了让 IE8 支持 HTML5 元素和媒体查询（media queries）功能 -->
@@ -80,6 +91,7 @@ body{
 						<ul>
 						</ul>
+						<p class="clear_history"><a onclick="clear_history()">清除记录</a></p>
 					</div>
 				</div>
@@ -107,26 +119,39 @@ body{
    			$("#loginname").focus();
    		});
-   		$("#loginname").focus(function(){
+   		$("#loginname").focus(function(e){
    			var _html="";
    			var u_list=JSON.parse(storage.getItem('userNameList'));
-   			for(var i=0;i<u_list.length;i++){
-   				_html+='<li>'+u_list[i]+'</li>';
+   			console.log(u_list);
+   			if((u_list!=null)||(u_list.length>0)){
+   				$("#loginname").blur(function(){
+   	   	   			$(".history").hide();
+   	   	   		})
+   	   			for(var i=0;i<u_list.length;i++){
+   	   				_html+='<li>'+u_list[i]+'</li>';
+   	   			}
+   	   			$(".history ul").html(_html);
+   	   			$(".history").show();
    			}
-   			$(".history ul").html(_html);
-   			$(".history").toggle();
+   			
    		});
+   		$('.history').hover(function(){
+   	   		$("#loginname").unbind("blur");
+   		},function(){
+   			$("#loginname").blur(function(){
+	   	   		$(".history").hide();
+	   	   	})
+   		});
-   		$(document).on('hover','.history li',function(){
+   		$(document).on('click','.history li',function(){
    			var p_list=JSON.parse(storage.getItem('passWordList'));
    			$("#loginname").val($(this).text());
    			$("#password").val(p_list[$(this).index()]);
-   			//$(".history").hide();
-   		})
-   		$("#loginname").blur(function(){
    			$(".history").hide();
    		})
+   		
+
    		//客户端校验
@@ -166,6 +191,8 @@ body{
 			return true;
 		}
+   		
+   		
 		//服务器校验
 		function severCheck(){
@@ -229,6 +256,20 @@ body{
 		//console.log(JSON.parse(storage.getItem('userNameList')));
+		//清除历史记录
+   		function clear_history(){
+   			window.top.remove.init({"title":"确定清除历史记录吗？","func":function(success){
+   				if(success){
+   					storage.clear();
+   					$(".history").hide();
+   				}else{
+   					console.log("false");
+   				}
+   			}});
+   			window.top.remove.show();
+   			
+   		}
+		//保存登录记录
 		function saveCookie() {
 			if(!window.localStorage){
 	            alert("浏览器不支持localstorage");