这是一款基于bootstrap4的jQuery消息通知插件。该消息通知插件使用简单,可生成多种主题的toast消息通知,可设置为自动消失或固定时间消失等,非常实用。
使用方法
在页面中引入jquery和bootstrap4相关文件,以及notifyMessage相关文件。
< link href = "css/bootstrap.min.css" rel = "stylesheet" >
< script src = "js/jquery-1.11.0.min.js" type = "text/javascript" ></ script >
< script src = "js/bootstrap.min.js" ></ script >
< link rel = "stylesheet" type = "text/css" media = "screen" href = "css/notifyMessage.css" />
< script src = "js/notifyMessage.js" ></ script >
|
初始化插件
该jQuery消息通知插件最基本的使用方法如下:
runNotify({
message: '这是一则消息通知' ,
messageTitle: '标题'
});
|
可以指定消息框在多少秒钟之后消失。
runNotify({
message: '这是一则消息通知' ,
messageTitle: '标题' ,
timer: '5000'
});
|
也可以使消息框固定在屏幕上,手动点击关闭按钮才消失。
runNotify({
message: '这是一则消息通知' ,
messageTitle: '标题' ,
type: 'fixed'
});
|
可以定义消息的主题颜色。
runNotify({
message: '这是一则成功消息通知' ,
messageTitle: '标题' ,
levelMessage: 'success'
});
runNotify({
message: '这是一则错误消息通知' ,
messageTitle: '标题' ,
levelMessage: 'error'
});
runNotify({
message: '这是一则警告消息通知' ,
messageTitle: '标题' ,
levelMessage: 'warning'
});
|
还可以通过点击“查看更多”链接打开模态对话框。
runNotify({
message: 'Success message text!' ,
levelMessage: 'success' ,
type: 'readmore' ,
messageTitle: 'Title of modal' ,
readMoreMessage: 'Open the notify!'
});
|