Toastmessage 的使用

一:jquery.toastmessage.js 概述

toastmessage.js 是jQuery插件提供的消息通知提示框。有着较好的用户体验,它有四种不同的消息类型:notice(通知) success(成功) warning(警告)error(错误)。
具体说明参考官方文档:https://github.com/akquinet/jquery-toastmessage-plugin/wiki

二:具体使用

第一步:搭建环境,引入需要的文件

   ①. 在web动态项目中首先要载入jQuery的js文件(此插件需要jQuery的支持);
   ②. 引入jquery.toastmessage.js (源码文件);
   ③. 引入jquery.toastmessage.css (需要的样式文件);
   ④. 自定义自己项目中需要的js(如:textMessage.js)文件.       

第二步:调用相应的方法
在textMessage.js中定义消息类型以及提示消息内容:

// 成功消息
function showSuccessToast(){
    $().toastmessage('showSuccessToast', 'This is Sussess Toast');
}

以上是以Success为例说明:
    showSuccessToast() 为事件触发的方法名;
    showSuccessToast 为调用jquery.toastmessage.js 中 成功消息的方法;
    This is Sussess Toast 为提示消息的内容。
    其他notice,warning, error使用方法一致。

测试效果
实现后的效果图
当然,除了使用默认效果的之外,还可以对方法的属性进行自定义,还是以success为例:

//自定义成功消息
function showStickySuccessToast(){
    myToast = $().toastmessage('showToast', {
        stayTime: 3000,
        text: 'Success Dialog which is sticky',
        sticky: true,
        position: 'middle-right',
        type: 'success',
        closeText: '',
        close: function(){
            console.log("toast is closed...");
        }
    });
}

自定义可以对显示的位置,停留的时间,提示内容,类型,关闭按钮,关闭后的回调函数等设置。
最后还有一个移除方法:

//移除消息
function removeToast(){
    $().toastmessage('removeToast', myToast);
}

移除方法可以对名为 “myToast” 的方法进行从页面中移除操作。
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值