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. jsp中一个标签两种方式绑定两个click事件导致未执行的问题

    近日,在开发过程中,写了一个标签 <li id="a1" onclick="doSomething()">...</li> 在js页面中 ...

  2. vue computed、methods、watch的区别

    1.computed(计算属性)computed是计算属性,事实上和和data对象里的数据属性是同一类的(使用上), 2.methods(方法)写在html中的时候需要带()支持传参,且需要有触发条件 ...

  3. css 自制一些小特效

    Github地址 位于gh-pages分支上 https://github.com/a1115040996/MyHTML/ 3D 卡片特效 地址: https://a1115040996.github ...

  4. react安装 项目构建

    1.nodejs安装 下载安装包,解压.如果是已编译文件,在/etc/profile中设置PATH(/etc/profile文件中的变量设置,所有用户可用,但需求重启服务器),并source /etc ...

  5. Oracle数据库体系结构之进程结构(4)

    Oracle进程结构包括用户进程,服务进程,后台进程. 1. 用户进程 用户进程在数据库用户要求连接到Oracle服务器时开始启动. 用户进程是要求Oracle服务器交互的一种进程 它必须首先建立一个 ...

  6. iOS webview 获取html中的图片地址

    //js代码,声明1个数组,对img 进行遍历,采用,分割多个url NSString * getAllImages = @"var str = new Array();" &qu ...

  7. 基于ASP.NET MVC 下的Extjs的Combbox加载速率问题,终于解决啦:)

    在实际的开发项目中,自己遇到一个让自己苦恼很久的问题,一直也未解决,先简单介绍一下这个问题吧.当在表单里有多个combbox的时候(表单中的combbox是经过封装的控件,从后台请求同一个方法获取数据 ...

  8. react native 项目版本升级

    首先说明一下rn项目的一种相当顺滑升级方法: 1.全局安装react-native-git-upgrade npm i -g react-native-git-upgrade 2. 在项目目录下执行命 ...

  9. Scrapy:Python实现scrapy框架爬虫两个网址下载网页内容信息——Jason niu

    import scrapy class DmozSpider(scrapy.Spider): name ="dmoz" allowed_domains = ["dmoz. ...

  10. Maven导入项目时报错 Could not calculate build plan

    Could not calculate build plan: Plugin org.apache.maven.plugins:maven-war-plugin:2.2 or one of its d ...