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

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