原创Fomantic-UI通知Toast的使用讲解

Toast通知信息一般在浏览器右上角、右下角、上中间弹出

简单调用：

$.toast({

 message: 'I am a toast, nice to meet you !'

});

或是

$("dom").toast();

    $.toast({
        //标题
        //title: '欢迎您',

        //内容，支持html
        message: '我是一个toast通知，很高兴见到你！',

        //样式，参数：info/success/warning/error/ui message/image/center aligned，更多参数css样式
        //class: 'info',
        /*
        className: {
            toast: 'ui message'
        },
        */

        //显示图标，具体参数查看icon图标库
        showIcon: 'smile outline',

        //显示图片
        //showImage: '/static/images/avatar/nan.jpg',
        //显示图片样式，参数：mini/tiny/small/avatar
        //classImage: 'tiny',

        //显示进度条，参数：bottom/top
        //showProgress: 'top',
        //进度条颜色，参数：red/orange/yellow/olive/green/teal/blue/violet/purple/pink/brown/grey/black
        //classProgress: 'green',
        //进度条方向 从左到右
        //progressUp: true,

        //显示关闭按钮,参数：true 或 'left'
        //closeIcon: 'left',

        //关闭时间，默认3000, 如为0则不关闭，也可以设置为auto
        //displayTime: 5000,

        //显示位置，参数：top right/top center/top left/bottom right/bottom center/bottom left/centered/top attached/bottom attached
        //position: 'top center',

        //多个通知排列方式，true为横向，false纵向
        //horizontal: true,

        //鼠标滑过进度条停止
        //closeOnClick: false,

        //动画效果，参数：参考Transition动画
        /*
        transition: {
            showMethod: 'vertical flip', //显示动画
            showDuration: 500,   //显示时间
            hideMethod: 'scale', //隐藏动画
            hideDuration: 500,   //隐藏时间
            //closeEasing: 'easeOutCubic',
            //closeDuration: 500,
        }
        */

        //显示按钮
        /*
        actions: [{
            text: '取消',
            class: 'red',
            icon: 'times',
            click: function () { }
        }, {
            text: '确认',
            class: 'green',
            icon: 'check',
            click: function () { }
        }],
        //显示按钮样式，参数：basic/left/top/bottom/vertical/centered/attached
        classActions: 'attached'
        */

        //事件回调
        //onShow: function(){ }, //显示前回调
        //onVisible: function(){ }, //显示后回调
        //onClick: function(){ }, //点击回调
        //onHide: function(){ }, //隐藏前回调
        //onHidden: function(){ }, //隐藏后回调
        //onRemove: function(){ }, //销毁前回调
        /*拒绝和同意回调，注意此时需要设置按键
        onDeny: function () {
            $.toast({ message: 'Wait not yet!' });
            return false;
        },
        onApprove: function () {
            $.toast({ message: 'Approved' });
        }
        */

    });