js消息提示框插件-----toastr用法

(本文系转载)

因为个人项目中有一个提交表单成功弹出框的需求,从网上找了一些资料,发现toastr这个插件的样式还是不错的。所以也给大家推荐下,但是网上的使用资料不是很详细,所以整理了一下,希望能给大家带来帮助。

toastr

官网http://codeseven.github.io/toastr/

这个样式插件支持直接导cdn入链接,但是我尝试了一下cdn加载速度太慢,所以推荐直接下载文件后导入文件

个人演示地址,因为把js放在了头部所以加载时间可能有点长,而且我发现自己的服务器不是很稳定,所以多多包涵。

http://47.94.153.112/

整个过程共分为4 步

1.导入文件

2.页面中头部导入插件

3.配置样式

4.编写触发方式

1.导入文件,这是我测试的文件

2.页面头部导入插件,必须导入jQuery,因为toastr是依赖于jQuery的

3.配置样式,默认样式就已经不错,主要配置弹出位置positionClass这一项,主要有top,bottom以及修饰它们的right,left,center这几个关键词。

<scripttype="text/javascript">

$(function(){

toastr.options=
{

"closeButton":false,//显示关闭按钮

"debug":false,//启用debug

"positionClass":"toast-top-center",//弹出的位置

"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("错误样式");

  //带标题的消息框
 toastr.success("你有新消息了!","消息提示");
  //另一种调用方法
 toastr["info"]("你有新消息了!","消息提示");

})

$("#clear").click(function(){

toastr.clear();//清楚当前页面弹出框

})

});

</script>

4.编写触发方式,因为JS中已经配置了onclick的触发方式,所以直接用button测试了,当然js的触发方式很多,可以按需选择。为了方便查看我这里用bootstrap配置了按钮样式。

<buttonclass="btn btn-success" name="success"id="success"> 成功 </button>

<buttonclass="btn btn-info" name="info"id="info">提示</button>

<buttonclass="btn btn-warning" name="warning"id="warning">警告</button>

<buttonclass="btn btn-danger" name="error"id="error">错误</button>

<buttonclass="btn btn-primary" name="clear"id="clear">清除</button>

5.运行查看效果

一个静态的页面样式就这样配置好了。

如果需要给动态页面添加样式,只需要用JS配置一下接收就好了

function msg() {
var url=location.search;
if(url.indexOf("?") != -1) {
    var str=url.substr(1);
    strs=str.split("=");
    var a=strs[1];
}
if(a==1){
    toastr.success("操作成功");
}
if(a==2){
    toastr.warning("请稍后再试");
}
}

这是一个简单通过连接追加的参数显示的示例,当然还有很多除了连接参数的方式,比如JSP中直接获取一个对象值也是可以的。

时间: 2024-10-12 08:25:32

js消息提示框插件-----toastr用法的相关文章

js 消息提示框

警告框: alert("警告框内容+ '\n' + "警告框添加折行.")") 确认框: var r=confirm("提示框内容");if (r==true) { alert("选对了"); }else { alert("选错了"); } 提示框: var name=prompt("提示框内容","提示框举例") if (name!=null &&

原生wcPop.js消息提示框(移动端)、内含仿微信弹窗效果

wcPop.js移动端消息对话框插件是之前的wxPop.js的升级版,优化了js和css,并且新增了仿微信弹窗效果, 是一款含有多种情景模式的原生模态消息对话框代码,可用于替代浏览器默认的alert弹出对话框,它提供各种参数和方法,功能非常强大.目前已经在项目中有应用到xwpop开发实例. 调用js库<script src="js/jquery-2.1.1.min.js"></script><script src="wcPop/wcPop.js&

强大的响应式jQuery消息通知框和信息提示框插件

lobibox是一款功能非常强大的jQuery消息通知框和信息提示框插件.这个插件分为两个部分:消息通知框和信息提示框.它能非常好的结合Bootstrap使用. 信息提示框 lobibox的信息提示框可以是模态窗口,也可以不是模态窗口. 允许显示多条信息. 允许使用任何可用的CSS动画来显示和隐藏信息提示框. 信息提示框可以显示不同的颜色和图标. 可以设置为确认信息提示框. 可以设置为一行的prompt信息框.(可以使用任何HTML5的输入框类型来作为prompt) 也可以设置为多重prompt

CSS+jQuery实现可关闭的智能定位的浮动消息提示框

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>CSS+jQuery实现可关闭的智能定位的

从仿QQ消息提示框来谈弹出式对话框

<代码里的世界> -UI篇 用文字札记描绘自己 android学习之路 转载请保留出处 by Qiao http://blog.csdn.net/qiaoidea/article/details/45896477 [导航] - 自定义弹出式对话框的简单用法 列举各种常见的对话框实现方案 1.概述 android原生控件向来以丑著称(新推出的Material Design当另说),因此几乎所有的应用都会特殊定制自己的UI样式.而其中弹出式提示框的定制尤为常见,本篇我们将从模仿QQ退出提示框来看一

基于Animate.css的炫酷jQuery消息通知框插件

notification是一款基于Animate.css的炫酷jQuery消息通知框插件.该插件可以在屏幕的四个角显示消息通知框,结合Animate.css可以制作出多种效果非常炫酷的CSS3动画特效. 在线预览   源码下载 使用方法 使用该jQuery消息通知框插件需要引入jQuery,notification.js,animate.css和notification.css文件. <link rel='stylesheet' href='css/animate.min.css'> <

SweetAlert-js超酷消息警告框插件

简要教程 SweetAlert是一款神奇的javascript弹出消息警告框插件. 来通过一张gif图片看看SweetAlert的效果: 使用方法 要使用该插件,首先要在html的header中引入以下文件:(文件下载地址:http://files.cnblogs.com/files/wuxiang/sweetalter.zip) <script src="lib/sweet-alert.min.js"></script> <link rel="

AJAX调用完成后的消息提示框

之前因为写一些验证,会在调用成功或者失败后用到一些消息提示框,但找了很多了没找到比较合适的,对于一些框架中的组件感觉用着也不是很方便,于是自己用js写了一个简单的提示框,代码如下: var appendHTML=function(el, html){ var divTemp = document.createElement("div"), nodes = null // 文档片段,一次性append,提高性能 , fragment = document.createDocumentFr

在指定位置上方出现通用jquery悬浮提示框插件

工作需要,网站悬浮提示框要求出现在指定元素上方,由于工作量修改比较大所以要求全站通用,所以写了一个juqery插件,插件很简单,大家可以自行更改样式. 请转载此文的朋友务必附带原文链接,谢谢. 原文链接:http://xuyran.blog.51cto.com/11641754/1876266 插件代码如下: //提示框插件 ; (function ($) {     $.fn.tooltips = function (options) {         $.fn.tooltips.defau