打造炫酷的通知插件EasyToaster

时间:2022-05-06
本文章向大家介绍打造炫酷的通知插件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