文档章节

jQuery实现Session过期提示

lgscofield
 lgscofield
发布于 2015/06/26 13:53
字数 1384
阅读 177
收藏 1
点赞 0
评论 0

起初项目中session过期的时候需要做一个提示框(并不进行过期跳转到指定页面,在点击确定的时候才会执行跳转),告诉用户session已经过期了,具体实现在本文的最后,一下是common-popup.js,和common-popup.css的代码:

 

/**
 * 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 class="appriseOverlay" id="aOverlay"></div>');
    $('.appriseOverlay').css('height', aHeight).css('width', aWidth).fadeIn(100);
    $('body').append('<div class="appriseOuter"></div>');
    $('.appriseOuter').append('<div class="appriseTitle"></div>');
    $('.appriseTitle').append(title);
    $('.appriseOuter').append('<div class="appriseInner"></div>');
    $('.appriseInner').append(string);
    $('.appriseOuter').css("left", ($(window).width() - $('.appriseOuter').width()) / 2 + $(window).scrollLeft() + "px");
    
    if (args) {
        if (args['animate']) {
            var aniSpeed = args['animate'];
            if (isNaN(aniSpeed)) {
                aniSpeed = 400;
            }
            $('.appriseOuter').css('top', '-200px').show().animate({
                top: "150px"
            }, aniSpeed);
        }
        else {
            $('.appriseOuter').css('top', '150px').fadeIn(200);
        }
    }
    else {
        $('.appriseOuter').css('top', '150px').fadeIn(200);
    }
    
    if (args) {
        if (args['input']) {
            if (typeof(args['input']) == 'string') {
                $('.appriseInner').append('<div class="aInput"><input type="text" class="aTextbox" t="aTextbox" value="' + args['input'] + '" /></div>');
            }
            else {
                $('.appriseInner').append('<div class="aInput"><input type="text" class="aTextbox" t="aTextbox" /></div>');
            }
            $('.aTextbox').focus();
        }
        if (args['textarea']) {
            if (typeof(args['textarea']) == 'string') {
                $('.appriseInner').append('<div class="aTextarea"><textarea type="text" class="aTextArea" t="aTextArea" value="' + args['textarea'] + '" /></div>');
            }
            else {
                $('.appriseInner').append('<div class="aTextarea"><textarea type="text" class="aTextArea" t="aTextArea" /></div>');
            }
            $('.aTextArea').focus();
        }
    }
    
    $('.appriseInner').append('<div class="aButtons"></div>');
    if (args) {
        if (args['confirm'] || args['input']) {
            $('.aButtons').append('<button value="ok">' + args['textOk'] + '</button>');
            $('.aButtons').append('<button value="cancel">' + args['textCancel'] + '</button>');
        }
        else if (args['verify']) {
            $('.aButtons').append('<button value="ok">' + args['textYes'] + '</button>');
            $('.aButtons').append('<button value="cancel">' + args['textNo'] + '</button>');
        }
        else {
            $('.aButtons').append('<button value="ok">' + args['textOk'] + '</button>');
        }
    }
    else {
        $('.aButtons').append('<button value="ok">Ok</button>');
    }
    
    $(document).keydown(function(e){
        if ($('.appriseOverlay').is(':visible')) {
			
            // whitespace forbidden.
            if (!(args['textarea'] || args['input'])) {
            	if (e.keyCode == 13) {
                    $('.aButtons > button[value="ok"]').click();
                }
                if (e.keyCode == 27) {
                    $('.aButtons > button[value="cancel"]').click();
                }
                if (event.keyCode == 32) {
                    event.returnValue = false;
                    return false;
                }
            }
        }
    });
    
    var aText = $('.aTextbox').val();
    if (!aText) {
        aText = false;
    }
    $('.aTextbox').keyup(function(){
        aText = $(this).val();
    });
    
    var areaText = $('.aTextArea').val();
    if (!areaText) {
        areaText = false;
    }
    $('.aTextArea').keyup(function(){
        areaText = $(this).val();
        $('.error').hide();
    });
    
    $('.aButtons > button').click(function(){
    	if (args['textarea'] && !areaText && $(this).attr("value") != 'cancel') {
    		if($('div').hasClass('error')) {
                return;
    		}
    		$('.aButtons').before('<div class="error"></div>');
    		$('.error').append('<p class="perror">Please fill out the content effectively!</p>');
    	}
    	else {
    		$('.appriseOverlay').remove();
	        $('.appriseOuter').remove();
    	}
        if (callback) {
            var wButton = $(this).attr("value");
            if (wButton == 'ok') {
                if (args) {
                    if (args['input']) {
                        callback(aText);
                    }
                    else if (args['textarea']) {
                    	callback(areaText);
                    }
                    else {
                        callback(true);
                    }
                }
                else {
                    callback(true);
                }
            }
            else if (wButton == 'cancel') {
                callback(false);
            }
        }
    });
}

/**
 * Browser key event
 * @param {Object} evt
 */
