打造炫酷的通知插件EasyToaster

简介: 引用

 

引用


<link rel="stylesheet" type="text/css" href="./index.css">
<div id="slider"></div>
<script type="text/javascript" src="./index.js"></script>
<script type="text/javascript">
	var toaster = new Toaster()
	toaster.info({
		text: 'default config'
	})
</script>

例子


toaster.error({
	text: 'There\'s something wrong',
	textAlign: 'left',
	withIcon: true,
	closable: true,
	animation: true,
	duration: 2500,
	onClick: function () {
		// do sth
	},
	onAppear: function () {
		// do sth
	},
	onVanish: function () {
		// do sth
	}
})

方法

名称 注释
wait Wait 类型消息
info Info 类型消息
success Success 类型消息
warning Warning 类型消息
error Error 类型消息

 

配置项

名称 类型 约束 注释
text String 必须 消息文本内容
textAlign enum['center','left','right'] 默认 'center' 文本对齐方式
withIcon boolean 默认 false 是否创建图标
closable boolean 默认 false 是否创建关闭按钮
animation boolean 默认 false 是否使用动画过渡
duration Integer 默认 2000 消息存在时长

 

名称 注释
onClick 当消息被点击时
onAppear 当消息被创建时
onVanish 当消息被销毁时

 

 

源码

代码说明

  • css 部分预定义类样式,以便 js 创建带样式的节点
  • 图标使用 dataURL 引入
  • 由于 IE 9 - 不支持 animation 属性,因此没有过渡效果
  • 当鼠标移到消息上,动画效果和存在时长累加暂停;当鼠标移出消息时,动画和计时恢复正常

源码和示例代码地址

GitHub

原文发布时间为:2018年02月13日
原文作者:lonelydawn 

本文来源:开源中国 如需转载请联系原作者


目录
相关文章
|
6月前
|
Windows
微信消息实现自动推送--方式一 成功啦 进来学
微信消息实现自动推送--方式一 成功啦 进来学
609 1
C#或Winform中的消息通知之自定义优雅漂亮的通知效果
Custom Notification自定义通知提示,一款非常优雅漂亮的自定义通知效果,主要介绍其实现思路、调整和优化...
1203 0
C#或Winform中的消息通知之自定义优雅漂亮的通知效果
|
缓存 jenkins 持续交付
jenkins构建邮件通知
jenkins构建邮件通知
56 0
小储云邮件通知插件配置教程
设置通知配置,配置完成之后,有订单-工单-提现可以通知站长,提升了平台处理效率!
443 0
小储云邮件通知插件配置教程
小储云方糖消息通知插件配置教程
可以对用户的各种操作进行通知,官网:http://sc.ftqq.com,可对新订单,提现,工单,注册,用户升级,评价等相关操作做出通知
481 0
小储云方糖消息通知插件配置教程
|
前端开发
如何自定义Electron的通知事件,自定义窗口大小
当外层添加拖拽后,里层添加点击事件时,点击事件的元素要添加这个样式方能添加点击事件
|
前端开发 JavaScript jenkins
Jenkins 增加构建后操作 | 发送邮件通知
Jenkins 增加构建成功后发送邮件通知,文章内的效果是可以实现的,如果对于一些基础知识不知道,前文也有讲到, 大家不用担心。 前文知识点:Jenkins+Docker+Github实现自动化部署
548 0
Jenkins 增加构建后操作 | 发送邮件通知