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

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏salesforce零基础学习

salesforce lightning零基础学习(四) 事件(component events)简单介绍

1943
来自专栏河湾欢儿的专栏

Vue-router(路由)

2.定义(注册)路由跳转的组件----使用全局扩展的方式,用其他创建组件的方式也可以 在这里,进行了一个赋值操作,用一个变量名保存组件中所有的内容

1302
来自专栏快乐八哥

Windows8异步编程的注意事项

Windows8项目中涉及到下载数据和上传数据。针对小的数据使用的是WinJS.xhr(),而针对大的文件,不方便使用post方式直接上传的文件都使用Backg...

17910
来自专栏python3

tkinter -- PanedWindow

922
来自专栏我的博客

安卓开发之事件

事件处理:提供为用户动作响应的机制 Android提供两种方式的事件处理 一、基于回调的事件处理 二、基于监听的事件处理 事件监听处理模型中三类对象: 事件源:...

2235
来自专栏编程坑太多

「小程序JAVA实战」 小程序默认加载的页面和生命周期(八)

902
来自专栏琦小虾的Binary

HTML 表单 (form) 的作用解释

参考网址: 《HTML中form表单作用解释》 表单在网页中主要负责的是数据采集功能,一个表单基本由三部分组成: 表单标签:这里面包含了处理表...

3447
来自专栏用户2442861的专栏

VS2013的常用快捷键以及使用技巧

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/haluoluo211/article/details...

1522
来自专栏西二旗一哥

iOS - Add apple document

1063
来自专栏happyJared

IDEA快捷键拆解系列(十七):Debug篇

  在分析源码的时候,良好的Debug能力可以帮助我们快速的读懂别人的代码。IDEA为开发者们提供了全面的Debug支持,相信熟练掌握后可以大大的提高我们的De...

781

扫码关注云+社区

领取腾讯云代金券