jQuery消息提示插件growl-notification

所属分类:UI-弹出层,工具提示,对话框

 2964  17  查看评论 (1)
分享到微信朋友圈
X
jQuery消息提示插件growl-notification ie兼容11

jQuery消息提示插件growl-notification

  • 内置漂亮的 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|stringnull消息通知框的宽度,例如 100px, 50%...
zIndex: number1056消息通知框的 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: booleanfalse显示隐藏图片
image.customImage: string''自定义图片的路径
closeTimeout: boolean,intfalse延迟关闭对话框的时间,单位毫秒。
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,falsefalse显示或隐藏按钮。
buttons: object
buttons: {
    action: {
        text: 'Ok',
        callback: function {} // callback
    },
    cancel: {
        text: 'Cancel',
        callback: function {} // callback
    }
}
Buttons configuration
showProgress: true,falsefalse显示或隐藏进度条
GrowlNotification.setGlobalOptions: object{}为消息框设置全局参数。
GrowlNotification.closeAll-关闭所有消息框。
相关插件-弹出层,工具提示,对话框

jQuery弹出层插件gallery

这是一个图片弹出层
  弹出层
 33921  307

悬浮九宫格菜单jQuery插件

悬浮九宫格菜单jQuery插件
  弹出层
 41992  402

jQuery遮罩弹窗居中

jQuery遮罩弹窗始终屏幕剧中,调用简单代码少。
  弹出层
 49465  439

jQuery html5爆裂式登录效果

HTML5爆裂式关闭窗口动画登录模板,关闭窗口撕开动画效果。
  弹出层
 44597  525

讨论这个项目(1)回答他人问题或分享插件使用方法奖励jQ币 评论用户自律公约

    Intern 0
    2021/4/16 10:09:23
    不是响应式的 手机上显示异常 回复
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
取消回复