对话框/Tips

现代时尚消息通知提示javascript插件

面包多

现代时尚消息通知提示javascript插件-创客云
这是一款现代时尚的 js 消息通知插件。该 js 消息通知插件提供漂亮的 UI 效果,和多种主题,支持自定义消息框的弹出位置等,使用简单方便。

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

使用方法

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

也想出现在这里?联系我们
创客主机
  1. <link href="light-theme.min.css" rel="stylesheet">
  2. <script src='growl-notification.min.js'></script>

初始化插件

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

配置参数

  1. GrowlNotification.notify({
  2.     margin: 20,
  3.     type: 'default',
  4.     title: '',
  5.     description: '',
  6.     image: {
  7.         visible: false,
  8.         customImage: ''
  9.     },
  10.     closeTimeout: 0,
  11.     closeWith: ['click', 'button'],
  12.     animation: {
  13.         open: 'slide-in',
  14.         close: 'slide-out'
  15.     },
  16.     animationDuration: .2,
  17.     position: 'top-right',
  18.     showBorder: false,
  19.     showButtons: false,
  20.     buttons: {
  21.         action: {
  22.             text: 'Ok',
  23.             callback: function() {}
  24.         },
  25.         cancel: {
  26.             text: 'Cancel',
  27.             callback: function() {}
  28.         }
  29.     },
  30.     showProgress: false
  31. });
参数 默认值 描述
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 - 关闭所有消息框。

Github 网址:http://themesanytime.com/products/growl-notifications/

(0)

本文由 创客云 作者:PetitQ 发表,转载请注明来源!

阿里云

热评文章

发表评论

精彩推荐

Supro - 极简电商WordPress汉化主题

Envato Affiliates

本站承接 WordPress / DedeCMS / ThinkPHP 等
系统建站、仿站、开发、定制等业务!

Hi, 如果您有主题插件代购(30-600元)汉化等建站相关业务,可以 跟我联系 哦!
欢迎投稿
嘿,欢迎咨询!