jquery提示信息 tips

  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);