Tip提示插件 | 哔哔大侠

基于 manhuaTip.1.0.js 完善

下载地址:http://pan.decadework.com/file/2013/12/10/2013121015301690703.zip
该下载地址有限制请求
百度下载:http://pan.baidu.com/s/14AIZ5

/* 周祥 2013年12月10日11:37:35  

<<短暂的Tip提示插件>>  

基于 manhuaTip.1.0.js 完善

调用方法:
//实例化
var tip = new JqueryTip();
//显示
tip.Show({
msg: "上传完成",
type: "success"
});
//关闭
tip.Hide();

页面需要调用文件 jquery.Tip.js , jquery.Tip.css

注意:引用的时候需要注意 <img src="images/loading.gif"> 的路径 免得调用loading时没有图片

参数说明:
time:显示多少时间,然后自动关闭
type:显示类型,支持:success,error,notice,loading 
msg:显示内容,
z_index:z-index,
IsLock:遮罩 默认开启
*/
var JqueryTip = function () {
    var _self = this;
    _self.Txt = {
        loading: "loading",
        notice: "notice",
        error: "error",
        success: "success",
        Null: "",
        msgbox_layer_wrap: ".msgbox_layer_wrap",
        html: "{html}",
        index: "{index}",
        msgbox_layer_lock: ".msgbox_layer_lock"
    };
    _self.Html = {
        loading: '<img src="/js/Tips/images/loading.gif">', //这里需注意路径
        notice: '<span></span>',
        error: '<span></span>',
        success: '<span></span>',
        hm: "<div class='msgbox_layer_wrap' style='z-index: {index};'><span id='mode_tips_v2'  class='msgbox_layer'><span class='gtl_ico_clear'></span>{html}<span class='gtl_end'></span></span></div>",
        lock: "<div class='msgbox_layer_lock' style=\"height:" + $(document).height() + "px\"></div>"
    };
    _self.defaults = {
        time: 2000,
        type: _self.Txt.notice,
        msg: _self.Txt.Null,
        z_index: 1000000,
        IsLock: true
    };
    _self.Model = {
        TipHtml: "",
        Time: null
    };
    _self.Show = function (options) {
        _self.Hide();
        _self.options = $.extend({}, _self.defaults, options);
        switch (_self.options.type) {
            case _self.Txt.loading:
                _self.Model.TipHtml += _self.Html.loading + _self.options.msg;
                break;
            case _self.Txt.notice:
                _self.Model.TipHtml += _self.Html.notice + _self.options.msg;
                break;
            case _self.Txt.error:
                _self.Model.TipHtml += _self.Html.error + _self.options.msg;
                break;
            case _self.Txt.success:
                _self.Model.TipHtml += _self.Html.success + _self.options.msg;
                break;
        }
        var html = _self.Html.hm;
        html = html.replace(_self.Txt.html, _self.Model.TipHtml);
        html = html.replace(_self.Txt.index, _self.options.z_index);
        if (_self.options.IsLock) {
            html += _self.Html.lock;
        }
        $(document.body).prepend(html);
        $(_self.Txt.msgbox_layer_wrap).show();
        _self.Model.Time = setTimeout(function () {
            _self.Hide();
        }, _self.options.time);
    }
    _self.Hide = function () {
        _self.Model.TipHtml = _self.Txt.Null;
        if ($(_self.Txt.msgbox_layer_wrap)) {
            $(_self.Txt.msgbox_layer_wrap).remove();
        }
        if ($(_self.Txt.msgbox_layer_lock)) {
            $(_self.Txt.msgbox_layer_lock).remove();
        }
        if (_self.Model.Time != null) {
            clearTimeout(_self.Model.Time);
        }
    }
};

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <link href="css/jquery.Tip.css" rel="stylesheet" type="text/css" />
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
    <script src="jquery.Tip.js" type="text/javascript"></script>
    <script>
        $(function () {
            var tip = new JqueryTip();
            tip.Show({
                msg: "正在上传文件中,请稍后...",
                type: "loading",
                time: 1000 * 60 * 10
            });
        });
    </script>
</head>
<body>
</body>
</html>