3月31th

jquery插件之自定义提示插件noty

DIY前端设计我来说两句!

如今很多形形色色的SNS类的网站,会员的黏性很高,网站会员们很喜欢在网站上互相的交流,而这类型的网站往往少不了一些通知的特效。 今天我为大家介绍一款实用性很强的通知效果的jquery插件。它名为noty,此插件提供了 提醒-成功-错误-警告-消息-确认 等提示信息在基本的提示窗口里,其中,里面的每个消息都是被添加到了一个队列里面。  值得一提的是,此提示模块可以放在屏幕的任何地方,用户可根据需求自定义的摆放。这个是官网,各位可以去查阅:jquery插件官网 http://ned.im/noty

关键代码:

$.noty.defaults = {

    layout: 'top',

    theme: 'defaultTheme',

    type: 'alert',

    text: '', // can be html or string

    dismissQueue: true, // If you want to use queue feature set this true

    template: '',

    animation: {

        open: {height: 'toggle'},

        close: {height: 'toggle'},

        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']

    callback: {

        onShow: function() {},

        afterShow: function() {},

        onClose: function() {},

        afterClose: function() {}

    },

    buttons: false // an array of buttons

};

单击下载源码案例

本文出自:DIY博客园,链接:http://www.diybloghome.com/frontlogy/747.html,转载请注明!