老项目page跳转增加loading效果-jquery impromptu

    上次是自己写的js来实现loading页面，这次很简单，直接使用jquery的一个插件来完成：

    可以从http://trentrichardson.com/Impromptu/index.php下载jquery-impromptu.min.js

    使用上，直接这样：

var msg = '<img src="images/loading_animation.gif"/><div align="center">Loading...</div>'

$.prompt(msg,{buttons:{}});

效果如下：

我这里用的是jquery-impromptu网上demo自带的css，如下：

/*
------------------------------
	Impromptu's
------------------------------
*/
.jqifade{
	position: absolute; 
	background-color: #aaaaaa; 
}
div.jqi{ 
	width: 400px; 
	font-family: Verdana, Geneva, Arial, Helvetica, sans-serif; 
	position: absolute; 
	background-color: #ffffff; 
	font-size: 11px; 
	text-align: left; 
	border: solid 1px #eeeeee;
	/*
	border-radius: 10px;
	-moz-border-radius: 10px;
	-webkit-border-radius: 10px;
	*/
	padding: 7px;
}
div.jqi .jqicontainer{ 
	font-weight: bold; 
}
div.jqi .jqiclose{ 
	position: absolute;
	top: 4px; right: -2px; 
	width: 18px; 
	cursor: default; 
	color: #bbbbbb; 
	font-weight: bold; 
}
div.jqi .jqimessage{ 
	padding: 10px; 
	line-height: 20px; 
	color: #444444; 
}
div.jqi .jqibuttons{ 
	text-align: right; 
	padding: 5px 0 5px 0; 
	border: solid 1px #eeeeee; 
	background-color: #f4f4f4;
}
div.jqi button{ 
	padding: 3px 10px; 
	margin: 0 10px; 
	background-color: #2F6073; 
	border: solid 1px #f4f4f4; 
	color: #ffffff; 
	font-weight: bold; 
	font-size: 12px; 
}
div.jqi button:hover{ 
	background-color: #728A8C;
}
div.jqi button.jqidefaultbutton{ 
	/*background-color: #8DC05B;*/
	/*background-color: #BF5E26;*/
	background-color: #BACCE4;
}
.jqiwarning .jqi .jqibuttons{ 
	background-color: #BF5E26;
}

转载于:https://www.cnblogs.com/lettoo/archive/2010/09/08/1821605.html