//不带图标 $.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: "他自己,自从到城里来,......" });
//询问 $.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); } });
//输入 $.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 }); } } });
//普通无状态通知 $.NZ_MsgBox.tipsbar({ title: "通知", content: "明天下午开会!" }); //成功(3s消失,且不显示倒计时进度) $.NZ_MsgBox.tipsbar({ title: "通知" , content: '操作成功!Success!' , type: "success" , showtime: 3000 , processbar: false }); //警告(长内容) $.NZ_MsgBox.tipsbar({ title: "通知" , content: '警告!Warning!警告!Warning!警告!Warning!警告!Warning!警告!Warning!警告!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 });
//一般应用 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//显示时间 };
$.NZ_MsgBox.tooltip({ tiptarget: $("#tooltips_0"), content: "我是一个萌萌哒提示!" });
$.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" });
$.NZ_MsgBox.tooltip({ tiptarget: $("#tooltips_5"), content: "我来也!", show: "mousedown", hide: "mousedown" }); $.NZ_MsgBox.tooltip({ tiptarget: $("#tooltips_6"), content: "我又来也!", show: "dblclick",hide:"click" });
$.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" });
$.NZ_MsgBox.tooltip({ tiptarget: $(".block"), contentAttr: "hha" });