toastr是一款非常棒的基于jquery库的非阻塞通知提示插件,toastr可设定四种通知模式:成功,出错,警告,提示,而提示窗口的位置,动画效果都可以通过能数来设置,在官方站可以通过勾选参数来生成JS,非常的方便使用。jQ酷的另外一款jquery提示插件也不错:jQuery自定义工具提示插件DarkTooltip

使用方法:

引入核心文件

1
2
3
<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代码,这里只需写入触发事件的按丑。

1
2
3
4
5
<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="清除"/>

给按钮绑定事件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
$(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();
        })
    }) 

转载请注明:jQ酷 » 漂亮灵活设置的jquery通知提示插件toastr

漂亮灵活设置的jquery通知提示插件toastr的更多相关文章

  1. Jquery消息提示插件toastr使用详解

    toastr是一个基于jQuery简单.漂亮的消息提示插件,使用简单.方便,可以根据设置的超时时间自动消失. 1.使用很简单,首选引入toastr的js.css文件 html <script s ...

  2. Jquery消息提示插件toastr使用

    toastr是一个基于jQuery简单.漂亮的消息提示插件,使用简单.方便,可以根据设置的超时时间自动消失. 相关文件到官网去下载即可 1.引入toastr的js和css文件 <link hre ...

  3. Jquery消息提示插件toastr

    toastr是一个基于jQuery简单.漂亮的消息提示插件,使用简单.方便,可以根据设置的超时时间自动消失. 1.使用很简单,首选引入toastr的js.css文件 <script src=&q ...

  4. 消息提示插件toastr.js与Messenger组件

    Toastr是一款基于jQuery的通知插件,可以灵活的自定义样式和拓展其功能! toastr是一个基于Jquery简单.漂亮的消息提示插件,使用简单.方便,可以根据设置的超时时间自动消失. cdn最 ...

  5. toastr 通知提示插件

    table.sb-tb td,table.sb-tb th { padding: 5px 10px !important } jquery toastr 一款轻量级的通知提示框插件. 网页开发中经常会 ...

  6. PoshyTip jQuery 文本提示插件的使用

    PoshyTip 是JQuery中一款文本提示插件,在Jsp页面使用相当方便,插件内包含了很多外观样式,可以作为FormTooltips使用. 插件包下载地址:http://vadikom.com/f ...

  7. 介绍Web项目中用到的几款JQuery消息提示插件

    第一款 noty 官方网站:https://github.com/needim/noty 第二款 artDialog artDialog是一个精巧的web对话框组件,压缩后只有十多KB,并且不依赖其他 ...

  8. Jquery 错误提示插件

    这是一个简单的输入框错误提示插件,可拓展! .jq-error{ font-size:12px; min-width:150px; width:auto; max-width:350px; line- ...

  9. TaggingJS – 可以灵活定制的 jQuery 标签系统插件

    TaggingJS 是一款 jQuery 插件,用来创建高度可定制的前端标签系统.这款插件不到3KB ,支持主流浏览器.有几种方法来定制 TaggingJS 的默认行为:一是使用  custom_op ...

随机推荐

  1. spoj 138

    离散化  去掉重复点 排序  二分查找 #include<cstdio> #include<cstring> #include<algorithm> #define ...

  2. What is the difference between database table and database view?

    The database table has a physical existence in the database. A view is a virtual table, that is one ...

  3. 关联式容器(associative containers)

    关联式容器(associative containers) 根据数据在容器中的排列特性,容器可分为序列式(sequence)和关联式(associative)两种. 标准的STL关联式容器分为set( ...

  4. POJ3414Pots

    http://poj.org/problem?id=3414 题意 : 大意是说给你两个杯子的体积和一个目标体积,a,b,c,通过对a,b进行6种操作,调出c体积的水,6种操作分别是把a倒满,把b倒满 ...

  5. hdu 1063 Exponentiation

    求实数的幂,这个用C++写的话有点长,但是用Java写就非常方便了…… );            System.out.println(an);        }    }}

  6. jQuery动画效果实现

    <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...

  7. ubuntu -LDAP的配置

    本文内容来自 http://blog.csdn.net/jl19861101/article/details/5582841 1. LDAP Server1.1. 安装主要安装一下套件: 代码: # ...

  8. JS事件(事件冒泡和事件捕获)

    事件流:描述的是在页面中接收事件的顺序 事件冒泡:由最具体的元素接收,然后逐级向上传播至最不具体的元素的节点(文档) 事件捕获:最不具体的节点先接收事件,而最具体的节点应该是最后接收事件 DOM中:用 ...

  9. 乳草的入侵//BFS

    P1030 乳草的入侵 时间: 1000ms / 空间: 131072KiB / Java类名: Main 背景 USACO OCT09 6TH 描述 Farmer John一直努力让他的草地充满鲜美 ...

  10. lintcode 中等题:搜索旋转排序数组II

    题目 搜索旋转排序数组 II 跟进“搜索旋转排序数组”,假如有重复元素又将如何? 是否会影响运行时间复杂度? 如何影响? 为何会影响? 写出一个函数判断给定的目标值是否出现在数组中. 样例 给出[3, ...