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

前端设计/UI 160 0 2024-04-10

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' });
        }
        */

    });


上一篇:Fomantic-UI加载器Loader(加载loading)使用讲解

下一篇:没有了

讨论数量:0

请先登录再发表讨论。 2024-06-14

天涯网魂
3 杠 5 星
TA 的文章
TA 的随言
TA 的资源链