1. 程式人生 > >訊息小外掛

訊息小外掛


    function KMMessage(icon, msg,time) {
        var wrap = $('.KmMsgBox').length >0;
        if (wrap) {
            //已經存在
           
            switch (icon) {
                case 1:
                    $('.KmMsgBox .KmMsgBox-icon').css({ 'background-color': ' #52c5c5' }).html('√');
                    break;
                case 2:
                    $('.KmMsgBox .KmMsgBox-icon').css({ 'background-color': '#d4ce10' }).html('!');
                    break;
                case 3:
                    $('.KmMsgBox .KmMsgBox-icon').css({ 'background-color': '#c55252' }).html('?');
                    break;
                default:
                    $('.KmMsgBox .KmMsgBox-icon').css({ 'background-color': '#fff' }).html('√');
                    break;
            }
            $('.KmMsgBox .KmMsgBox-word').html(msg);
            $('.KmMsgBox').slideDown("slow");
        } else {
             //不存在
            var dom = ' <div class="KmMsgBox" style=" background-color: #fff; border-radius: 3px; height: 60px;  position: absolute; top: 20px;left: 50%; text-align: center;line-height: 60px;padding:0 20px;display:none">';
            switch (icon) {
                case 1:
                    dom += '<span class="KmMsgBox-icon" style="display: inline-block;vertical-align: middle;text-align: center;line-height: 27px;font-size: 20px;width: 26px;height: 26px;border-radius: 50%;color: #fff;background-color: #52c5c5;">√</span>';
                    break;
                case 2:
                    dom += '<span class="KmMsgBox-icon" style="display: inline-block;vertical-align: middle;text-align: center;line-height: 27px;font-size: 20px;width: 26px;height: 26px;border-radius: 50%;color: #fff;background-color: #d4ce10;">!</span>';
                    break;
                case 3:
                    dom += '<span class="KmMsgBox-icon" style="display: inline-block;vertical-align: middle;text-align: center;line-height: 27px; font-size: 20px;width: 26px;height: 26px;border-radius: 50%;color: #fff;background-color: #c55252;" >?</span>';
                    break;
                default:
                    dom += '<span class="KmMsgBox-icon" style="display: inline-block;vertical-align: middle;text-align: center;line-height: 27px;font-size: 20px;width: 26px;height: 26px;border-radius: 50%;color: #fff;background-color: #52c5c5;">√</span>';
                    break;
            }
            dom += '<span class="KmMsgBox-word" style="vertical-align:middle;font-size:18px;color:#000;font-weight: bold;margin-left: 6px"> ' + msg+' </span>';
            dom += '</div >';
            var jQObj = $(dom).appendTo('body');
            $('.KmMsgBox').slideDown("slow");
            $('.KmMsgBox').css({ 'margin-left': '-' + jQObj.width() / 2 + 'px' })
        }
        window.setTimeout(function () {
            $('.KmMsgBox').slideUp("slow");
        }, time || 2000)
    }

效果: