Xinu

jquery提示插件toast使用记录
前言使用alert类型的提示总感觉不是很友好,还是提示即时消失的感官更好一些。资源文件需要引入jquery,推荐使...
扫描右侧二维码阅读全文
18
2017/11

jquery提示插件toast使用记录

前言

使用alert类型的提示总感觉不是很友好,还是提示即时消失的感官更好一些。

资源文件

需要引入jquery,推荐使用公共cdn
http://libs.useso.com/js/jquery/2.1.1-rc2/jquery.js
http://cdn.bootcss.com/jquery/jquery-2.0.3.min.js
http://libs.baidu.com/jquery/1.9.0/jquery.js
css文件
jquery.toast.min.css 下载
jquery.toast.min.js 下载

使用+配置

最简单使用

$.toast('这里是提示内容');

效果

自定义配置项:

$.toast({
    text:'这是一个不自动隐藏的',//内容
    hideAfter:false
    //配置名:值
});

配置说明:

配置名备注
hideAfterfalse/int如果是false,提示框不消失,如果是数字,代表多少毫秒后关闭
textstring/array提示的内容,支持html标签,支持传入数组,将数组以无序列表形式输出
showHideTransitionstring 'fade'/'slide'/'plain'提示框显示过程动画
headingstring显示在提示框头部,相当于title
iconstring 'success'/'error'/'info'/'warning'4种不同的icon显示
allowToastClose(bool) true/false是否允许关闭提示,右上角x
stackfalse/int如果是false,只允许同时存在1个提示框,如果是数字,允许同时存在数字个提示框
positionstring提示框的位置,插件内置了7种,还可自定义,默认左下,'bottom-left','bottom-right','top-left','top-right','top-center','bottom-center', 'mid-center'.自定义格式:{ left : 120, right : 'auto', top : 89, bottom : 'auto' }
textAlignstring 'left'/'right'/'center'文字位置
loader(bool) true/false是否显示进度条,默认显示
loaderBgstring进度条背景色 '#1f3e5d'
bgColorstring提示框背景色
textColorstring文字颜色

监听事件

该提示框支持回调函数,非常贴心。

事件使用备注
beforeShowbeforeShow:function(){}在提示框显示之前被触发
afterShownafterShown:function(){}在提示框显示之后被触发
beforeHidebeforeHide:function(){}在提示框隐藏之前被触发
afterHiddenafterHidden:function(){}在提示框隐藏之后被触发
Last modification:November 18th, 2017 at 08:06 pm

One comment

  1. Kess

    谢谢了

Leave a Comment