打造炫酷的通知插件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 

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


目录
相关文章
|
数据安全/隐私保护
企微配置回调服务
企微配置回调服务
177 0
|
3天前
在 Jenkinsfile 中配置邮件通知的示例代码
在 Jenkinsfile 中配置邮件通知的示例代码
|
6月前
|
XML 中间件 数据库
基于jeecgboot的flowable流程支持定时捕获事件
基于jeecgboot的flowable流程支持定时捕获事件
115 0
C#或Winform中的消息通知之自定义优雅漂亮的通知效果
Custom Notification自定义通知提示,一款非常优雅漂亮的自定义通知效果,主要介绍其实现思路、调整和优化...
1209 0
C#或Winform中的消息通知之自定义优雅漂亮的通知效果
|
缓存 jenkins 持续交付
jenkins构建邮件通知
jenkins构建邮件通知
57 0
小储云邮件通知插件配置教程
设置通知配置,配置完成之后,有订单-工单-提现可以通知站长,提升了平台处理效率!
445 0
小储云邮件通知插件配置教程
小储云方糖消息通知插件配置教程
可以对用户的各种操作进行通知,官网:http://sc.ftqq.com,可对新订单,提现,工单,注册,用户升级,评价等相关操作做出通知
484 0
小储云方糖消息通知插件配置教程
|
前端开发
如何自定义Electron的通知事件,自定义窗口大小
当外层添加拖拽后,里层添加点击事件时,点击事件的元素要添加这个样式方能添加点击事件
|
jenkins API 持续交付
jira webhook 事件触发并程序代码调用jenkins接口触发构建操作
要解决的问题 开发管理工具触发站点构建事件,事件处理中需要调用Jenkins接口开始构建动作。 我的应用场景: 使用jira作为管理工具,在jira中创建自定义的工作流来规定测试,上线,发布等流程,并通过自动化工具完成这一系列的操作。
2415 0