親測兼容 Chrome, Firefox, IE 6+ ,由于IE 9+開始支持animation，因此 IE 9 - 沒有動畫過渡效果掷空。
引用
<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 |
必須 |
消息文本內(nèi)容 |
| textAlign |
enum['center','left','right'] |
默認 'center' |
文本對齊方式 |
| withIcon |
boolean |
默認 false |
是否創(chuàng)建圖標 |
| closable |
boolean |
默認 false |
是否創(chuàng)建關(guān)閉按鈕 |
| animation |
boolean |
默認 false |
是否使用動畫過渡 |
| duration |
Integer |
默認 2000 |
消息存在時長 |
| 名稱 |
注釋 |
| onClick |
當消息被點擊時 |
| onAppear |
當消息被創(chuàng)建時 |
| onVanish |
當消息被銷毀時 |
源碼
代碼說明
- css 部分預(yù)定義類樣式血公，以便 js 創(chuàng)建帶樣式的節(jié)點
- 圖標使用 dataURL 引入
- 由于 IE 9 - 不支持 animation 屬性轰枝，因此沒有過渡效果
- 當鼠標移到消息上鞍帝，動畫效果和存在時長累加暫停久又；當鼠標移出消息時，動畫和計時恢復(fù)正常
源碼和示例代碼地址
GitHub
最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
