修改my-message jquery 消息插件

尉迟高澹

2023-12-01

对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 /*对外提供的接口*/
    }
})();

修改my-message jquery 消息插件

相关阅读

相关文章

相关问答

相关文档