ax5ui-toast
Version:
A toast plugin that works with Bootstrap & jQuery
120 lines (103 loc) • 3.42 kB
HTML
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" type="text/css" href="../dist/ax5toast.css"/>
<!--link rel="stylesheet" type="text/css" href="bower_components/bootstrap/dist/css/bootstrap.min.css"/-->
<link rel="stylesheet" type="text/css" href="bower_components/ax5ui-mask/dist/ax5mask.css"/>
<link rel="stylesheet" href="bower_components/font-awesome/css/font-awesome.min.css">
<script src="bower_components/jquery/dist/jquery.min.js"></script>
<script src="bower_components/ax5core/dist/ax5core.js"></script>
<script src="bower_components/ax5ui-mask/dist/ax5mask.min.js"></script>
<script src="../dist/ax5toast.js"></script>
</head>
<body style="padding: 50px;">
<button class="btn btn-default" id="toast-open">
toast
</button>
<button class="btn btn-default" id="toast-confirm">
confirm
</button>
<hr>
<button class="btn btn-default" data-toast-theme="default">
toast
</button>
<button class="btn btn-primary" data-toast-theme="primary">
toast
</button>
<button class="btn btn-success" data-toast-theme="success">
toast
</button>
<button class="btn btn-info" data-toast-theme="info">
toast
</button>
<button class="btn btn-warning" data-toast-theme="warning">
toast
</button>
<button class="btn btn-danger" data-toast-theme="danger">
toast
</button>
<hr>
<button class="btn btn-default" data-confirm-theme="default">
confirm
</button>
<button class="btn btn-primary" data-confirm-theme="primary">
confirm
</button>
<button class="btn btn-success" data-confirm-theme="success">
confirm
</button>
<button class="btn btn-info" data-confirm-theme="info">
confirm
</button>
<button class="btn btn-warning" data-confirm-theme="warning">
confirm
</button>
<button class="btn btn-danger" data-confirm-theme="danger">
confirm
</button>
<script>
var toast = new ax5.ui.toast();
toast.setConfig({
icon: '<i class="fa fa-bug"></i>',
containerPosition: "bottom-right",
closeIcon: '<i class="fa fa-times"></i>'
});
toast.onStateChanged = function(){
console.log(this);
};
var toast_confirm = new ax5.ui.toast();
toast_confirm.setConfig({
icon: '<i class="fa fa-bug"></i>',
containerPosition: "top-right",
closeIcon: '<i class="fa fa-times"></i>'
});
$(document.body).ready(function () {
$("#toast-open").click(function(){
toast.push({
icon: '<i class="fa fa-book"></i>',
msg:"999999"
});
});
$("#toast-confirm").click(function(){
toast_confirm.confirm("12312312");
});
$('[data-toast-theme]').click(function(){
var theme = this.getAttribute("data-toast-theme");
toast.push({
theme: theme,
msg: 'toast message'
})
});
$('[data-confirm-theme]').click(function(){
var theme = this.getAttribute("data-confirm-theme");
toast_confirm.confirm({
theme: theme,
msg: 'confirm message'
})
});
});
</script>
</body>
</html>