function prDefault(evt){
    if ($.browser.msie) {
        evt.keyCode = 0;
        evt.returnValue = false;
    }
    else {
        evt.preventDefault();
    }
}

 

/**
 * 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操作时重置计时函数而已.简单吧...

本文转载自:http://lgscofield.iteye.com/blog/1893396

共有 人打赏支持
lgscofield

lgscofield

粉丝 20
博文 140
码字总数 63036
作品 0
南京
架构师
PHP判断一个请求是Ajax请求还是普通请求

Javascript中大多数的框架如 jquery(jquery ui、jquery easyui)、Mootools 等,在发出 Ajax 请求时,都会发送额外的 HTTPXREQUESTED_WITH 头部信息,因此每当发送一个ajax请求你就可以在服务...

Junn
2013/08/05
0
1
2011年12月最新JQuery插件汇总

jQuery的工具提示插件 Tipped jQuery表格插件 colResizable jQuery虚拟键盘插件 jQuery keyboard Minimit Gallery 用于显示相册、幻灯片、卷帘等效果 jQuery 幻灯效果显示插件 Diapo jQuery...

晨曦之光
2012/02/24
0
0
Ajax Session Timeout处理

对于session过期跳转的问题,很简单,就是一个过滤器,然后判断session为空?跳转:继续。但是对于ajax的请求,需要做特殊处理,见下面代码中的 // 此处考虑ajax操作session过期的操作,如果...

lgscofield
2014/07/01
0
1
session过期后自动跳转到登陆页

项目需要做一个自动登出的功能,查询了网上的资料,一开始准备用session监听做,按照下面方式配置监听器 1.在项目的web.xml文件中添加如下代码: <!--添加Session监听器--><listener><liste...

零度的魚
2014/08/04
0
1
js-jQuery对象与dom对象相互转换

核心提示:jquery选择器得到的jquery对象和标准的 javascript中的document.getElementById()取得的dom对象是两种不同的对象类型,一般情况下,如S(’#id’)得到的是jquery对象,它不能使用j...

Carl_
2014/08/26
0
0
非常实用的12 个 jQuery 代码片段

jQuery是一个非常流行而且实用的JavaScript前端框架,本文并不是介绍jQuery的特效动画,而是分享一些平时积累的12个jQuery实用代码片段,希望对你有所帮助。 1. 导航菜单背景切换效果 在项目...

_小狼狗
2015/11/09
0
0
Jquery Tools——不可错过的Jquery UI库

发表于: Jquery, 有用的示例 | 作者: IIduce Jquery Tools是一组基于Jquery构建的用户界面常用组件的集合。通过使用Jquery Tools,网站前端开发无疑会变得更加高效。值得注意的是,Jquery To...

晨曦之光
2012/03/09
0
0
SeaJS中jQuery插件模块化及其调用方式

jQuery插件本质上是将命名空间挂在全局的jQuery或jQuery.fn上而非使用define定义的模块。 JQuery的这种扩展机制同模块化要求模块的独立性,以及模块互相隔离有点冲突。 jQuery插件数目众多,...

brivio
2014/03/15
0
0
session过期跳转登录页面

项目需要做一个自动登出的功能,查询了网上的资料,一开始准备用session监听做,按照下面方式配置监听器 1.在项目的web.xml文件中添加如下代码: ? 2.编写java类。 ? 配置完成后等session失效...

mrliuze
2014/12/17
0
0
给Jquery添加alert,prompt方法,类似系统的Alert,Prompt,可以响应键...

给Jquery添加alert,prompt方法,类似系统的Alert,Prompt,可以响应键盘,支持拖动 博客分类: Javascript CSS jQuery插件系列 重置Alert模拟AlertJquery Alert插件开发Jquery插件开发 我们在...

wolf_su
2013/07/03
0
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

istio源码分析之pilot-discovery模块分析

本文分析的istio代码版本为0.8.0,commit为0cd8d67,commit时间为2018年6月18日。 本文为Service Mesh深度学习系列之一: Service Mesh深度学习系列part1—istio源码分析之pilot-agent模块分...

xiaomin0322
10分钟前
0
0
数据库基本操作:增删改查及联表操作

所用软件:SQL Server Management Studio 首先第一步,建立一个表。在这里命名为T1。并在里面填入几条数据。如图: T1 一.查询 查询所有:select * from T1; 按条件查询:select * from T1 ...

小_橙_子
14分钟前
0
0
Crontab作业时间设置

今天,遇到这么一个题目,周一到周五的9:00-16:59之间,每隔两分钟将某个命令运行一次。给的答案是: */2 9-16 * * 1-5 /usr/sbin/somecommand dosomething 乍一看,这个答案不对,应...

