NZ-MsgBox

• Alert

  • 使用方法

    不带图标 不带标题 成功 警告 错误 超长内容
    ?

    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

    //不带图标 $.NZ_MsgBox.alert({     title: "yes!成功！"     , content: "耶耶耶！成功！well done!"     , type: ""     , buttons: {         confirm: { text: "好的" }     } }); //不带图标 $.NZ_MsgBox.alert({     title: ""     , content: "耶耶耶！成功！well done!"     , type: ""     , buttons: {         confirm: {text: "好的"}     } }); //成功 $.NZ_MsgBox.alert({     title: "yes!成功！"     , content: "耶耶耶！成功！well done!"     , type: "success" }); //警告 $.NZ_MsgBox.alert({     title: "Warning!警告！"     , content: "Warning！警告！well done!"     , type: "warning" }); //错误 $.NZ_MsgBox.alert({     title: "Error!错误！"     , content: "Error！错误！"     , type: "error" }); //超长内容 $.NZ_MsgBox.alert({     title: "yes!成功！"     , content: "他自己，自从到城里来，......" });

• Confirm

  • 使用方法

    疑问 警告疑问
    ?

    1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17

    //询问 $.NZ_MsgBox.confirm({     title: "确认成功？"     , content: "耶耶耶！成功！well done!"     , callback: function (resu) {               } }); //警告询问 $.NZ_MsgBox.confirm({     title: "确认成功？"     , content: "耶耶耶！成功！well done!"     , type: "warning"     , callback: function (resu) {         console.log(resu);     } });

