Jquery插件,右下角弹窗提醒,无视框架

来源:互联网 发布:特斯拉自动驾驶知乎 编辑:程序博客网 时间:2024/05/17 07:49

效果图:

HTML代码


    <script src="/Scripts/jquery-1.8.3.min.js" type="text/javascript"></script>    <script src="/Scripts/message/jquery.messager.js" type="text/javascript"></script>    <script type="text/javascript">        var alarm_timer;        var hl_timer        $(document).ready(function () {            alarm_timer = setInterval("sendBedAlarm()", 10 * 60 * 1000); //床板报警,3分钟检查一次            hl_timer = setInterval("sendHLJLD()", 2 * 60 * 60 * 1000); //护理记录单打印提醒,2个小时检查一次        })        function sendBedAlarm() {            showMsg("/ZHBQ_Bedplate/GetAlarmInfo.ashx", 405, 220, '<font color="red">报警提醒</font>', '/ZHBQ_Bedplate/baojin.wav');        }        function sendHLJLD() {            showMsg("/WebService/HLJLRemindPrint.ashx", 405, 220, '<font color="red">打印提醒</font>');        }    </script></head><bgsound id="snd" src="" autostart="true" loop="infinite" />

js代码,jquery.messager.js文件

(function () {    var ua = navigator.userAgent.toLowerCase();    var is = (ua.match(/\b(chrome|opera|safari|msie|firefox)\b/) || ['', 'mozilla'])[1];    var r = '(?:' + is + '|version)[\\/: ]([\\d.]+)';    var v = (ua.match(new RegExp(r)) || [])[1];    jQuery.browser.is = is;    jQuery.browser.ver = v;    jQuery.browser[is] = true;})();//右上角关闭图片相对根目录路径var imgSrc = "/Scripts/message/flora-close.png";(function (jQuery) {    /*    *     * jQuery Plugin - Messager    *     * Author: corrie Mail: corrie@sina.com Homepage: www.corrie.net.cn    *     * Copyright (c) 2008 corrie.net.cn    *     * @license http://www.gnu.org/licenses/gpl.html [GNU General Public    * License]    *     *     *     * $Date: 2008-12-26    *     * $Vesion: 1.5 @ how to use and example: Please Open index.html    *     */    this.version = '@1.5';    this.layer = {        'width': 200,        'height': 100    };    this.title = '信息提示';    this.time = 4000;    this.anims = {        'type': 'slide',        'speed': 600    };    this.timer1 = null;    this.inits = function (title, text) {        if ($("#message").is("div")) {            return;        }        $(document.body).prepend('<div id="message" style="border:#b9c9ef 1px solid;z-index:100;width:' + this.layer.width + 'px;height:' + this.layer.height + 'px;position:absolute; display:none;background:#cfdef4; bottom:0; right:0; overflow:hidden;"><div style="border:1px solid #fff;border-bottom:none;width:100%;height:25px;font-size:12px;overflow:hidden;color:#1f336b;"><span id="message_close" style="float:right;padding:5px 0 5px 0;width:16px;line-height:auto;color:red;font-size:12px;font-weight:bold;text-align:center;cursor:pointer;overflow:hidden;"><img src="' + imgSrc + '" border="0" /></span><div style="padding:5px 0 5px 5px;width:100px;font-weight:bold;font-size:14px;line-height:18px;text-align:left;overflow:hidden;">' + title + '</div><div style="clear:both;"></div></div> <div style="padding-bottom:5px;border:1px solid #fff;border-top:none;width:100%;height:auto;font-size:12px;"><div id="message_content" style="margin:0 5px 0 5px;border:#b9c9ef 1px solid;padding:10px 0 10px 5px;font-weight:bold;font-size:14px;width:' + (this.layer.width - 17) + 'px;height:' + (this.layer.height - 50) + 'px;color:#1f336b;text-align:left;overflow:hidden;">' + text + '</div></div></div>');        $("#message_close").click(function () {            setTimeout('this.close()', 1);            //停止播放声音             $("#snd").attr("src", '');        });        $("#message").hover(function () {            clearTimeout(timer1);            timer1 = null;        }, function () {            if (time > 0)                timer1 = setTimeout('this.close()', time);        });        $(window).scroll(function () {            var bottomHeight = "-" + document.documentElement.scrollTop;            $("#message").css("bottom", bottomHeight + "px");        });    };    this.show = function (title, text, time) {        if ($("#message").is("div")) {            return;        }        if (title == 0 || !title)            title = this.title;        this.inits(title, text);        if (time >= 0)            this.time = time;        switch (this.anims.type) {            case 'slide':                $("#message").slideDown(this.anims.speed);                break;            case 'fade':                $("#message").fadeIn(this.anims.speed);                break;            case 'show':                $("#message").show(this.anims.speed);                break;            default:                $("#message").slideDown(this.anims.speed);                break;        }        var bottomHeight = "-" + document.documentElement.scrollTop;        $("#message").css("bottom", bottomHeight + "px");        if ($.browser.is == 'chrome') {            setTimeout(function () {                $("#message").remove();                this.inits(title, text);                $("#message").css("display", "block");            }, this.anims.speed - (this.anims.speed / 5));        }        this.rmmessage(this.time);    };    this.lays = function (width, height) {        if ($("#message").is("div")) {            return;        }        if (width != 0 && width)            this.layer.width = width;        if (height != 0 && height)            this.layer.height = height;    }    this.anim = function (type, speed) {        if ($("#message").is("div")) {            return;        }        if (type != 0 && type)            this.anims.type = type;        if (speed != 0 && speed) {            switch (speed) {                case 'slow':                    ;                    break;                case 'fast':                    this.anims.speed = 200;                    break;                case 'normal':                    this.anims.speed = 400;                    break;                default:                    this.anims.speed = speed;            }        }    }    this.rmmessage = function (time) {        if (time > 0) {            timer1 = setTimeout('this.close()', time);        }    };    this.close = function () {        switch (this.anims.type) {            case 'slide':                $("#message").slideUp(this.anims.speed);                break;            case 'fade':                $("#message").fadeOut(this.anims.speed);                break;            case 'show':                $("#message").hide(this.anims.speed);                break;            default:                $("#message").slideUp(this.anims.speed);                break;        }        ;        setTimeout('$("#message").remove();', this.anims.speed);        this.original();    }    this.original = function () {        this.layer = {            'width': 200,            'height': 100        };        this.title = '信息提示';        this.time = 4000;        this.anims = {            'type': 'slide',            'speed': 600        };    };    jQuery.messager = this;    return jQuery;})(jQuery);/*播放声音src声音路径  /ZHBQ_Bedplate/baojin.wav网页上放置 <bgsound id="snd" src="" autostart="true" loop="infinite" />loop=infinite 是否自动反复播放;loop=2 表示重复两次,infinite 表示重复多次。*/function playSound(src) {    var _s = document.getElementById('snd');    if (src != '' && typeof src != undefined) {        _s.src = src;    }}/*在右下角弹出消息消息url:一般处理程序地址,返回消息框内容,支持htmlwidth:消息框宽度height:消息框高度title:消息框标题,支持htmlsoundSrc:播放声音路径,不要此参数或者是'',则不播放声音*/function showMsg(url, width, height, title, soundSrc) {    var time = new Date().getTime();    $.post(url + "?" + time, { type: 'refresh' }, function (msg) {        if (msg.length > 0) {            playSound(soundSrc);            $.messager.lays(width, height);            $.messager.show(title, msg, 0);            $("#message_content").html(msg);        } else {            $("#message").remove();            playSound('');        }    });} 

推荐其它提醒插件演示地址: http://www.jqueryrain.com/?rv0ica8W

0 0