jQuery Growl学习笔记

简介

jQuery Growl是一个轻量级的jQuery插件，用于在网页中显示通知消息。它可以在任何位置显示消息，在页面顶部、底部或者任意自定义位置。消息可以设定停留时间、动画效果和CSS样式等。

安装与使用

首先需要引入jQuery库文件和jQuery Growl插件文件

htmlCopy Code
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-growl/1.3.8/jquery.growl.min.js"></script>

呈现消息

javascriptCopy Code
$.growl('Hello, World!');

可配置选项

javascriptCopy Code
$.growl({
    title: 'Notification Title',
    message: 'Notification Message',
    duration: 5000,
    location: 'top-right',
    size: 'large'
});

示例

javascriptCopy Code
// 默认提示消息
$.growl('Welcome to my website!');

// 自定义消息样式
$.growl({
    title: 'Notification Title',
    message: 'Notification Message',
    duration: 5000, // 消息持续时间，单位毫秒，默认为 3000
    location: 'top-right', // 消息位置，可选值包括 top-left, top-right, bottom-left, and bottom-right，默认为 top-right
    size: 'large', // 消息大小，可选值包括 small, medium, large，默认为 medium
    style: 'info', // 消息样式，可选值包括 notice, warning, error, and info，默认为 notice
    delayOnHover: true, // 鼠标悬停延迟，如果设置为 true，鼠标移出消息时会暂停消息持续时间
    icon: 'fas fa-check-circle' // 消息图标，可选值包括 Font Awesome 图标类，默认为 null
});

以上就是jQuery Growl学习笔记的详细内容，希望能对你有所帮助。