大别阿郎
19分钟前
0
0
ES17-JAVA API文档管理

1.保存文档 可以通过json工具把java对象转换成json字符串进行保存,也可以通过内置的帮助类直接构建json格式 /** * 获取客户端 * * @return */public static TransportClie...

贾峰uk
20分钟前
0
0
Python代码规范和命名规范

前言 Python 学习之旅,先来看看 Python 的代码规范,让自己先有个意识,而且在往后的学习中慢慢养成习惯 一、简明概述 1、编码 如无特殊情况, 文件一律使用 UTF-8 编码 如无特殊情况, 文件头...

blackfoxya
22分钟前
0
0
联动滑动之一:NestScrollChild和NestedScrollingParent

NestScrollChild和NestedScrollingParent 吐槽一下开源中国竟然标题字数有限制 由于项目中使用了CoordinateLayout来解决联动以及实现炫酷的UI效果,那么必须就要研究一波源码了,毕竟知其然知...

JerryLin123
40分钟前
1
0
cloudera spark2.2 读写hbase

cloudera spark2.2 读写hbase 例子 host = 'bigdata-03,bigdata-05,bigdata-04'conf = { "hbase.zookeeper.quorum": host, "hbase.mapreduce.inputtable": "student1"}k......

osenlin
44分钟前
0
0
数据库规范化

转载自 一个小时学会MySQL数据库 地址:http://www.cnblogs.com/best/p/6517755.html 截取其中 1.4 部分 用于自己学习使用 感谢作者:张果 1.4、数据库规范化 经过一系列的步骤,我们现在终于...

十万猛虎下画山
45分钟前
0
0
ios逆向之工具篇

Reveal:查看任意app的UI结构 注:1.不越狱的手机,可以用Reveal来查看自己app的UI结构,不能查看其它app的结构。 2.越狱手机上可以查看任意app的UI结构。 IDA:反编译工具 从App Store下载的...

HeroHY
46分钟前
0
0
EOS区块链平台智能合约示例HelloWorld

我们将介绍一个使用EOS智能合约构建hello World的例子。 一般环境设置通过上一篇文章已经说明,这方面的问题大家可以看本博客上一篇文章,本文引用了官方EOS在Git上的示例。 运行nodeos 要通...

笔阁
48分钟前
1
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部