messager.js
(function (jQuery) {
var window;
var obj = new Object();
obj.version = ‘@1.0‘;
obj.title = ‘信息提示‘;
obj.time = 4000;
obj.anims = { ‘type‘: ‘slide‘, ‘speed‘: 600 };
obj.inits = function (title, text) {
window = $(‘<div class="messager"><div class="messager-header"><div class="messager-close">×</div><div class="meaaager-title">‘+title+‘</div></div> <div class="messager-bottom"><div class="messager_content">‘+text+‘</div></div></div>‘)
.appendTo(‘body‘)
.hide();
window.find(‘div.messager-close‘).click(function () {
this.parentElement.parentElement.remove();
});
};
obj.show = function (title, text, time) {
if (title == 0 || !title) title = obj.title;
obj.inits(title, text);
if (time >= 0) obj.time = time;
switch (this.anims.type) {
case ‘slide‘: window.slideDown(obj.anims.speed); break;
case ‘fade‘: window.fadeIn(obj.anims.speed); break;
case ‘show‘: window.show(obj.anims.speed); break;
default: window.slideDown(obj.anims.speed); break;
}
};
obj.anim = function (type, speed) {
if (type != 0 && type) obj.anims.type = type;
if (speed != 0 && speed) {
switch (speed) {
case ‘slow‘:; break;
case ‘fast‘: obj.anims.speed = 200; break;
case ‘normal‘: obj.anims.speed = 400; break;
default:
obj.anims.speed = speed;
}
}
}
jQuery.messager = obj;
return jQuery;
})(jQuery);
messager.css
.messager
{
position: absolute;
background: #E0ECFF;
border: 1px solid #95B8E7;
z-index: 10000;
overflow: hidden;
bottom: 0px;
right: 0px;
width: 200px;
height: 100px;
}
.messager-header
{
border:1px solid #fff;
border-bottom:none;
width:100%;
font-size:12px;
overflow:hidden;
height:25px;
color:#1f336b;
}
.messager-close
{
float:right;
padding:5px 0 5px 0;
width:16px;
color:red;
font-size:12px;
font-weight:bold;
text-align:center;
cursor:pointer;
overflow:hidden;
}
.meaaager-title
{
padding:5px 0 5px 5px;
width:100px;
text-align:left;
overflow:hidden;
}
.messager-bottom
{
padding-bottom:5px;
border:1px solid #fff;
border-top:none;
width:100%;
height:auto;
font-size:12px;
}
.messager_content
{
margin:0 5px 0 5px;
border:#b9c9ef 1px solid;
padding:10px 0 10px 5px;
font-size:12px;
width:183px;
height:50px;
color:#1f336b;
text-align:left;
overflow:hidden;
}
page
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="AlarmData.WebForm1" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<link href="messager.css" rel="stylesheet" />
<script type="text/javascript" src="jquery-1.7.1.js"></script>
<script src="messager.js"></script>
<script type="text/javascript">
$(function () {
$("#showMessagerNoClose").click(function () {
$.messager.show(‘不会关闭的消息‘, ‘要自己点关闭的X才可以哦！‘, 0);
});
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<input type="button" id="showMessagerNoClose" value="不自动关闭消息" />
</div>
</form>
</body>
</html>
参考地址：http://www.cnblogs.com/linyijia/p/3467109.html
时间： 2024-11-10 11:02:47