jQuery消息提示插件growl-notification

28472022-08-02 17:52:35去下载

jQuery消息提示插件growl-notification，该插件提供漂亮的UI效果，和多种主题，支持自定义消息框的弹出位置等，使用简单方便。

内置漂亮的 UI 效果和多种主题、
轻量级，压缩后只有 18K。
纯 js 编写，没有任何依赖。
支持 IE11+, Safari, Google Chrome, Yandex Browser, Opera, Firefox。

使用方法

在页面中引入下面的文件。

<link href="light-theme.min.css" rel="stylesheet">
<script src='growl-notification.min.js'></script>

初始化插件

GrowlNotification.notify({
    title: 'This is title',
    description: 'My Description'
});

配置参数

GrowlNotification.notify({
    margin: 20,
    type: 'default',
    title: '',
    description: '',
    image: {
        visible: false,
        customImage: ''
    },
    closeTimeout: 0,
    closeWith: ['click', 'button'],
    animation: {
        open: 'slide-in',
        close: 'slide-out'
    },
    animationDuration: .2,
    position: 'top-right',
    showBorder: false,
    showButtons: false,
    buttons: {
        action: {
            text: 'Ok',
            callback: function() {}
        },
        cancel: {
            text: 'Cancel',
            callback: function() {}
        }
    },
    showProgress: false
});

参数	默认值	描述
width: number\|string	null	消息通知框的宽度，例如 100px, 50%...
zIndex: number	1056	消息通知框的 z-index
type: string	'alert'	alert, success, error, warning, info
position: string	'top-right'	top-left, top-right, bottom-left, bottom-right, top-center, bottom-center
title: string	''	标题，可以包括 HTML 内容（input 元素除外）
description: string	''	描述，可以包括 HTML 内容（input 元素除外）
image.visible: boolean	false	显示隐藏图片
image.customImage: string	''	自定义图片的路径
closeTimeout: boolean,int	false	延迟关闭对话框的时间，单位毫秒。
closeWith: [...string]	['click']	click, button
animation.open: string,null,false	'slide-in'	如果是 string, 表示使用 css 类名. 如果是false\|null\|'none', 不会使用动画效果。 'slide-in', 'fade-in'
animation.close: string,null,false	'slide-out'	I 如果string,表示使用 css 类名. 如果是 false\|null\|'none',不会使用动画效果。 'slide-out', 'fade-out'
showButtons: true,false	false	显示或隐藏按钮。
buttons: object	buttons: { action: { text: 'Ok', callback: function {} // callback }, cancel: { text: 'Cancel', callback: function {} // callback } }	Buttons configuration
showProgress: true,false	false	显示或隐藏进度条
GrowlNotification.setGlobalOptions: object	{}	为消息框设置全局参数。
GrowlNotification.closeAll	-	关闭所有消息框。

TAG标签：jQuery插件消息提示 growl-notification

本文网址：https://www.zztuku.com/index.php/detail-12875.html
转载请声明来自：站长图库 - jQuery消息提示插件growl-notification
使用声明：
1、本站所有素材，仅限学习交流，请勿用于商业用途。
2、本站资源大多无解压密码，如遇需要解压密码，无特殊说明，均为：zztuku.com
3、下载积分可通过日常签到、绑定邮箱等途径免费获得！
4、本站提供的源码、模板、软件工具等其他资源，均不包含技术服务，请大家谅解！由于资源大多存储在云盘，如出现链接失效请评论反馈。
5、如果素材损害你的权益，请联系我们给予处理。