【JS】jquery通知插件toastr

toastr是一款非常棒的基于jquery库的非阻塞通知提示插件,toastr可设定四种通知模式:成功,出错,警告,提示,而提示窗口的位置,动画效果都可以通过能数来设置,在官方站可以通过勾选参数来生成JS,非常的方便使用。

使用demo地址:http://www.jq22.com/yanshi476(可获取toastr不同的配置方式)

1、兼容性

【JS】jquery通知插件toastr

2、toastr使用

  • 引入核心文件
 <span style="font-family:Comic Sans MS;">
<link href="toastr.css" rel="stylesheet"/>
<link rel="stylesheet" href="css/toastr.min.css" />
<script type="text/javascript" src="js/jquery-2.1.0.js" ></script>
<script type="text/javascript" src="js/toastr.js" ></script></span>
  • 编写html代码
    •  //常规消息提示,默认背景为浅蓝色
      toastr.info("你有新消息了!");
      //显示一个没有标题的信息框(蓝色)
      toastr.info("I am yanying");
      //显示一个没有标题的警告框(橘黄色)
      toastr.warning("I am yanying");
      //显示一个没有标题的成功提示(绿色)
      toastr.info("I am yanying");
      //显示一个没有标题的错误提示(深红色)
      toastr.error("I am yanying");
      //清除一个错误
      toastr.clear();
  • 自定义选项
 $(function () {

         $('#showtoast').click(function () {
toastr.options = { closeButton: true,//是否显示关闭按钮
debug: false,//是否使用debug模式
progressBar: true,//是否显示进度条,当为false时候不显示;当为true时候,显示进度条,当进度条缩短到0时候,消息通知弹窗消失
positionClass: "toast-top-right",//弹出窗的位置
onclick: null,
showDuration: "300",//显示的动画时间
hideDuration: "30000",//消失的动画时间
timeOut: "5000",//展现时间
extendedTimeOut: "1000",//加长展示时间
showEasing: "swing",//显示时的动画缓冲方式
hideEasing: "linear",//消失时的动画缓冲方式
showMethod: "fadeIn",//显示时的动画方式
hideMethod: "fadeOut"//消失时的动画方式
}; var $toast = toastr['info']('您有新消息了!'); }); })

设置选项

<1>positionClass: 'toast-top-right'

位置信息,消息弹窗显示的位置,可以显示的位置对应的值

  1. toast-top-right
  2. toast-botton-right
  3. toash-bottom-left
  4. toast-top-left
  5. toast-top-full-width 这个是在网页顶端,宽度铺满整个屏幕
  6. toast-bottom-full-width
  7. toast-top-center顶端中间
  8. toast-bottom-center

<2>toastr['error']('I am yanying', 'title');

其中的error为显示的通知的样式类型,有4种选择

  1. success 成功,绿色
  2. info 信息,蓝色
  3. warning,警告,橙色
  4. error,错误,深红色
其中第一个参数为显示的内容,第二个参数为显示的标题,标题可以省略

效果展示

【JS】jquery通知插件toastr

自定义选项,有进度条和关闭按钮效果。

【JS】jquery通知插件toastr

上一篇:[Angularjs]ng-class,ng-class-even,ng-class-odd


下一篇:c语言实现一个链表