toastr操作完成提示框
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操作完成提示框的更多相关文章
- 60、常规控件(3)Snackbar-可操作的提示框,Toast升级版
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app=&quo ...
- JS组件系列——Bootstrap寒冬暖身篇:弹出框和提示框效果以及代码展示
前言:对于Web开发人员,弹出框和提示框的使用肯定不会陌生,比如常见的表格新增和编辑功能,一般常见的主要有两种处理方式:行内编辑和弹出框编辑.在增加用户体验方面,弹出框和提示框起着重要的作用,如果你的 ...
- Bootstrap:弹出框和提示框效果以及代码展示
前言:对于Web开发人员,弹出框和提示框的使用肯定不会陌生,比如常见的表格新增和编辑功能,一般常见的主要有两种处理方式:行内编辑和弹出框编辑.在增加用户体验方面,弹出框和提示框起着重要的作用,如果你的 ...
- JS组件Bootstrap实现弹出框和提示框效果代码
这篇文章主要介绍了JS组件Bootstrap实现弹出框和提示框效果代码,对弹出框和提示框感兴趣的小伙伴们可以参考一下 前言:对于Web开发人员,弹出框和提示框的使用肯定不会陌生,比如常见的表格新增和编 ...
- Bootstrap实现弹出框和提示框效果代码
一.Bootstrap弹出框使用过JQuery UI应该知道,它里面有一个dialog的弹出框组件,功能也很丰富.与jQuery UI的dialog类似,Bootstrap里面也内置了弹出框组件.打开 ...
- Bootstrap篇:弹出框和提示框效果以及代码展示
前言:对于Web开发人员,弹出框和提示框的使用肯定不会陌生,比如常见的表格新增和编辑功能,一般常见的主要有两种处理方式:行内编辑和弹出框编辑.在增加用户体验方面,弹出框和提示框起着重要的作用,如果你 ...
- js弹出框、对话框、提示框、弹窗总结
一.JS的三种最常见的对话框 //====================== JS最常用三种弹出对话框 ======================== //弹出对话框并输出一段提示信息 funct ...
- JQUERY 简单易用的提示框插件
业务开发过程中,为了避免用户的误操作,提示框是必要的,于是琢磨出了下面这个使用,方便的提示框 还要引入遮罩层的样式如下: /*弹出层*/.input{height: 32px;border: 1px ...
- js js弹出框、对话框、提示框、弹窗总结
js弹出框.对话框.提示框.弹窗总结 一.JS的三种最常见的对话框 //====================== JS最常用三种弹出对话框 ======================== //弹 ...
随机推荐
- Django2.0 和 Django1 中的正则匹配问题
2.0内的path匹配正则时候无效时,导入re_path即可 from django.urls import path,re_path from king_admin import views url ...
- 使用JMeter的HTTP代理服务器录制app脚本
1.添加一个线程组 2.添加一个HTTP代理服务器 3.设置手机网络连接 4.手机安装证书 a.进入jmeter安装目录,在bin目录下找到ApacheJMeterTemporaryRootCA.cr ...
- linux常用命令及使用技巧(二)
ls显示指定工作目录下的内容,同windows中的dir命令 pwd命令显示当前工作目录 date命令,显示或修改系统时间与日期 passwd命令,设置用户密码 su命令改变用户身份 clear命令, ...
- So, How About UMD模块-Universal Module Definition
在ES6模块解决方案出现之前,工具库或包常用三种解决方案提供对外使用的接口,最早是直接暴露给全局变量,比如我们熟知的Jquery暴露的全局变量是$,Lodash对外暴露的全局变量是_,后来出现了AMD ...
- Javascript数据结构与算法--栈的实现与用法
栈数据结构 栈是一种遵从后进先出(LIFO)原则的有序集合.新添加的或者待删除的元素都保存在栈的同一端,称作栈顶,另一端就叫栈底.在栈里,新元素都靠近栈顶,旧元素都接近栈底. 我们在生活中常能看到栈的 ...
- android新窗口以及传值
1,新建一个activity,如Activity2,在清单文件AndroidManifest.xml 中 application节点中 增加一个新窗体: ................. </ ...
- java集合遍历的几种方式总结及比较
集合类的通用遍历方式, 用迭代器迭代: Iterator it = list.iterator(); while(it.hasNext()) { Object obj = it.next(); } ...
- 【webpack系列】从零搭建 webpack4+react 脚手架(四)
经过三个章节的学习,你已经学会搭建了一个基于webpack4的react脚手架.如果要更改配置,比如,你希望把编译后的js文件和css文件等单独放dist下的static目录下,你想想,是不是有点麻烦 ...
- day21.模块和包
博客整理来源:http://www.cnblogs.com/Eva-J/articles/7292109.html 模块 1.什么是模块 常见的场景:一个模块就是一个包含了python定义和声明的文件 ...
- C++ 初读迭代器
迭代器 这是个啥? string对象或vector对象可以通过下标访问每一个元素,迭代器也具有同样的效果.那又有什么不同呢?事实上并不是所有的容器到可以使用下标访问每一个元素,即在容器上迭代器更具普适 ...