• Javascript简单消息(需要jQuery)


    今天新写的,喜欢就拿去用(需要jQuery的支持哟)!
    //●简单消息 ========================
    //
    msg:消息内容
    //
    ct:显示时间,0为不自动消失,默认2000毫秒
    //
    mo:模态方式:true/false
    //
    cls:外部样式表
    //
    普通参数:SimpleMsg(msg,ct,mo,cls)
    //
    对象参数:SimpleMsg({msg:,ct:,mo:,cls:})
    //
    关闭命令:SimpleMsg(':close')
    function SimpleMsg(options){
        
    var options,msg,ct,cls,mo;
        
    if(typeof(options)=='string'){
            msg
    =options;options={};
            options.msg
    =msg;options.ct=arguments[1];options.mo=arguments[2];options.cls=arguments[3];
        };
        msg
    =options.msg?options.msg:'';
        ct
    =options.ct>=0?options.ct:2000;
        cls
    =options.cls?options.cls:'';
        mo
    =options.mo?options.mo:false;

        
    //模态背景
        if(!document.getElementById('SimpleMsgBg')){
            XMsgBg
    =$('<div id="SimpleMsgBg" style="top:0px;left:0px;100%;height:'+$(document).height()+'px;position:absolute;z-index:99998;display:none;background:#000000;filter:Alpha(Opacity=60);opacity:0.6;"></div>');
            $(XMsgBg).appendTo($(
    'body'))
        }
        
    if(mo){$('#SimpleMsgBg').show();}

        
    //信息条
        if(!document.getElementById('SimpleMsg')){
            
    var XMsg=$('<div id="SimpleMsg" Class="'+cls+'"></div>');
            
    //系统默认样式
            if(cls=='')$(XMsg).css({border:'1px solid #000',padding:'10px',position:'absolute',zIndex:'99999',fontSize:'14px',background:'#FFFFE1',display:'none'});
            $(XMsg).appendTo($(
    'body'))
        }
        
        
    //Msg命令
        if(msg.toLowerCase()==':close'){ct=1}
        
    else{$('#SimpleMsg').html(msg);}

        
    var docel=document.documentElement;
        
    var top=(docel.scrollTop+docel.clientHeight/2-$('#SimpleMsg').height()/2);
        
    var left=(docel.scrollLeft+docel.clientWidth/2-$('#SimpleMsg').width()/2);
        $(
    '#SimpleMsg').css({top:top,left:left});
        
        
    //信息关闭控制
        $('#SimpleMsg').fadeIn('fast',function(){
            
    if(ct!=0){
                setTimeout(
    "$('#SimpleMsg').fadeOut('slow')",ct);
                setTimeout(
    "$('#SimpleMsgBg').fadeOut('slow')",ct);
            }
        });
    }


    使用方法:
    //显示消息,默认2秒种后自动关闭,非模态,自带样式
    SimpleMsg('简单消息,哈哈哈'); 

    //显示消息,4秒种后自动关闭,非模态,自带样式
    SimpleMsg('简单消息,哈哈哈',4000);

    //显示消息,4秒种后自动关闭,模态,自带样式
    SimpleMsg('简单消息,哈哈哈',4000,true);

    //显示消息,4秒种后自动关闭,非模态,指定样式Black
    SimpleMsg('简单消息,哈哈哈',4000,false,"Black");

    //显示消息,不关闭,模态,指定样式Black
    SimpleMsg('简单消息,哈哈哈',0,true,"Black");

    //立即关闭消息
    SimpleMsg(':close');

    //也可使用传配置对象的方式:4秒种后自动关闭,模态,指定样式Black
    SimpleMsg({msg:'简单消息,哈哈哈',ct:4000,mo:true,cls:'Black'});
  • 相关阅读:
    pdf.js使用
    当前时间距离下一个分钟值以0或者5结尾的时间点(单位:毫秒)小于1分钟时,返回下下个以0或5结尾的时间点
    1
    Could not get JDBC Connection; nested exception is java.sql.SQLException: Cannot get a connection, pool error Pool exhausted 异常原因排查
    gcp导出mysql慢日志写入数据库分析
    redis慢日志结构化
    谷歌云监控告警
    google-cloud的sql-rds导出my.cnf
    慢sql 实时钉钉告警
    docker跨网段搭建gp测试环境
  • 原文地址:https://www.cnblogs.com/BugLiu/p/1563227.html
Copyright © 2020-2023  润新知