• Prompt

  • 使用方法

    输入 输入(默认值)
    ?

    1 2 3 4 5 6 7 8

    //输入 $.NZ_MsgBox.prompt({ title: "输入一下下？", type: "warning", callback: function (resu) { if (resu === null) {             $.NZ_MsgBox.tipsbar({ title: "提示", content: "没有输入什么......",showtime:3000 });         } else {             $.NZ_MsgBox.tipsbar({                title: "提示", content: '您输入了：

    ' + resu + '

    ', type: "info", showtime: 3000
                                });
                             }
                         }
                     });
                    //输入(默认值)
                    $.NZ_MsgBox.prompt({
                        title: "输入一下下？", content: "耶耶耶！成功！well done!",type:"warning",callback:funct (resu    {
                            if (resu === null) {
                                $.NZ_MsgBox.tipsbar({ title: "提示", content: "没有输入什么......", showtime:3000 });
                            } else {
                                $.NZ_MsgBox.tipsbar({
                                    title: "提示", content: '您输入了：

    ' + resu + '

    ', type: "info", showtime: 3000
                                });
                            }
                        }
                    });
                    

• TipsBar

  • 使用方法

    普通无状态通知 成功(3s消失) 警告 错误(5s消失) 消息 回调 居中顶部消息 居中底部消息 消息方向（自下而上）
    ?

    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

    //普通无状态通知 $.NZ_MsgBox.tipsbar({ title: "通知", content: "明天下午开会！" }); //成功(3s消失，且不显示倒计时进度) $.NZ_MsgBox.tipsbar({     title: "通知"     , content: '操作成功！<span style="color:#ff0000;">Success!</span>'     , type: "success"     , showtime: 3000     , processbar: false }); //警告(长内容) $.NZ_MsgBox.tipsbar({     title: "通知"     , content: '警告！Warning!警告！Warning!警告！Warning!警告！Warning!警告！<span style="color:#0000ff">Warning!警告！</span>Warning!警告！Warning!警告！Warning!警告！Warning!警告！Warning!警告！Warning!警告！Warning!'     ,type: "warning"  }); //错误(5s消失) $.NZ_MsgBox.tipsbar({     title: "通知"     , content: "错误！Error!"     , type: "error"     , showtime: 5000 }); //消息 $.NZ_MsgBox.tipsbar({ title: "通知", content: "消息！Information!", type: "info" }); //回调 $.NZ_MsgBox.tipsbar({     content: "3秒后有个惊喜！", type: "info", callback: function () {         $.NZ_MsgBox.alert({ content: "Surprise!沙普赖斯！", buttons: { confirm: { text: "收   到！" } } });     }, showtime: 3000 }); //居中顶部消息 $.NZ_MsgBox.tipsbar({     title: "通知"     , content: "您有新消息！Information!4.5s后消失"     , type: "info"     , location: "top"     , showtime: 4500  });  //居中底部消息  $("#tipsbar_7").click(function () {     $.NZ_MsgBox.tipsbar({ title: "通知", content: "您有新消息！     Information!4.5s后消失", type: "info", tipsort: "bottom",       location: "top", showtime: 4500 });  }); //消息方向(自下而上) $.NZ_MsgBox.tipsbar({     title: "通知"     , content: "这是一个底部通知！"     , type: "info"     , tipsort: "bottom"     , showtime: 4500 });

• Toast

  • 使用方法

    即时提示 顶部提示 Loading 1 Loading 2
    ?

    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

    //一般应用 var toast = $.NZ_MsgBox.toast({ content: "我是测试的消息", showtime: 3000 }); //位置设置 var toast = $.NZ_MsgBox.toast({ content: "我从上面跑下来的，你康康帅不帅", location: "top", showtime: 3000 }); //实现loading效果(融合loadingspinner，效果更好)，使用关闭回调函数，并设置遮罩 var opts = {     lines: 16, // The number of lines to draw     length: 6, // The length of each line     width: 19, // The line thickness     radius: 7, // The radius of the inner circle     scale: 1.35, // Scales overall size of the spinner     corners: 1, // Corner roundness (0..1)     color: '#ffffff', // CSS color or array of colors     fadeColor: 'transparent', // CSS color or array of colors     speed: 1.3, // Rounds per second     rotate: 0, // The rotation offset     animation: 'spinner-line-fade-quick', // The CSS animation name for the lines     direction: 1, // 1: clockwise, -1: counterclockwise     zIndex: 2e9, // The z-index (defaults to 2000000000)     className: 'spinner', // The CSS class to assign to the spinner     top: '50%', // Top position relative to parent     left: '50%', // Left position relative to parent     shadow: '0 0 1px transparent', // Box-shadow for the lines     position: 'absolute' // Element positioning }; var toastcon = $('

    正在加载

    ');
                        var spinner = new Spinner(opts).spin(toastcon.children("div").get(0));
                        var toast = $.NZ_MsgBox.toast({
                        content: toastcon.prop("outerHTML"), masklayer: true,showtime:5000, onhide: function () {
                            $.NZ_MsgBox.toast({ content: "加载完毕", location: "top", showtime: 3000 });
                            }
                        });
                        //实现loading效果(使用图片)，并使用update函数更新内容方式
                        var toast = $.NZ_MsgBox.toast({
                            content: '

    

    正在加载

    ', masklayer: true
                        });
                        setTimeout(function () {
                            toast.update({ content: '

    加载完毕

    ' });
                        }, 3000);
                        setTimeout(function () {
                                toast.hide();
                            }, 5000);
                        });
                        //所有参数
                        {
                            onshowbefore: function () { },//显示前事件
                            onshow: function () { },//显示后事件
                            onhidebefore: function () { },//关闭前事件
                            onhide: function () { },//关闭后事件
                            content: null,//内容
                            location: "center",//定位(默认中间)：top、center
                            masklayer: false,//遮罩
                            showtime: null//显示时间
                        };
                    

• Tooltips

  • 一般应用

    悬浮显示
    ?

    1 2 3 4

    $.NZ_MsgBox.tooltip({     tiptarget: $("#tooltips_0"),     content: "我是一个萌萌哒提示！" });

  • 方位

    默认自动方位 右侧提示 左侧提示 底部提示
    ?

    1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20

    $.NZ_MsgBox.tooltip({     tiptarget: $("#tooltips_1"),     content: "上面提示！",     location: "top" }); $.NZ_MsgBox.tooltip({     tiptarget: $("#tooltips_2"),     content: "右侧提示！",     location: "right" }); $.NZ_MsgBox.tooltip({     tiptarget: $("#tooltips_3"),     content: "左侧提示！",     location: "left" }); $.NZ_MsgBox.tooltip({     tiptarget: $("#tooltips_4"),     content: "底部提示！",     location: "bottom" });

  • 自定义触发

    点击显示 双击显示,单击隐藏
    ?

    1 2 3 4 5 6 7 8 9 10

    $.NZ_MsgBox.tooltip({     tiptarget: $("#tooltips_5"),     content: "我来也！",     show: "mousedown", hide: "mousedown" }); $.NZ_MsgBox.tooltip({     tiptarget: $("#tooltips_6"),     content: "我又来也！",     show: "dblclick",hide:"click" });

  • 主题

    LightYellow

    Red

    Green

    Blue

    Dark
    ?

    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

    $.NZ_MsgBox.tooltip({     tiptarget: $("#tooltips_themelist").find(".yellow"),     content: "LightYellow！",     theme: "lightyellow" }); $.NZ_MsgBox.tooltip({     tiptarget: $("#tooltips_themelist").find(".red"),     content: "Red！",     theme: "red" }); $.NZ_MsgBox.tooltip({     tiptarget: $("#tooltips_themelist").find(".green"),     content: "Green！",     theme: "green" }); $.NZ_MsgBox.tooltip({     tiptarget: $("#tooltips_themelist").find(".blue"),     content: "Blue！",     theme: "blue" }); $.NZ_MsgBox.tooltip({     tiptarget: $("#tooltips_themelist").find(".dark"),     content: "Dark！",     theme: "dark" });

  • 显示指定属性内容

    1

    2

    3

    4

    5

    6

    7

    8
    ?

    1 2 3 4

    $.NZ_MsgBox.tooltip({     tiptarget: $(".block"),     contentAttr: "hha" });