toastr.js插件用法
toastr.js插件用法
toastr.js是一个基于jQuery的非阻塞通知的JavaScript库。toastr.js可以设定四种通知模式:成功、出错、警告、提示。提示窗口的位置、动画效果等都可以通过参数来设置,并且可以在官方网站上通过勾选参数来生成JavaScript代码,操作简单,容易上手,推荐使用。
https://github.com/CodeSeven/toastr
简单调用
简单调用toastr.js插件时,以下几步即可。
① <link ref=”stylesheet” href=”toastr.css”>
② <script src=”jquery.js”></script>
③ <script src=”toastr.js”></script>
④ toastr.info(‘Are you the 6 fingered man?’);
注:toastr.js插件是基于jQuery库的,所以必须在引入toastr.js插件之前引入jQuery库。
复杂案例
① 引入核心文件:
<link href="toastr.css" rel="stylesheet" type="text/css" /> <script src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script> <script src="toastr.js"></script>
② html代码
<input type="button" name="success" id="success" value="成功"/> <input type="button" name="info" id="info" value="提示"/> <input type="button" name="warning" id="warning" value="警告"/> <input type="button" name="error" id="error" value="错误"/> <input type="button" name="clear" id="clear" value="清除"/>
③ jQuery代码
$(function(){ //参数设置,若用默认值可以省略以下面代 toastr.options = { "closeButton": false, //是否显示关闭按钮 "debug": false, //是否使用debug模式 "positionClass": "toast-top-full-width",//弹出窗的位置 "showDuration": "300",//显示的动画时间 "hideDuration": "1000",//消失的动画时间 "timeOut": "5000", //展现时间 "extendedTimeOut": "1000",//加长展示时间 "showEasing": "swing",//显示时的动画缓冲方式 "hideEasing": "linear",//消失时的动画缓冲方式 "showMethod": "fadeIn",//显示时的动画方式 "hideMethod": "fadeOut" //消失时的动画方式 }; //成功提示绑定 $("#success").click(function(){ toastr.success("祝贺你成功了"); }) //信息提示绑定 $("#info").click(function(){ toastr.info("这是一个提示信息"); }) //敬告提示绑定 $("#warning").click(function(){ toastr.warning("警告你别来烦我了"); }) //错语提示绑定 $("#error").click(function(){ toastr.error("出现错误,请更改"); }) //清除窗口绑定 $("#clear").click(function(){ toastr.clear(); }) });
toastr.js插件用法的更多相关文章
- fullPage.js插件用法(转发)
fullPage.js主要功能有: 支持鼠标滚动 支持前进后退和键盘控制 多个回调函数 支持手机.平板触摸事件 支持 CSS3 动画 支持窗口缩放 窗口缩放时自动调整 可设置滚动宽度.背景颜色.滚动速 ...
- jQuery之jquery.lazyload.js插件用法
研究背景:网站中如果图片过多,就会因为加载图片而等待很长时间,此时我们就用到图片延时加载插件jquery.lazyload.js,这个插件可以让我们在向下滚动的时候加载图片.让网页首屏尽可能快的加载进 ...
- Headroom.js插件用法
一.Headroom.js是什么? Headroom.js是一个轻量级.高性能的JS小工具(不依赖不论什么工具库.),它能在页面滚动时做出响应. 此页面顶部的导航条就是一个鲜活的案例,当页面向下滚动时 ...
- 消息提示插件toastr.js与Messenger组件
Toastr是一款基于jQuery的通知插件,可以灵活的自定义样式和拓展其功能! toastr是一个基于Jquery简单.漂亮的消息提示插件,使用简单.方便,可以根据设置的超时时间自动消失. cdn最 ...
- 网站引导页插件intro.js 的用法
intro.js是一个用于制作网页引导效果的js插件,用法很简单,intro.js.v2.0.rar 1.在需要的页面添加引用 intro.js introjs.css 这两个文件已经足够,但是文件夹 ...
- js插件---->jquery通知插件toastr的使用
toastr是一款非常棒的基于jquery库的非阻塞通知提示插件,toastr可设定四种通知模式:成功,出错,警告,提示,而提示窗口的位置,动画效果都可以通过能数来设置.toastr需要jquery的 ...
- Javascript模块化编程(三):require.js的用法
Javascript模块化编程(三):require.js的用法 原文地址:http://www.ruanyifeng.com/blog/2012/11/require_js.html 作者: 阮一峰 ...
- 【PC端】jQuery+PHP实现浏览更多内容(jquery.more.js插件)
参数说明: 'amount' : '10', //每次显示记录数 'address' : 'comments.php', //请求后台的地址 'format' : 'json', //数据传输格式 ' ...
- 基于jquery的消息提示框toastr.js
//消息提示全局配置 toastr.options = { "closeButton": false,//是否配置关闭按钮 "debug": false,//是 ...
随机推荐
- JSP-表单元素示例
<%@ page language="java" pageEncoding="UTF-8"%><%@ page import="ja ...
- 第28篇 js中let和var
let与var 在js中声明一个变量除了一个var 还有一个let的声明.对于var 在前面的作用域中已经讲过,这次主要说下二者的区别: 在MDN上有这样的一个demo: var list = d ...
- 一个基于Behave框架的http接口测试实例
前言:本人没怎么做过http接口测试,只是最近学习了一下,Behave框架也是最近学习的,如果有不对的请各位大神指点,感谢! 1.1 接口准备 本次get请求的接口用的是百度接口:wd=搜 ...
- Javascript中好用更改时间的方法
<script type="text/javascript"> //格式化时间格式的字符串 String.prototype.myTimes = function () ...
- python算法(一)
python算法(一) 一.求数x的因子 x=100 divisors=()#初始化空的元组 for i in range(1,x): if x%i==0: divisors=divisors+(i, ...
- 转:js中cookie的使用详细分析
cookie机制将信息存储于用户硬盘,因此可以作为全局变量,这是它最大的一个优点.它可以用于以下几种场合. (1)保存用户登录状态.例如将用户id存储于一个cookie内,这样当用户下次访问该页面时就 ...
- Struts中数据处理
对数据操作的3种方法(把数据保存到域中): 方式1:直接获取servletApi 核心类:ServletActionContext提供的静态方法 /** * 方式1:拿到servletApi,执行操作 ...
- 使用js实现ajax的get请求步骤
(以下内容非原创,视频整合得来的) 1.创建XMLHttpRequest对象 2.浏览器与服务器建立连接 3.浏览器向服务器发送请求 4.服务器向浏览器响应请求 下面给出一个实例 1.创建一个test ...
- C#"曾经的字符串数组"string[] array=new string[]{"**","****"};
写博客是一件很伟大的事情,尤其是也牛逼的博客,因为它能帮助需要的人,更能使自己对知识有一个更为深刻的理解! 欢迎关注我的博客! 字符串操作(取当前时间) string time=convert.tos ...
- jeesite学习(一) common部分(1)
我们按照先细节后整体的方式来进行学习,即先了解各个包中包含的内容,再从整体上看各个包之间的关系. 0 common中的包 先看jeesite的common组件,common中共包含14个包(如下图), ...