toastr是一款非常棒的基于库的非阻塞通知插件，toastr可设定四种通知模式：成功，出错，警告，提示，而提示窗口的位置，动画效果都可以通过能数来设置，在官方站可以通过勾选参数来生成JS，非常的方便使用。jQ酷的另外一款提示插件也不错：。
使用方法：
引入核心文件
| 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(); }) }) |
转载请注明： »