1 <%@ page language="java" contentType="text/html; charset=UTF-8" 2 pageEncoding="UTF-8"%> 3 <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%> 4 <% 5 String path = request.getContextPath(); 6 %> 7 <!DOCTYPE html> 8 <html lang="en"> 9 10 <head> 11 <title>${pd.SYSNAME}</title> 12 <meta charset="UTF-8" /> 13 <meta name="viewport" content="width=device-width, initial-scale=1.0" /> 14 15 <link rel="stylesheet" href="static/login/bootstrap.min.css" /> 16 <link rel="stylesheet" href="static/login/css/camera.css" /> 17 <link rel="stylesheet" href="static/login/bootstrap-responsive.min.css" /> 18 <link rel="stylesheet" href="static/login/matrix-login.css" /> 19 <link href="static/login/font-awesome.css" rel="stylesheet" /> 20 <script type="text/javascript" src="static/js/jquery-1.5.1.min.js"></script> 21 22 </head> 23 <body> 24 25 <div style="100%;text-align: center;margin: 0 auto;position: absolute;"> 26 <div id="loginbox"> 27 <form action="" method="post" name="loginForm" id="loginForm"> 28 <div class="control-group normal_text"> 29 <h3> 30 <img src="static/login/logo.png" alt="Logo" /> 31 </h3> 32 </div> 33 <div class="control-group"> 34 <div class="controls"> 35 <div class="main_input_box"> 36 <span class="add-on bg_lg"> 37 <i><img height="37" src="static/login/user.png" /></i> 38 </span><input type="text" name="loginname" id="loginname" value="" placeholder="请输入用户名" /> 39 </div> 40 </div> 41 </div> 42 <div class="control-group"> 43 <div class="controls"> 44 <div class="main_input_box"> 45 <span class="add-on bg_ly"> 46 <i><img height="37" src="static/login/suo.png" /></i> 47 </span><input type="password" name="password" id="password" placeholder="请输入密码" value="" /> 48 </div> 49 </div> 50 </div> 51 <div style="float:right;padding-right:10%;"> 52 <div style="float: left;margin-top:3px;margin-right:2px;"> 53 <font color="white">记住密码</font> 54 </div> 55 <div style="float: left;"> 56 <input name="form-field-checkbox" id="saveid" type="checkbox" 57 onclick="savePaw();" style="padding-top:0px;" /> 58 </div> 59 </div> 60 <div class="form-actions"> 61 <div style="86%;padding-left:8%;"> 62 <div style="float: left;"> 63 <i><img src="static/login/yan.png" /></i> 64 </div> 65 <div style="float: left;" class="codediv"> 66 <input type="text" name="code" id="code" class="login_code" style="height:16px; padding-top:0px;" /> 67 </div> 68 <div style="float: left;"> 69 <i><img style="height:22px;" id="codeImg" alt="点击更换" title="点击更换" src="" /></i> 70 </div> 71 <span class="pull-right" style="padding-right:3%;"> 72 <a href="javascript:quxiao();" class="btn btn-success">取消</a> 73 </span> 74 <span class="pull-right"> 75 <a onclick="severCheck();" class="flip-link btn btn-info" id="to-recover">登录</a> 76 </span> 77 78 </div> 79 </div> 80 81 </form> 82 83 84 <div class="controls"> 85 <div class="main_input_box"> 86 <font color="white"><span id="nameerr">Copyright © FH 87 2100</span></font> 88 </div> 89 </div> 90 </div> 91 </div> 92 <div id="templatemo_banner_slide" class="container_wapper"> 93 <div class="camera_wrap camera_emboss" id="camera_slide"> 94 <div data-src="static/login/images/banner_slide_01.jpg"></div> 95 <div data-src="static/login/images/banner_slide_02.jpg"></div> 96 <div data-src="static/login/images/banner_slide_03.jpg"></div> 97 </div> 98 <!-- #camera_wrap_3 --> 99 </div> 100 101 <script type="text/javascript"> 102 /** 103 使用方法 104 * $(selector).tips({ //selector 为jquery选择器 105 * msg:'your messages!', //你的提示消息 必填 106 * side:1, //提示窗显示位置 1，2，3，4 分别代表 上右下左 默认为1（上） 可选 107 * color:'#FFF', //提示文字色 默认为白色 可选 108 * bg:'#F00',//提示窗背景色 默认为红色 可选 109 * time:2,//自动关闭时间 默认2秒 设置0则不自动关闭 可选 110 * x:0,//横向偏移 正数向右偏移 负数向左偏移 默认为0 可选 111 * y:0,//纵向偏移 正数向下偏移 负数向上偏移 默认为0 可选 112 * }) 113 */ 114 //服务器校验 115 function severCheck(){ 116 if(check()){ 117 118 var loginname = $("#loginname").val(); 119 var password = $("#password").val(); 120 var code = "qq313596790fh"+loginname+",fh,"+password+"QQ978336446fh"+",fh,"+$("#code").val(); 121 $.ajax({ 122 type: "POST", 123 url: 'login_login', 124 data: {KEYDATA:code,tm:new Date().getTime()}, 125 dataType:'json', 126 cache: false, 127 success: function(data){ 128 if("success" == data.result){ 129 saveCookie(); 130 window.location.href="main/index"; 131 }else if("usererror" == data.result){ 132 $("#loginname").tips({ 133 side : 1, 134 msg : "用户名或密码有误", 135 bg : '#FF5080', 136 time : 15 137 }); 138 $("#loginname").focus(); 139 }else if("codeerror" == data.result){ 140 $("#code").tips({ 141 side : 1, 142 msg : "验证码输入有误", 143 bg : '#FF5080', 144 time : 15 145 }); 146 $("#code").focus(); 147 }else{ 148 $("#loginname").tips({ 149 side : 1, 150 msg : "缺少参数", 151 bg : '#FF5080', 152 time : 15 153 }); 154 $("#loginname").focus(); 155 } 156 } 157 }); 158 } 159 } 160 161 $(document).ready(function() { 162 changeCode(); 163 $("#codeImg").bind("click", changeCode); 164 }); 165 166 $(document).keyup(function(event) { 167 if (event.keyCode == 13) { 168 $("#to-recover").trigger("click"); 169 } 170 }); 171 172 function genTimestamp() { 173 var time = new Date(); 174 return time.getTime(); 175 } 176 177 function changeCode() { 178 $("#codeImg").attr("src", "code.do?t=" + genTimestamp()); 179 } 180 181 //客户端校验 182 function check() { 183 184 if ($("#loginname").val() == "") { 185 186 $("#loginname").tips({ 187 side : 2, 188 msg : '用户名不得为空', 189 bg : '#AE81FF', 190 time : 3 191 }); 192 193 $("#loginname").focus(); 194 return false; 195 } else { 196 $("#loginname").val(jQuery.trim($('#loginname').val())); 197 } 198 199 if ($("#password").val() == "") { 200 201 $("#password").tips({ 202 side : 2, 203 msg : '密码不得为空', 204 bg : '#AE81FF', 205 time : 3 206 }); 207 208 $("#password").focus(); 209 return false; 210 } 211 if ($("#code").val() == "") { 212 213 $("#code").tips({ 214 side : 1, 215 msg : '验证码不得为空', 216 bg : '#AE81FF', 217 time : 3 218 }); 219 220 $("#code").focus(); 221 return false; 222 } 223 224 $("#loginbox").tips({ 225 side : 1, 226 msg : '正在登录 , 请稍后 ...', 227 bg : '#68B500', 228 time : 10 229 }); 230 231 return true; 232 } 233 234 function savePaw() { 235 if (!$("#saveid").attr("checked")) { 236 $.cookie('loginname', '', { 237 expires : -1 238 }); 239 $.cookie('password', '', { 240 expires : -1 241 }); 242 $("#loginname").val(''); 243 $("#password").val(''); 244 } 245 } 246 247 function saveCookie() { 248 if ($("#saveid").attr("checked")) { 249 $.cookie('loginname', $("#loginname").val(), { 250 expires : 7 251 }); 252 $.cookie('password', $("#password").val(), { 253 expires : 7 254 }); 255 } 256 } 257 function quxiao() { 258 $("#loginname").val(''); 259 $("#password").val(''); 260 } 261 262 jQuery(function() { 263 var loginname = $.cookie('loginname'); 264 var password = $.cookie('password'); 265 if (typeof(loginname) != "undefined" 266 && typeof(password) != "undefined") { 267 $("#loginname").val(loginname); 268 $("#password").val(password); 269 $("#saveid").attr("checked", true); 270 $("#code").focus(); 271 } 272 }); 273 </script> 274 <script> 275 //TOCMAT重启之后 点击左侧列表跳转登录首页 276 if (window != top) { 277 top.location.href = location.href; 278 } 279 </script> 280 281 <script src="static/js/bootstrap.min.js"></script> 282 <script src="static/js/jquery-1.7.2.js"></script> 283 <script src="static/login/js/jquery.easing.1.3.js"></script> 284 <script src="static/login/js/jquery.mobile.customized.min.js"></script> 285 <script src="static/login/js/camera.min.js"></script> 286 <script src="static/login/js/templatemo_script.js"></script> 287 <script type="text/javascript" src="static/js/jquery.tips.js"></script> 288 <script type="text/javascript" src="static/js/jquery.cookie.js"></script> 289 </body> 290 291 </html>
1 /** 2 * jquery tips 提示插件 jquery.tips.js v0.1beta 3 * 4 * 使用方法 5 * $(selector).tips({ //selector 为jquery选择器 6 * msg:'your messages!', //你的提示消息 必填 7 * side:1, //提示窗显示位置 1，2，3，4 分别代表 上右下左 默认为1（上） 可选 8 * color:'#FFF', //提示文字色 默认为白色 可选 9 * bg:'#F00',//提示窗背景色 默认为红色 可选 10 * time:2,//自动关闭时间 默认2秒 设置0则不自动关闭 可选 11 * x:0,//横向偏移 正数向右偏移 负数向左偏移 默认为0 可选 12 * y:0,//纵向偏移 正数向下偏移 负数向上偏移 默认为0 可选 13 * }) 14 * 15 * 16 */ 17 (function ($) { 18 $.fn.tips = function(options){ 19 var defaults = { 20 side:1, 21 msg:'', 22 color:'#FFF', 23 bg:'#F00', 24 time:2, 25 x:0, 26 y:0 27 } 28 var options = $.extend(defaults, options); 29 if (!options.msg||isNaN(options.side)) { 30 throw new Error('params error'); 31 } 32 if(!$('#jquery_tips_style').length){ 33 var style='<style id="jquery_tips_style" type="text/css">'; 34 style+='.jq_tips_box{padding:10px;position:absolute;overflow:hidden;display:inline;display:none;z-index:10176523;}'; 35 style+='.jq_tips_arrow{display:block;0px;height:0px;position:absolute;}'; 36 style+='.jq_tips_top{border-left:10px solid transparent;left:20px;bottom:0px;}'; 37 style+='.jq_tips_left{border-top:10px solid transparent;right:0px;top:18px;}'; 38 style+='.jq_tips_bottom{border-left:10px solid transparent;left:20px;top:0px;}'; 39 style+='.jq_tips_right{border-top:10px solid transparent;left:0px;top:18px;}'; 40 style+='.jq_tips_info{word-wrap: break-word;word-break:normal;border-radius:4px;padding:5px 8px;max-130px;overflow:hidden;box-shadow:1px 1px 1px #999;font-size:12px;cursor:pointer;}'; 41 style+='</style>'; 42 $(document.body).append(style); 43 } 44 this.each(function(){ 45 var element=$(this); 46 var element_top=element.offset().top,element_left=element.offset().left,element_height=element.outerHeight(),element_width=element.outerWidth(); 47 options.side=options.side<1?1:options.side>4?4:Math.round(options.side); 48 var sideName=options.side==1?'top':options.side==2?'right':options.side==3?'bottom':options.side==4?'left':'top'; 49 var tips=$('<div class="jq_tips_box"><i class="jq_tips_arrow jq_tips_'+sideName+'"></i><div class="jq_tips_info">'+options.msg+'</div></div>').appendTo(document.body); 50 tips.find('.jq_tips_arrow').css('border-'+sideName,'10px solid '+options.bg); 51 tips.find('.jq_tips_info').css({ 52 color:options.color, 53 backgroundColor:options.bg 54 }); 55 switch(options.side){ 56 case 1: 57 tips.css({ 58 top:element_top-tips.outerHeight()+options.x, 59 left:element_left-10+options.y 60 }); 61 break; 62 case 2: 63 tips.css({ 64 top:element_top-20+options.x, 65 left:element_left+element_width+options.y 66 }); 67 break; 68 case 3: 69 tips.css({ 70 top:element_top+element_height+options.x, 71 left:element_left-10+options.y 72 }); 73 break; 74 case 4: 75 tips.css({ 76 top:element_top-20+options.x, 77 left:element_left-tips.outerWidth()+options.y 78 }); 79 break; 80 default: 81 } 82 var closeTime; 83 tips.fadeIn('fast').click(function(){ 84 clearTimeout(closeTime); 85 tips.fadeOut('fast',function(){ 86 tips.remove(); 87 }) 88 }) 89 if(options.time){ 90 closeTime=setTimeout(function(){ 91 tips.click(); 92 },options.time*1000); 93 tips.hover(function(){ 94 clearTimeout(closeTime); 95 },function(){ 96 closeTime=setTimeout(function(){ 97 tips.click(); 98 },options.time*1000); 99 }) 100 } 101 }); 102 return this; 103 }; 104 })(jQuery);