php的toast,jQuery信息提示插件toast.js

71a8be66198064c280abe21dd5bdc9cf.png

94a6dc5feabd4193c6b752bf51a273a1.png

插件描述:仿安卓toast效果,兼容animate.css

更新时间:2017-6-19 20:35:20

更新说明:修改toast样式,在有max-width属性的基础上添加word-wrap: break-word;让英文 和 数字  可以在宽度到达100%的时候换行

toast & showMessage

这是一个简单的提示插件   适合移动端

toast

position:如果toast创建的位置不是body的话就absolute

animateIn(上一个版本是animateStyle):进入的动画

animateOut(上一个版本是没有,写死的fadeout):离开的动画 现在可以使用animate的动画

padding:padding

background:背景色

borderRadius:圆角

duration:定时器时间

fontSize:  字体大小

content:  提示内容

color:   文字颜色

top: bottom底部的位置   具体的数值 或者center 垂直居中

zIndex: 层级

isCenter:   是否垂直水平居中显示

closePrev:  在打开下一个toast的时候立即关闭上一个toast$('div_toast').toast({

content:'你好啊!'

});

showMessage:function(content,duration,isCenter,animateIn,animateOut){} 五个参数 content:内容,duration:时长,isCenter:是否剧中,animateIn:进入动画效果,animateOut:离开的动画效果 showMessage('未曾遗忘的青春',3000,true,'bounceIn-hastrans','bounceOut-hastrans');showMessage('这是提示信息',5000,false,'bounceIn-hastrans','bounceOut-hastrans');

注意:'-hastrans'是我在animate.css的基础上加的,目的是当元素为绝对定位又想用translate居中时候,修改translate的值无效,故做了一些修改,之前的class也可以正常使用

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值