jquery noty插件 消息通知 01

jquery noty

noty 是jquery的一个通知插件，有非常好的特性来代替传统的提示对话框。

---

引用noty:

noty是jquery的插件，首先必须先引入jquery.js

<script type="text/javascript" src="demo/jquery-1.7.2.min.js"></script>

其次是noty的主文件，如果引入的是非packaged.js需要在引入位置对应的脚本, eg:center.js

<script type="text/javascript" src="js/noty/packaged/jquery.noty.packaged.js"></script>

最后是noty的主题样式文件

<script type="text/javascript" src="js/noty/packaged/thems/default.js"></script>

---

功能介绍

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

---

第一个DEMO

$(document).ready(function(){
    noty({
        //提示信息
        text: 'this is the first demo'，
        //通知框的位置
        layout: 'center',
        //提示框类型
        type:'alert',
        //提示框主题
        theme: 'defaultTheme',
        //5s后自动消失
        timeout: 5000
    });
});

---

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, // 可以设置最多显示多少个通知消息，默认值为5
    killer: false, // 在显示这个noty之前，将所有的noty关掉
    closeWith: ['click'], // 关闭的方式，默认是click['click', 'button', 'hover']
    callback: {     // 设置回调函数
        onShow: function() {},
        afterShow: function() {},
        onClose: function() {},
        afterClose: function() {}
    },
    buttons: false // 定义一个按钮数组
};

自定义容器

$("#con").noty({
    text:'this is the first demo',
    layout: 'center',
    type: 'alert',
    theme: 'defaultTheme',
    timeout: 10000
});

---

–2015/12/15

---