学习Jquery noty

最近由于项目中使用到了jQuery noty，通过看官方文档之后，可以按时完成任务，但是不够系统。也没有进行整理。今天来整理一下。

介绍

• jQuery noty document：http://ned.im/noty/
• jQuery noty gitHub：https://github.com/needim/noty

根据我的理解，试着翻一下jQuery noty document 中的介绍内容：

• noty是一个jQuery插件，可以很方便的创建以下几种消息：alert（弹出框消息）、 success（成功消息）、error（错误消息）、warning（警告消息）、information（提示 消息）、confirmation（确认消息）
• 每一个通知信息，都会添加到一个消息队列中。
• 通知信息支持以下几种位置：top（正上）topLeft（左上） topCenter （中上） topRight（右上） center （页面中间） centerLeft （中间居左） centerRight （中间居右） bottom （页面底部） bottomLeft （底部居左） bottomCenter （底部居中） bottomRight（底部局右）
• 通过document中的演示代码，可以从效果上直观的明白具体是那个位置
• 通过给出的API可以定制noty的文本（可以是HTML）、动画效果、显示的速度、可以定制按钮
• 提供回调函数，在点击确定等按钮的时候可以使用

安装

• 安装jQuery：http://jquery.com/download/#Current_Release
• 下载jQuery noty：https://github.com/needim/noty/releases

创建

• 引用jQuery和noty到页面中
• 创建方式var n =noty({text: 'noty - a jquery notification library!'});
• 当创建一个noty的时候，会返回一个noty 对象

选项

$.noty.defaults = {
    layout: 'top',      // 显示的位置
    theme: 'defaultTheme',  // 使用的主题：这个是默认主题，也可以定制
    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'},
        close: {height: 'toggle'},
        easing: 'swing',
        speed: 500 // 打开、关闭的速度
    },
    timeout: false, // 可以设置多少时间超时：数字、true、false
    force: false, // adds notification to the beginning of queue when set to true（没看懂）
    modal: false,
    maxVisible: 5, // 可以设置最多显示多少个通知消息
    killer: false, // 在显示这个noty之前，将所有的noty关掉
    closeWith: ['click'], // 关闭的方式，默认是click['click', 'button', 'hover']
    callback: {     // 设置回调函数
        onShow: function() {},
        afterShow: function() {},
        onClose: function() {},
        afterClose: function() {}
    },
    buttons: false // 定义一个按钮数组
};

自定义容器

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

主题

noty已经内容了noty/themes/default.js文件中，可以自己修改这个文件，然后使用这个主题属性。

按钮

通过添加按钮数组来添加按钮

noty({
  text: 'Do you want to continue?',
  buttons: [
    {addClass: 'btn btn-primary',     // 确认按钮样式
        text: 'Ok',                   // 确认按钮的文字
        onClick: function($noty) {    

        // this = button element      //  this 就是button element
        // $noty = $noty element      // $noty是 noty element

        $noty.close();                // 关闭这个noty
        noty({text: 'You clicked "Ok" button', type: 'success'});   // noty中还可以使用noty
      }
    },
    {addClass: 'btn btn-danger', text: 'Cancel', onClick: function($noty) { // 第二个button
        $noty.close();
        noty({text: 'You clicked "Cancel" button', type: 'error'});
      }
    }
  ]
});

回调

目前支持onShow 、 afterShow 、 onClose 、 afterClose这四种回调

API

• $.noty.get(id) 根据返回一个noty对象
• $.noty.close(id) 关闭这个noty
• $.noty.clearQueue() 清空序列
• $.noty.closeAll() 关闭所有noty
• $.noty.setText(id, text) 修改这个noty的文本
• $.noty.setType(id, type) 修改这个noty的类型

补充

• 下载完noty之后，zip包中有一个demo，可以查看noty的用法
• 每创建完一个noty，返回一个noty对象。通过这个对象的options属性可以获取生成noty的id。目测这个id是唯一的。
• 默认maxVisible为5