noty

前端 提示 / 引导
noty 是一个能够轻易创建替代原生的 alert - success - error - warning - information - confirmation 弹出框的 jQuery 插件
2019-04-14 我要评论 2 我要收藏

noty - 一个 jQuery 通知插件

noty v2 logo


简介

noty 是一个能够轻易创建 alert - success - error - warning - information - confirmation 通知的 jQuery插件。每一个通知都被加到了一个 队列 中(可选)

通知可以被定为在 top - topLeft - topCenter - topRight - center - centerLeft - centerRight - bottom - bottomLeft - bottomCenter - bottomRight

API中还有很多其它的选项来自定义通知中的文本,动画,速度,按钮以及其它配置。

此外按钮,打开关闭通知,队列控制还有各种各样的回调函数。

用法

安装

通过 Bower 安装

bower install noty

通过 npm 安装

npm install noty

使用方法

1、引用 jQuery 和下载的 noty 文件

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<script type="text/javascript" src="js/noty/packaged/jquery.noty.packaged.min.js"></script>

2、创建一个 noty

我们写了一个 helper 方法来使得创建一个 noty 是很容易的。所以你可以像这样使用:noty(properties)

这会返回一个 noty 的 javascript 对象(不是一个 jquery dom 对象,但是你可以通过这个对象来获取 dom),同样,你看也可以赋给 "text" 选项任何的 html 内容。

var n = noty({text: 'noty - a jquery notification library!'});

动画

1、和 jQuery animate properties 一起使用

var n = noty({
    text: 'NOTY - a jquery notification library!',
    animation: {
        open: {height: 'toggle'}, // jQuery animate function property object
        close: {height: 'toggle'}, // jQuery animate function property object
        easing: 'swing', // easing
        speed: 500 // opening & closing animation speed
    }
});

2、和 Animate.css 一起使用(推荐)

Animate.css 包含了一大堆的酷的,有趣的,跨浏览器的 CSS3 动画效果,用在我们的项目中是非常棒的。

var n = noty({
    text: 'NOTY - a jquery notification library!',
    animation: {
        open: 'animated bounceInLeft', // Animate.css 样式名
        close: 'animated bounceOutLeft', // Animate.css class 样式名
        easing: 'swing', // 不可用 - 不需要
        speed: 500 // 不可用 -不需要
    }
});

选项

可用的选项都列在下面了:

$.noty.defaults = {
    layout: 'top',
    theme: 'defaultTheme', // or 'relax'
    type: 'alert',
    text: '', // 可以是 html 或者字符串
    dismissQueue: true, // 如果你想使用队列功能,就将这个值设置成 true
    template: '<div class="noty_message"><span class="noty_text"></span><div class="noty_close"></div></div>',
    animation: {
        open: {height: 'toggle'}, // or Animate.css class names like: 'animated bounceInLeft'
        close: {height: 'toggle'}, // or Animate.css class names like: 'animated bounceOutLeft'
        easing: 'swing',
        speed: 500 // opening & closing animation speed
    },
    timeout: false, // delay for closing event. Set false for sticky notifications
    force: false, // adds notification to the beginning of queue when set to true
    modal: false,
    maxVisible: 5, // you can set max visible notification for dismissQueue true option,
    killer: false, // for close all notifications before show
    closeWith: ['click'], // ['click', 'button', 'hover', 'backdrop'] // backdrop click will close all notifications
    callback: {
        onShow: function() {},
        afterShow: function() {},
        onClose: function() {},
        afterClose: function() {},
        onCloseClick: function() {},
    },
    buttons: false //  按钮数组
};

自定义容器

像这样

var n = $('.custom_container').noty({text: 'NOTY - a jquery notification library!'});

主题

使用 Javascript 或者 CSS 都能很轻松地定制 NOTY 的主题。

主题的结构在 noty/themes/default.js 文件中。你可以复制-粘贴这个文件来修改。

不要忘记将你修改后的主题 javascript 文件引入到你的项目中。

<script type="text/javascript" src="js/noty/themes/your_new_theme.js"></script>

然后你就可以像下面这样来设置你的新主题:

var n = noty({
    text: 'NOTY - a jquery notification library!',
    theme: 'your_new_theme',
});

按钮

我们可以像下面这样用一个数组来设置按钮对象:

noty({
    text: 'Do you want to continue?',
    buttons: [
        {addClass: 'btn btn-primary', text: 'Ok', onClick: function($noty) {

                // this = button element
                // $noty = $noty element

                $noty.close();
                noty({text: 'You clicked "Ok" button', type: 'success'});
            }
        },
        {addClass: 'btn btn-danger', text: 'Cancel', onClick: function($noty) {
                $noty.close();
                noty({text: 'You clicked "Cancel" button', type: 'error'});
            }
        }
    ]
});

回调

NOTY 目前有5个回调选项。

onShow - afterShow - onClose - afterClose - afterCloseClick

API

$.noty.get(id) - 返回一个 NOTY javascript 对象

$.noty.close(id) - 关闭一个 NOTY - 和 var n = noty({text: 'Hi!'})); n.close() 是一样的效果

$.noty.clearQueue() - 清空通知队列

$.noty.closeAll() - 关闭所有通知

$.noty.setText(id, text) - 更新通知的文本 - 和 var n = noty({text: 'Hi!'})); n.setText('Hi again!'); 一样

$.noty.setType(id, type) - 更新通知的类型 -和 var n = noty({text: 'Hi!'})); n.setType('error'); 一样

noty 相关推荐
对于该库,你有要推荐的内容么?点此提交推荐
请文明评论,与人为善,比聪明更重要!
评论