当前位置: 爱符号 - 所有分类 - Web开发 - js - 自定义的消息提示
自定义的消息提示 ZiDingYiDeXiaoXiTiShi
射手座的叹息 发表于:2013-01-23 20:27:33 阅读(4657)
关键词:消息提示 消息提示
摘要:渐隐渐显的自定义的消息提示
///<summary>
///Namespace

///<summary>
var ksbmSns = window.ksbmSns || {};


/**********************************消息提示层*****************************************/
/*
state:Y or N
使用的时候调用ksbmSns.AlertMsg.ReturnMsg(msg, state)这个函数就可以
msg:你要发表的话
Y:钩子图标
N:叉图标
-------------------------------------------------------------------------------------------
注:如果要符合自己的样式可以在调用ReturnMsg前面重写ksbmSns.AlertMsg.fixedDiv 参数集合
参数说明:
DivWidth:框的宽度
DivHeight:框的高度
backgroundY:Y的图标
backgroundN:N的图标
color:字体颜色
span_left:字离框的左边距离
span_height:字离框的顶边距离
-------------------------------------------------------------------------------------------
create by:lxd;

QQ:649886489
PS;backgroundY(N)=>图片的宽高要和DivWidth(Height) 一直 最好不要使用png图片 png不兼容于IE
*/
ksbmSns.AlertMsg =
{
    defaults: { "msg": "", "state": "" },
    fixedDiv: {
        "DivWidth": "200",
        "DivHeight": "54",
        "backgroundY": "url(/images/system/msg_y.gif) no-repeat",
        "backgroundN": "url(/images/system/msg_n.gif) no-repeat",
        "color": "#595959",
        "span_left": "50",
        "span_height": "15"
    },

    G: function (id) {
        return document.getElementById(id);
    },
    GC: function (t) {
        return document.createElement(t);
    },
    popSign: function () {
        var l = (document.documentElement.clientWidth - ksbmSns.AlertMsg.fixedDiv.DivWidth) / 2;
        var t = (document.documentElement.clientHeight - ksbmSns.AlertMsg.fixedDiv.DivHeight) / 2 + document.documentElement.scrollTop + document.body.scrollTop;
        if (ksbmSns.AlertMsg.G("Msg_Div")) {
            ksbmSns.AlertMsg.G("Msg_Div").style.left = l + 'px';
            ksbmSns.AlertMsg.G("Msg_Div").style.top = t + 'px';
            ksbmSns.AlertMsg.G("Msg_Div").style.zIndex = 6533;
            ksbmSns.AlertMsg.G("Msg_Div").style.display = '';
        } else {
            var signDiv = ksbmSns.AlertMsg.GC('div');
            document.body.appendChild(signDiv);
            signDiv.id = 'Msg_Div';
            signDiv.align = "left";

            with (signDiv.style) {
                position = 'absolute';
                zIndex = 6533;
                fontWeight = 'bold';
                fontFamily = '宋体';
                fontSize = '14px';
                left = l + 'px';
                top = t + 'px';
                width = ksbmSns.AlertMsg.fixedDiv.DivWidth + 'px';
                height = ksbmSns.AlertMsg.fixedDiv.DivHeight + 'px';
                color = ksbmSns.AlertMsg.fixedDiv.color;
                border = 'none 0';
                display = 'none';
            }
        }
        if (ksbmSns.AlertMsg.defaults.state == "Y") {
            ksbmSns.AlertMsg.G("Msg_Div").style.background = ksbmSns.AlertMsg.fixedDiv.backgroundY;
        } else {
            ksbmSns.AlertMsg.G("Msg_Div").style.background = ksbmSns.AlertMsg.fixedDiv.backgroundN;
        }

        var info = '<span style="left: ' + ksbmSns.AlertMsg.fixedDiv.span_left + 'px; top: ' + ksbmSns.AlertMsg.fixedDiv.span_height + 'px; position: relative;">' + ksbmSns.AlertMsg.defaults.msg + '</span>'
        ksbmSns.AlertMsg.G("Msg_Div").innerHTML = info;
    },
    ShowMsg_Div: function () {
        ksbmSns.AlertMsg.popSign();
        $("#Msg_Div").fadeTo(1200, 1, function () {
            $("#Msg_Div").fadeTo(1200, 0, function () {
                $("#Msg_Div").css("z-index", "-1");
            });
        });
    },
    ReturnMsg: function (msg, state) {
        ksbmSns.AlertMsg.defaults =
            {
                "msg": msg,
                "state": state
            };
        ksbmSns.AlertMsg.ShowMsg_Div();
    }
};

 自己做的一个消息提示 供大家学习工作使用:

控件图片

可以使用自己的修改

使用方法:

1.ksbmSns.AlertMsg.ReturnMsg("大家好","Y")=>出现的是勾勾

2.ksbmSns.AlertMsg.ReturnMsg("大家好","N")=>出现的是叉叉


声明:以上内容仅代表作者观点,不代表爱符号赞成此内容或立场
消息提示相关的分享
 
  • ·暂无相关分享
  •  
作者热播