欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

toastr操作完成提示框

程序员文章站 2023-08-26 18:15:54
toastr.js组件 关于信息提示框,项目中使用的是toastr.js这个组件,这个组件最大的好处就是异步、无阻塞,提示后可设置消失时间,并且可以将消息提示放到界面的各个地方。 官方文档以及源码 源码网站:http://codeseven.github.io/toastr/ api:http:// ......

toastr.js组件

  关于信息提示框,项目中使用的是toastr.js这个组件,这个组件最大的好处就是异步、无阻塞,提示后可设置消失时间,并且可以将消息提示放到界面的各个地方。

 

官方文档以及源码

  源码网站:

  api:

 

引入js和css  

    <link href="/static/js/toastr/toastr.css" rel="stylesheet">  
    <!--消息提示-->
    <script src="/static/js/toastr/toastr.js"></script>

 

设置提示框位置: toastr.options.positionclass = 'toast-bottom-right';

如toast-bottom-right表示下右、toast-bottom-center表示下中、toast-top-center表示上中等

<script type="text/javascript">
          toastr.options.positionclass = 'toast-bottom-right';
  </script>

 

在js中使用

toastr.success('提交数据成功');
toastr.error('error');
toastr.warning('只能选择一行进行编辑');
toastr.info('info');

效果如下:

toastr操作完成提示框

toastr操作完成提示框

toastr操作完成提示框

toastr操作完成提示框

 

推荐学习网址: