Alert
-
使用方法
//不带图标 $.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
-
使用方法
//询问 $.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
-
使用方法
//输入 $.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
-
使用方法
//普通无状态通知 $.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 });
Toast
-
使用方法
//一般应用 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
-
一般应用
$.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" });