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