jquery消息提示框

用于ajax类型提示的，只显示一个。

只是给个思路而已，代码有很多不足。

4个参数，有2个是可选

调用

$.mTip('类型','显示内容',显示时间,回调函数)

类型：

0 为加载

1 为成功

2 为失败

3 为警告

显示时间：

为整数型 

大于0，

小于0或非整数一直存在，不消失！

效果图：

渣渣效果一份：

<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">
    <title>提示框</title>
    <style type="text/css">
        .msgbox_layer, .msgbox_layer .gtl_ico_succ, .msgbox_layer .gtl_ico_fail, .msgbox_layer .gtl_ico_hits, .msgbox_layer .gtl_ico_clear, .msgbox_layer .gtl_end {background-image: url("images/gb_tip_layer.png");background-repeat: no-repeat;color: #606060;display: inline-block;font-size: 14px;font-weight: bold;height: 54px;line-height: 54px;}
        .msgbox_layer_wrap {left: 0;position: fixed;_position: absolute;_top: expression(documentElement.clientHeight/2 + documentElement.scrollTop + "px");text-align: center;top: 46%;width: 100%;z-index: 65533;}
        .msgbox_layer {background-position: 0 -161px;background-repeat: repeat-x;margin: 0 auto;padding: 0 18px 0 9px;position: relative;}
        .msgbox_layer .gtl_ico_succ {background-position: -6px 0;left: -45px;position: absolute;top: 0;width: 45px;}
        .msgbox_layer .gtl_end {background-position: 0 0;position: absolute;right: -6px;top: 0;width: 6px;}
        .msgbox_layer .gtl_ico_fail {background-position: -6px -108px;left: -45px;position: absolute;top: 0;width: 45px;}
        .msgbox_layer .gtl_ico_hits {background-position: -6px -54px;left: -45px;position: absolute;top: 0;width: 45px;}
        .msgbox_layer .gtl_ico_clear {background-position: -6px 0;left: -5px;position: absolute;top: 0;width: 5px;}
        .msgbox_layer img {float: left;margin: 19px 10px 0 5px;width: 16px;height: 16px;}
        .manhuaTip{ width:80px; height:40px; line-height:40px; text-align:center; border:1px #999999 solid; background:#82ce18; margin-right:50px; font-size:16px; font-weight:bold; letter-spacing:2px; cursor:pointer; color:#FFF; }
    </style>
</head>
<body>

<input type="button" value='加载中' id="demo">
<input type="button" value='成功' id="demo2">
<input type="button" value='失败' id="demo3">
<input type="button" value='警告' id="demo4">

<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript">    
    $("#demo").click(function(){
        $.mTip('0','加载中',0);
    });
    $("#demo2").click(function(){
        $.mTip('1','成功',0);
    });
    $("#demo3").click(function(){
        $.mTip('2','失败',0);
    });
    $("#demo4").click(function(){
        $.mTip('3','警告',0);
    });

    function log(a){console.log(a)}
    $.extend({    
        mTip:function(type,txt,time,callback){

                if($("#mTip").length){
                    $("#mTip").remove();
                }
                
               var arrayHTML = [
                    '<img alt="" src="images/loading.gif">',
                    '<span class="gtl_ico_succ"></span>',
                    '<span class="gtl_ico_fail"></span>',
                    '<span class="gtl_ico_hits"></span>'
                ];
                var temp = type ? arrayHTML[type] : arrayHTML[0];
                var html = '<div id="mTip" class="msgbox_layer_wrap"><span id="mode_tips_v2" style="z-index: 10000;" class="msgbox_layer"><span class="gtl_ico_clear"></span>';
                html+= arrayHTML[type] + txt + '<span class="gtl_end"></span></span></div>';
                $("body").append(html);
                if(typeof time == 'number'){
                    if(time > 0){
                        setTimeout(function(){
                            $("#mTip").remove();
                            if(callback){
                                   callback();
                            }  
                        },time);
                    }else{
                        setTimeout(function(){
                            if(callback){
                                   callback();
                            }  
                        },100);
                        
                    }
                 }
                }    
            });    



</script>
</body>
</html>

 

下载地址：https://files.cnblogs.com/yyman001/mTip1.0.rar

 

posted @ 2014-01-08 17:21  黑色技术  阅读(1428)  评论(0)  编辑  收藏  举报