jquery提示插件toast使用记录

November 18, 2017

30750 views

2155 字数

前言

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

最简单使用

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

效果

自定义配置项：

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

配置说明：

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

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