带提示音的jQuery消息提示框插件

当前位置:主页 > jQuery库 > Lightbox和对话框 > 带提示音的jQuery消息提示框插件
带提示音的jQuery消息提示框插件
分享:

    插件介绍

    jquery-notify是一款简单实用的jQuery消息提示插件,该消息提示插件的特点是可以在显示提示框的时候发出声音。它简单实用,用户体验非常好。

    浏览器兼容性

    浏览器兼容性
    时间:12-30
    阅读:
简要教程

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