zoukankan      html  css  js  c++  java
  • 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'});
  • 相关阅读:
    第二章 信息的表示和处理(下)
    第二章 信息的表示和处理
    IDEA中新建子模块
    手动实现一个可重入锁
    Lock接口的认识和使用
    JDK提供的原子类原理与使用
    深入理解volatile原理与使用
    模拟死锁
    模拟自旋锁
    grep 如何自动标注颜色
  • 原文地址:https://www.cnblogs.com/BugLiu/p/1563227.html
Copyright © 2011-2022 走看看