码迷,mamicode.com
首页 > Web开发 > 详细

漂亮灵活设置的jquery通知提示插件toastr

时间:2016-07-13 13:25:21      阅读:400      评论:0      收藏:0      [点我收藏+]

标签:

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

标签:

原文地址:http://www.cnblogs.com/Alex80/p/5666393.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!