注册    登录
最新消息: 本以为花钱买了那个amh的板面可以让网站更稳定,结果搞得整 个网站运行出错,真是赔了夫人又折兵,对不起大家了。最新版jquery-2.1.1下载  ,在线的 jquery API使用手册, 稳定版jquery.mobile-1.3.2下载

可自定义的jquery通知提示插件 Toaster

UI fishcity 4739浏览

jquery通知提示Toaster

Toaster是一款广泛受人赞誉的极具灵活性的jquery通知提示插件,Toaster可设定四种通知模式:成功,提示,警告,危险,默认配置一套CSS样式,方便用户直接使用,如果样式不合项目要求,你可完全自定义CSS与模板。

jquery实例:toaster使用方法

引入核心文件,插件需要Bootstrap 3.0+

<link rel="stylesheet" href="http://libs.useso.com/js/bootstrap/3.2.0/css/bootstrap.min.css">
<link rel="stylesheet" href="http://libs.useso.com/js/bootstrap/3.2.0/css/bootstrap-theme.min.css">
<script src="http://libs.useso.com/js/jquery/2.1.1/jquery.min.js"></script>
<script src="http://libs.useso.com/js/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<script src="jquery.toaster.js"></script>

写入JS实现效果

$(function(){
   //成功提示信息
    $.toaster({ title : 'Success', priority : 'success', message : 'Whatever you did worked!' });
  
   //危险提示信息
    $.toaster({ title : 'Bad News', priority : 'danger', message : 'Whatever you did failed!' });
    
    //只传一个字符串参数,默认为成功提示信息
    $.toaster('Whatever you did worked!');
})

属性

priority有四个属性,配置了不同的颜色。

  1. success

  2. info

  3. warning

  4. danger

自宝义

toaster插件允许您改变一切设置,如CSS样式,模板等。让我们看看默认设置,然后我们再进行自定义!

 'toaster'         :
    {
        'id'        : 'toaster',
        'container' : 'body',
        'template'  : '<div></div>',
        'class'     : 'toaster',
        'css'       :
        {
            'position' : 'fixed',
            'top'      : '10px',
            'right'    : '10px',
            'width'    : '300px',
            'zIndex'   : 50000
        }
    },

    'toast'       :
    {
        'template' :
        '<div class="alert alert-%priority% alert-dismissible" role="alert">' +
            '<button type="button" class="close" data-dismiss="alert">' +
                '<span aria-hidden="true">&times;</span>' +
                '<span class="sr-only">Close</span>' +
            '</button>' +
            '<span class="title"></span>: <span class="message"></span>' +
        '</div>',

        'css'      : {},
        'cssm'     : {},
        'csst'     : { 'fontWeight' : 'bold' },

        'fade'     : 'slow',

        'display'    : function ($toast)
        {
            return $toast.fadeIn(settings.toast.fade);
        },

        'remove'     : function ($toast, callback)
        {
            return $toast.animate(
                {
                    opacity : '0',
                    padding : '0px',
                    margin  : '0px',
                    height  : '0px'
                },
                {
                    duration : settings.toast.fade,
                    complete : callback
                }
            );
        }
    },

    'debug'        : false,
    'timeout'      : 1500,
    'stylesheet'   : null,
    'donotdismiss' : []
}

设置对象的属性有:

Property Default Description
toaster object 请看下文
toast object 请看下文
debug false 是否开启debug模式
timeout 1500 调用toast.remove 方法前停留的时间
stylesheet null 样式文件路径
donotdismiss array 默认为空。自动释放。

toaster

toaster部分将会在所有的toast通知中出现。这部分的设置允许我们识别和配置toaster。

Property Default Description
id toaster toaster 元素的ID
container body 包含toaster的元素
template <div></div> 用于创建 toaster 元素的模板.
class toaster toster的样式类
css object 应用到toster的DOM元素样式。

toast

toast是通知模板,将用于创建所有toaster通知。本部分用于定义该模板及其相关属性。

Property Default Description
template alert 通知模板
css object 各 toast 的通用CSS
cssm object 应用于各种信息提示的样式.
csst object 应该于标题的样式
fade slow 定义动画的速度
display function 回调处理显示通知元素。
remove function 回调处理删除通知元素

如果你想要toaster元素在不同的速度比他们淡入淡出,您可以使用此修改:

$.toaster({ settings :
{
    toast :
    {
        fade : [ in : 'fast', out : 'slow' ],

        display : function ($toast)
        {
            return $toast.fadeIn(settings.toast.fade.in);
        },

        remove : function ($toast, callback)
        {
            return $toast.animate(
            {
                opacity: '0',
                height: '0px'
            },
            {
                duration: settings.toast.fade.out,
                complete: callback
            });
        }
    }
}});

当您自定义设置添加属性时请注意!例如,如果你不想通知淡入/淡出,而是希望他们滑动,您可以使用以下代码:

$.toaster({ settings :
{
    toast :
    {
        fade : [ in : 'fast', out : 'slow' ],
        easing : [ in : 'swing', out : 'linear' ],

        display : function ($toast)
        {
            return $toast.slideToggle(settings.toast.fade.in, settings.toast.easing.in);
        },

        remove : function ($toast, callback)
        {
            return $toast.slideToggle(settings.toast.fade.out, settings.toast.easing.out, callback);
        }
    }
}});

转载请注明:jQ酷 » 可自定义的jquery通知提示插件 Toaster

下载地址:本站下载 | 百度云 | 官方下载
下载说明:
☉如果您发现本文件已经失效不能下载,请联系站长修正!
☉如果您下载的文件出现解压不了或文件受损等情况,请选择其他下载点重新下载。
☉下载本站资源,如果服务器暂不能下载请过一段时间重试!
☉有小部分资源需要解压密码,请输入:jqcool.net。
☉本站提供的所有资源仅供学习研究与参考,请勿用于商业用途。