toastr.js组件

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

官方文档以及源码

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

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

引入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');

效果如下:

推荐学习网址: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. Unity中各种格式计时器

    问题背景: 在开发游戏过程中,很多地方需要倒计时,但是各种地方要的倒计时格式不同,倒计时都会写,在这里不详细介绍,写的目的就是为了记录一下,方便复用(为了在开发过程中不为了小问题浪费不必要脑细胞) 1 ...

  2. sql 随笔更新

    SELECT DISTINCT(p.`id`), p.`id` , v.`full_name` , CONCAT(LEFT(v.mobile, 7), '****') , DATE_FORMAT(DA ...

  3. python3学习笔记十六

    1.       http协议   GET请求:数据放在url后面 POST请求:数据放在请求体中 <!DOCTYPE html> <html lang="en" ...

  4. Redis的n种妙用,分布式锁,分布式唯一id,消息队列,抽奖……

    介绍 redis是键值对的数据库,常用的五种数据类型为字符串类型(string),散列类型(hash),列表类型(list),集合类型(set),有序集合类型(zset) Redis用作缓存,主要两个 ...

  5. angular/cli 常用指令

    1.安装@angular/cli npm install -g @angular/cli 2.更新@angular/cli npm uninstall -g @angular/cli npm cach ...

  6. MIUI11系统怎么样启用root权限的教程

    MIUI11系统如何启用了ROOT超级权限?做开发的人都知道,安卓机器有ROOT超级权限,一旦手机启用了root相关权限,可以实现更多的功能,举个例子做开发的人公司的营销部门的妹纸,使用较多营销工具都 ...

  7. sql server 实现split功能 行转列

    --實現split功能的函數create function [dbo].[func_split]( @SourceSql varchar(max), @StrSeprate varchar(10))r ...

  8. Kubernetes - 腾讯蓝鲸配置平台(CMDB)开源版部署

    蓝鲸CMDB 蓝鲸配置平台(蓝鲸CMDB)是一个基于运维场景设计的企业配置管理服务.主要功能: 1. 拓扑化的主机管理:主机基础属性.主机快照数据.主机归属关系管理 2. 组织架构管理:可扩展的基于业 ...

  9. .NET英文技术文章导读(2017-02-09)

    关键字:Docker..NET Core.Apache.ASP.NET Core.Logic App.C#7..NET Standard   使用Docker和.NET Core构建DockNetFi ...

  10. Codeforces 438E. The Child and Binary Tree 多项式,FFT

    原文链接www.cnblogs.com/zhouzhendong/p/CF438E.html 前言 没做过多项式题,来一道入门题试试刀. 题解 设 $a_i$ 表示节点权值和为 $i$ 的二叉树个数, ...