长沙专业做网站公司有哪些,phpcms网站源码,广告公司肥西,企业网站系统模板toastr是一款轻量级的消息提示插件#xff0c;基于JQuery#xff0c;使用简单方便#xff0c;外观大气漂亮。
点击这里进入toastr在线调试使用
点击这里进入toastr官方网站
使用效果如下图所示#xff1a; 插件使用需要引用的JS和CSS文件如下图所示#xff1a;
各版…toastr是一款轻量级的消息提示插件基于JQuery使用简单方便外观大气漂亮。
点击这里进入toastr在线调试使用
点击这里进入toastr官方网站
使用效果如下图所示 插件使用需要引用的JS和CSS文件如下图所示
各版本JQuery jquery-3.3.1.min.js toastr文件 toastr.min.js toastr.min.css 使用说明
插件有四种消息类型分别如下图所示 toastr.info(您的手机已经欠费, 系统提醒);//提醒toastr.success(恭喜获得冠军, 恭喜);//成功toastr.warning(您已经严重超速, 警告);//警告toastr.error(系统崩溃, 错误);//错误
格式 toastr.消息类型消息内容,消息标题可以省略 实现代码
script typetext/javascriptvar toastr;toastr.options {closeButton: true,//显示关闭按钮debug: false,progressBar: true,//显示进度条positionClass: toast-bottom-center,//位置onclick: null,//点击消息框自定义事件showDuration: 300,//显示动作时间hideDuration: 1000,//隐藏动作时间timeOut: 2000,//显示时间,0为永久显示extendedTimeOut: 1000,//鼠标移动过后显示显示时间showEasing: swing,hideEasing: linear,showMethod: fadeIn,//显示方式hideMethod: fadeOut//隐藏方式};$(#button1).click(function () {toastr.info(您的手机已经欠费, 系统提醒);//提醒});$(#button2).click(function(){toastr.success(恭喜获得冠军, 恭喜);//成功});$(#button3).click(function () {toastr.warning(您已经严重超速, 警告);//警告});$(#button4).click(function () {toastr.error(系统崩溃, 错误);//错误});$(#button6).click(function () {toastr.clear();//移除所有,有动画效果})$(#button7).click(function () {toastr.remove();//移除所有没有动画效果})/script 参数说明
参数说明closeButton显示关闭按钮debug开启debug模式progressBar显示进度条onclick鼠标点击事件showDuration显示动作时间hideDuration隐藏动作时间timeOut显示时间,0为永久显示extendedTimeOut鼠标移动过后显示显示时间positionClass 出现位置有一下几种可以选择 toast-top-left 顶端左边 toast-top-right 顶端右边 toast-top-center 顶端中间 toast-top-full-width 顶端宽度铺满整个屏幕 toast-botton-right toast-bottom-left toast-bottom-center toast-bottom-full-width
