jquery-notify是一款简单实用的jQuery消息提示插件,该消息提示插件的特点是可以在显示提示框的时候发出声音。它简单实用,用户体验非常好。
使用方法
使用该消息提示框插件需要引入jQuery和jquery.notify.js以及jquery.notify.css文件。
<link rel="stylesheet" href="js/jquery.notify.css"> <script src="js/jquery.min.js"></script> <script src="js/jquery.notify.js"></script>
HTML结构
该消息提示插件有两中使用方法:第一种可以将提示的信息以HTML标签的形式写在<body>
标签中。
<p class="notify" data-notify-type="error">Error!</p> <p class="notify" data-notify-type="success sticky">Sticky Info</p>
标签中必须带有notify
class类,另外data-notify-type
是消息提示的类型。
另外一种使用方法是通过js来初始化消息提示框。
初始化插件
在页面DOM元素加载完毕之后,可以通过notify()
方法来初始化该消息提示插件。
$('.notify').notify();
使用纯JS的方法初始化消息提示框的方法如下:
$('<p>Hello World!</p>').notify(); $('<p>Hello World!</p>').notify('error'); $('<p>Hello World!</p>').notify({sticky: true});
jquery-notify消息提示插件的github地址为:https://github.com/yefei/jquery-notify