toastr.js组件

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

官方文档以及源码

  源码网站:http://codeseven.github.io/toastr/

  api:http://www.ithao123.cn/content-2414918.html

引入js和css  

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

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

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

  1. <script type="text/javascript">
  2. toastr.options.positionClass = 'toast-bottom-right';
  3. </script>

在js中使用

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

效果如下:

推荐学习网址:https://codeseven.github.io/toastr/demo.html

toastr操作完成提示框的更多相关文章

  1. 60、常规控件(3)Snackbar-可操作的提示框,Toast升级版

    <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app=&quo ...

  2. JS组件系列——Bootstrap寒冬暖身篇:弹出框和提示框效果以及代码展示

    前言:对于Web开发人员,弹出框和提示框的使用肯定不会陌生,比如常见的表格新增和编辑功能,一般常见的主要有两种处理方式:行内编辑和弹出框编辑.在增加用户体验方面,弹出框和提示框起着重要的作用,如果你的 ...

  3. Bootstrap:弹出框和提示框效果以及代码展示

    前言:对于Web开发人员,弹出框和提示框的使用肯定不会陌生,比如常见的表格新增和编辑功能,一般常见的主要有两种处理方式:行内编辑和弹出框编辑.在增加用户体验方面,弹出框和提示框起着重要的作用,如果你的 ...

  4. JS组件Bootstrap实现弹出框和提示框效果代码

    这篇文章主要介绍了JS组件Bootstrap实现弹出框和提示框效果代码,对弹出框和提示框感兴趣的小伙伴们可以参考一下 前言:对于Web开发人员,弹出框和提示框的使用肯定不会陌生,比如常见的表格新增和编 ...

  5. Bootstrap实现弹出框和提示框效果代码

    一.Bootstrap弹出框使用过JQuery UI应该知道,它里面有一个dialog的弹出框组件,功能也很丰富.与jQuery UI的dialog类似,Bootstrap里面也内置了弹出框组件.打开 ...

  6. Bootstrap篇:弹出框和提示框效果以及代码展示

     前言:对于Web开发人员,弹出框和提示框的使用肯定不会陌生,比如常见的表格新增和编辑功能,一般常见的主要有两种处理方式:行内编辑和弹出框编辑.在增加用户体验方面,弹出框和提示框起着重要的作用,如果你 ...

  7. js弹出框、对话框、提示框、弹窗总结

    一.JS的三种最常见的对话框 //====================== JS最常用三种弹出对话框 ======================== //弹出对话框并输出一段提示信息 funct ...

  8. JQUERY 简单易用的提示框插件

    业务开发过程中,为了避免用户的误操作,提示框是必要的,于是琢磨出了下面这个使用,方便的提示框 还要引入遮罩层的样式如下: /*弹出层*/.input{height: 32px;border: 1px ...

  9. js js弹出框、对话框、提示框、弹窗总结

    js弹出框.对话框.提示框.弹窗总结 一.JS的三种最常见的对话框 //====================== JS最常用三种弹出对话框 ======================== //弹 ...

随机推荐

  1. HashMap 学习 (JDK8)

    1.hashmap中hash函数的实现中,异或运算操作的结果是什么,为什么要做这样的异或运算 static final int hash(Object key) { int h; return (ke ...

  2. Servlet校验密码之Mariadb篇

    Servlet校验密码之Mariadb篇 先放图-- 数据库: 效果图: 整体来说与上一篇差距不大,这次主要是采用数据库来进行校验,我使用的是Mariadb,安装与配置不用我说 主要有一点,导入连接器 ...

  3. brew本地安装包

    brew --cache # 输出本地缓存 一般位置 ~/Library/Caches/Homebrew # 将下载下来文件mv到缓存路径 download目录 # 重命名成没有下载下来的文件名 xx ...

  4. Excel—数组

    SUMPRODUCT(数组求和函数)和SUM是一样的,只不过数组写完公式后需要三键合一出结果(ctrl+shift+enter),用SUMPRODUCT写公式写完直接敲击enter就行了 函数语法:S ...

  5. vuex脑图

  6. 如何在Ubuntu 18.04中安装VMware Workstation Player

    参考链接 如何在Ubuntu 18.04中安装VMware Workstation Player https://www.sysgeek.cn/ubuntu-18-04-install-vmware- ...

  7. java 基本数据类型的取值

    一. 1.基本类型:short 二进制位数:16 包装类:java.lang.Short 最小值:Short.MIN_VALUE=-32768 (-2的15此方)最大值:Short.MAX_VALUE ...

  8. Axure RP 8 软件介绍

    介绍 此软件可以用于制作快速原型,也可以绘制中保真原型草图. 应用人群:产品经理.交互设计师.UI设计师.网页设计师. 原型分类:低保真(手绘草图).中保真(使用相关软件绘制出来的).高保真(包含效果 ...

  9. centos7.x 安装 fastDFS

    环境准备 使用的系统软件 名称 说明 centos 7.x libfatscommon FastDFS分离出的一些公用函数包 FastDFS FastDFS本体 fastdfs-nginx-modul ...

  10. docker“少折腾”

    1.docker镜像加速 新版的 Docker 使用 /etc/docker/daemon.json(Linux) 或者 %programdata%\docker\config\daemon.json ...