jQuery实现Session过期提示
/** * This is common popup/dialog/tips plugin of jquery. * * @author lgscofield * * 2013-4-15 *//** * private function, but you also can invoking it. * * @param {Object} title * @param {Object} string * @param {Object} args * @param {Object} callback * @memberOf {TypeName} */function apprise(title, string, args, callback){ var default_args = { 'confirm': false, // Ok and Cancel buttons 'verify': false, // Yes and No buttons 'input': false, // Text input (can be true or string for default text) 'textarea': false,// Text Area (can be true or string for default text) 'animate': false, // Groovy animation (can true or number, default is 400) 'textOk': 'Ok', // Ok button default text 'textCancel': 'Cancel', // Cancel button default text 'textYes': 'Yes', // Yes button default text 'textNo': 'No' // No button default text }; if (args) { for (var index in default_args) { if (typeof args[index] == "undefined") args[index] = default_args[index]; } } var aHeight = $(document).height(); var aWidth = $(document).width(); $('body').append('<div id="aOverlay"></div>'); $('.appriseOverlay').css('height', aHeight).css('width', aWidth).fadeIn(100); $('body').append('<div t="aTextbox" value="' + args['input'] + '" /></div>'); } else { $('.appriseInner').append('<div t="aTextbox" /></div>'); } $('.aTextbox').focus(); } if (args['textarea']) { if (typeof(args['textarea']) == 'string') { $('.appriseInner').append('<div t="aTextArea" value="' + args['textarea'] + '" /></div>'); } else { $('.appriseInner').append('<div t="aTextArea" /></div>'); } $('.aTextArea').focus(); } } $('.appriseInner').append('<div name="code">/** * This is common popup/dialog/tips plugin of jquery. * * @author lgscofield * * 2013-4-15 */.appriseOverlay { /**position:fixed;top:0;left:0;background:rgba(0, 0, 0, 0.3);display:none;background: #000;**/position: fixed;top: 0;left: 0;width: 100%;height: 100%;display: none;/**filter: alpha(opacity=70);opacity: 0.7;-moz-opacity:0.7;**//**background:rgba(0, 0, 0, 0.3); background:#000\0; filter:alpha(opacity=30);**//*background: #aaaaaa url(css/flick/images/ui-bg_flat_0_aaaaaa_40x100.png)50% 50% repeat-x;*/background-color: #000;filter: Alpha(Opacity = 30) !important /*{opacityFilterOverlay}*/;opacity: 0.3 /*{opacityOverlay}*/;}.appriseOuter {background: #eee;border: 1px solid #fff;box-shadow: 0px 3px 7px #333;-moz-box-shadow: 0px 3px 7px #333;-webkit-box-shadow: 0px 3px 7px #333;-moz-border-radius: 4px;-webkit-border-radius: 4px;border-radius: 4px;-khtml-border-radius: 4px;position: absolute;z-index: 99999999;min-width: 200px;min-height: 50px;max-width: 75%;position: fixed;display: none;}.appriseTitle {height: 20px;color: #333;font-weight: bolder;vertical-align: middle !important;text-shadow: 0px 1px 0px #fff;border: 1px solid #ddd;padding: 5px;}.appriseInner {padding: 20px;color: #333;background-color: #fff !important;text-shadow: 0px 1px 0px #fff;}.appriseInner button {border: 1px solid #bbb;-moz-border-radius: 3px;-webkit-border-radius: 3px;border-radius: 3px;-khtml-border-radius: 3px;background: -moz-linear-gradient(100% 100% 90deg, #eee, #d5d5d5);background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#eee),to(#d5d5d5) );background: -webkit-linear-gradient(#eee, #d5d5d5);background: -o-linear-gradient(#eee, #d5d5d5);color: #232d3d;font-size: 12px;font-weight: bold;padding: 4px 10px;margin: 0 3px;text-shadow: 0px 1px 0px #fff;cursor: pointer;box-shadow: 0px 1px 2px #ccc;-moz-box-shadow: 0px 1px 2px #ccc;-webkit-box-shadow: 0px 1px 2px #ccc;}.appriseInner button:hover {color: #d85054;}.aButtons,.aInput {margin: 20px 10px 0px 10px;text-align: center;}.aTextarea {margin: 20px 0px 0px 0px;text-align: center;}.aTextbox {border: 1px solid #aaa;-moz-border-radius: 4px;-webkit-border-radius: 4px;border-radius: 4px;-khtml-border-radius: 4px;box-shadow: 0px 1px 0px #fff;-moz-box-shadow: 0px 1px 0px #fff;-webkit-box-shadow: 0px 1px 0px #fff;width: 180px;font-size: 12px;font-weight: bold;padding: 5px 10px;}.aTextArea {border: 1px solid #aaa;-moz-border-radius: 4px;-webkit-border-radius: 4px;border-radius: 4px;-khtml-border-radius: 4px;box-shadow: 0px 1px 0px #fff;-moz-box-shadow: 0px 1px 0px #fff;-webkit-box-shadow: 0px 1px 0px #fff;width: 250px;max-width: 250px;height: 78px;max-height: 78px;font-size: 12px;font-weight: bold;padding: 5px 10px;font-size: 12px;}.error{border: 1px solid #D5D5D5;/**background-color: #DDDDDD;**/-moz-border-radius: 4px;-webkit-border-radius: 4px;border-radius: 4px;-khtml-border-radius: 4px;box-shadow: 0px 1px 0px #fff;-moz-box-shadow: 0px 1px 0px #fff;-webkit-box-shadow: 0px 1px 0px #fff;background-color: #eedc94;background-repeat: repeat-x;background-image: -khtml-gradient(linear, left top, left bottom, from(#fceec1), to(#eedc94));background-image: -moz-linear-gradient(top, #fceec1, #eedc94);background-image: -ms-linear-gradient(top, #fceec1, #eedc94);background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #fceec1), color-stop(100%, #eedc94));background-image: -webkit-linear-gradient(top, #fceec1, #eedc94);background-image: -o-linear-gradient(top, #fceec1, #eedc94);background-image: linear-gradient(top, #fceec1, #eedc94);filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fceec1', endColorstr='#eedc94', GradientType=0);text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);border-color: #eedc94 #eedc94 #e4c652;border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);border-width: 1px;border-style: solid;-webkit-border-radius: 4px;-moz-border-radius: 4px;border-radius: 4px;}.perror{margin: 1px 10px;}
?最后,在做一系列操作前判断session是否过期,其实就是使用了setTimeout,一下是具体实现:
?
var $$ = function(func){ if (document.addEventListener) { window.addEventListener("load", func, false); } else if (document.attachEvent) { window.attachEvent("onload", func); } }; $$(function(){ var inactiveTimes = '<%=session.getMaxInactiveInterval()%>'; if(inactiveTimes != null && inactiveTimes != '') { expireTime = inactiveTimes * 1000; } else { expireTime = 600 * 1000; } window.setTimeout(sessionTips, expireTime); $("input[type='button'], a").ajaxStart(function () { if(window.console && console.log) { console.log('ajax start', expireTime); } clearTimeout(sessionTips); }); $("input[type='button'], ad").ajaxStop(function () { if(window.console && console.log) { console.log('ajax end', expireTime); } window.setTimeout(sessionTips, expireTime); }); });function sessionTips() { if(window.console && console.log) { console.log('session expired.'); } $('a, img, input, textarea, #xpMenuCont tr td, button, th').attr('onclick', '').unbind('click').bind('click', function(){ popupWin(expireMes); return false; }); $('select').mouseover(function(){$(this).find('option').attr('disabled', 'disabled').hide();}).click(function(){popupWin(expireMes);return false;}); }/** * popup the dialog/window * @param {Object} sess */ function popupWin(sess){ apprise('Warm prompt!', sess, { 'confirm': true, 'textOk': 'Yes', 'textCancle': 'No' }, function(to){ if (to) { // parent.location.reload(); window.location.reload(); } }); }PS: 上述代码中popupWin(sess)是调用common-popup.js插件中的apprise函数.具体的API会在以后完善之后整理出来.
调用的时候只要在<script>...</script>标记中插入上面那段代码即可,这就是所谓的主动式session过期提示.上面这段代码中使用了ajaxStart和ajaxStop函数,其主要目的是在做ajax操作时重置计时函数而已.简单吧...