<!doctype html>
<html lang="zh">
<head>
<meta charset="utf-8">
<title>JQuery信息提示框插件 jquery.toast.js 的使用</title>
<link href="https://cdn.bootcss.com/jquery-toast-plugin/1.3.2/jquery.toast.css" rel="stylesheet">
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/jquery-toast-plugin/1.3.2/jquery.toast.min.js"></script>
</head>
<body>
<button class="btn btn-success" name="success"id="simple"> 簡單文本的消息提示框 </button>
<button class="btn btn-success" name="success"id="success"> 成功 </button>
<button class="btn btn-info" name="info"id="info">提示</button>
<button class="btn btn-warning" name="warning"id="warning">警告</button>
<button class="btn btn-danger" name="error"id="error">錯誤</button>
<script>
$(function(){
$("#simple").click(function(){
$.toast('Here you can put the text of the toast');
})
$("#success").click(function(){
showMsg("成功樣式！", "success", 2000);
})
$("#info").click(function(){
showMsg("提示樣式！", "info", 2000);
});
$("#warning").click(function(){
showMsg("警告樣式！", "warning", 2000);
})
$("#error").click(function(){
showMsg("錯誤樣式！", "error", 2000);
})
});
/**
* 提示框
* @param text
* @param icon
* @param hideAfter
*/
function showMsg(text, icon, hideAfter) {
if (heading == undefined) {
var heading = "提示";
}
$.toast({
text: text,//消息提示框的內容。
heading: heading,//消息提示框的標題。
icon: icon,//消息提示框的圖標樣式。
showHideTransition: 'fade',//消息提示框的動畫效果。可取值：plain，fade，slide。
allowToastClose: false,//是否顯示關閉按鈕。(true 顯示，false 不顯示)
hideAfter: hideAfter,//設置為false則消息提示框不自動關閉.設置為一個數值則在指定的毫秒之后自動關閉消息提框
stack: 1,//消息棧。同時允許的提示框數量
position: 'top-center',//消息提示框的位置：bottom-left, bottom-right,bottom-center,top-left,top-right,top-center,mid-center。
textAlign: 'left',//文本對齊：left, right, center。
loader: false,//是否顯示加載條
//bgColor: '#FF1356',//背景顏色。
//textColor: '#eee',//文字顏色。
loaderBg: '#ffffff',//加載條的背景顏色。
beforeShow: function(){
// alert('The toast is about to appear');
},
afterShown: function () {
// alert('Toast has appeared.');
},
beforeHide: function () {
// alert('Toast is about to hide.');
},
afterHidden: function () {
// alert('Toast has been hidden.');
}
/*toast事件
beforeShow 會在toast即將出現之前觸發
afterShown 會在toast出現后觸發
beforeHide 會在toast藏起來之前觸發
afterHidden 會在toast藏起來后被觸發
*/
});
}
</script>
</body>
</html>
