修改my-message jquery 消息插件

来源：互联网发布：火车头采集本地数据编辑：程序博客网时间：2024/05/21 08:36

对jQuery my-message 的效果不是很满意，修改了一下：

http://www.menucool.com/tooltip/javascript-tooltip :也是一款不错的弹出框插件

 JavaScript Code 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56

<!DOCTYPE html>
<html lang="zh-CN">

    <head>
        <meta charset="utf-8" />
        <title></title>
        <meta http-equiv="X-UA-Compatible" content="IE=Edge">
        <link rel="stylesheet" href="css/jquery.my-message.1.1.css" />
    </head>

    <body>
        <button id="btn1">普通的</button>
        <button id="btn2">成功的</button>
        <button id="btn3">警告的</button>
        <button id="btn4">错误的</button>
        <script type="text/javascript" src="js/jquery1.9.min.js"></script>
        <script type="text/javascript" src="js/jquery.my-message.1.1.js"></script>
        <script>
            var message = new MyMessage.message({
                /*默认参数，下面为默认项*/
                iconFontSize: "20px", //图标大小,默认为20px
                messageFontSize: "12px", //信息字体大小,默认为12px
                showTime: 10, //消失时间,默认为3000
                align: "center", //显示的位置类型center,right,left
                positions: { //放置信息距离周边的距离,默认为10px
                    top: "10px",
                    bottom: "10px",
                    right: "10px",
                    left: "10px"
                },
                message: "这是一条消息", //消息内容,默认为"这是一条消息"
                type: "normal", //消息的类型，还有success,error,warning等，默认为normal
            });
            /*两种不同的设置方式*/

            message.setting({
                align: "center" //会覆盖前面的所有设置,可以创建不同的对象去避免覆盖
            });
            message.setting("showTime", "1000");

            $('#btn1').click(function() {
                message.add("普通的消息");
            });
            $('#btn2').click(function() {
                message.add("成功的消息", "success");
            });
            $('#btn3').click(function() {
                message.add("警告的消息", "warning");
            });
            $('#btn4').click(function() {
                message.add("错误的消息", "error");
            });
        </script>
    </body>

</html>

修改的插件：72~74行

 JavaScript Code 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124

/**
* 支持浏览器:IE8+
* */
var MyMessage = (function() {
    function message(setting) {
        //合并默认参数
        this.messageContainer = null;
        this.opts = null;
        this.$domStr=null;//新加的对象
        this._setting(setting);
        this.init();
    }

    /*默认参数*/
    message.DEFAULTS = {
        iconFontSize: "20px", //图标大小
        messageFontSize: "12px", //信息字体大小
        showTime: 3000, //消失时间
        align: "center", //显示的位置
        positions: { //放置信息的范围
            top: "10px",
            bottom: "10px",
            right: "10px",
            left: "10px"
        },
        message: "这是一条消息", //消息内容
        type: "normal", //消息的类型，还有success,error,warning等
    }
    /*设置消息的参数*/
    message.prototype._setting = function(setting) {
        this.opts = $.extend({}, message.DEFAULTS, setting);
    }
    message.prototype.setting = function(key, val) {
        console.log(arguments.length);
        if(arguments.length === 1) {
            if("object" === typeof key) {
                for(var k in key) {
                    this.opts[k] = key[k]
                }
            }
        } else if(arguments.length === 2) {
            if("string" === typeof key) {
                this.opts[key] = val;
            }
        }
    }
    /*
     用于添加相应的dom到body标签中
     * */
    message.prototype.init = function() {
        var domStr = "<div class='m-message' style='top:" +
            this.opts.positions.top +
            ";right:" +
            this.opts.positions.right +
            ";left:" +
            this.opts.positions.left +
            ";width:calc(100%-" +
            this.opts.positions.right +
            this.opts.positions.left +
            ");bottom:" + this.opts.positions.bottom +
            "'></div>"
        this.messageContainer = $(domStr);
        this.messageContainer.appendTo($('body'))
    }
    /*
     用于添加消息到相应的标签中
     message:具体的消息
     type:消息的类型
     * */
    message.prototype.add = function(message, type) {
        //判断如果之前有dom就隐藏，如果没有就生成，页面始终就会只会有一个消息弹窗口，可能是需求不一样，如果要多个就可以注释这个代码
        if(null != this.$domStr){
            this._hideImmediately(this.$domStr);
        }
        var domStr = "";
        type = type || this.opts.type;
        domStr += "<div class='c-message-notice' style='" +
            "text-align:" +
            this.opts.align +
            ";'><div class='m_content'><i class='";
        switch(type) {
            case "normal":
                domStr += "icon-bubble";
                break;
            case "success":
                domStr += "icon-check-alt";
                break;
            case "error":
                domStr += "icon-notification";
                break;
            case "warning":
                domStr += "icon-cancel-circle";
                break;
            default:
                throw "传递的参数type错误，请传递normal/success/error/warning中的一种";
                break;
        }
        domStr += "' style='font-size:" +
            this.opts.iconFontSize +
            ";'></i><span style='font-size:" +
            this.opts.messageFontSize +
            ";'>" + message + "</span></div></div>";
        this.$domStr = $(domStr).appendTo(this.messageContainer);
        this._hide(this.$domStr);
    }
    /**
     * 隐藏消息
     * $domStr：该消息的jq对象
     * */
    message.prototype._hide = function($domStr) {
        setTimeout(function() {
            $domStr.fadeOut(1000);
        }, this.opts.showTime);
    }


    //新添加的方法
    message.prototype._hideImmediately = function($domStr) {
        $domStr.hide();
    }
    return {
        message: message /*对外提供的接口*/
    }
})();

阅读全文

0 0