jquery之右下角消息提示框

浏览数：31 / 时间：2015年06月09日

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

郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。

jquery之右下角消息提示框