前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >打造炫酷的通知插件EasyToaster

打造炫酷的通知插件EasyToaster

作者头像
lonelydawn
发布2018-03-29 12:04:40
1.1K0
发布2018-03-29 12:04:40
举报

引用

代码语言:javascript
复制
<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>

例子

代码语言:javascript
复制
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

本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • ?
    • 引用
      • 例子
      • 方法
      • 配置项
    • 源码
      • 代码说明
      • 源码和示例代码地址
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档