Toster using Knockout js
HTML:
<!DOCTYPE html>
<html>
<head>
<title>KnockoutJS Toaster</title>
<link href="page.css" rel="stylesheet" />
<link href="toaster.css" rel="stylesheet" />
</head>
<body>
<nav class="navbar navbar-default">
<div class="container-fluid" style="text-align: center">
<h1>Knockout JS Toaster</h1>
</div>
</nav>
<!-- toast container custom element, add this to your index page / default template -->
<toast-container params='
timeout: 4000,
showClose: false,
pushTo: "top",
limit: 5,
toasts: toaster.toasts'> <!-- supply toasts from toaster to custom element must required -->
</toast-container>
<div style="margin-left:auto;margin-right:auto;margin-top:100px;width:200px">
<button class="btn btn-primary" data-bind="click:displayStandardToasts">Standard Toasts (timout 7sec)</button>
<br /><br />
<button class="btn btn-primary" data-bind="click:displayLoading">Loading Toasts</button>
<br /><br />
<button class="btn btn-primary" data-bind="click:displayLongToasts">Long Toasts (timout 25sec)</button>
<br /><br />
<button class="btn btn-info" data-bind="click:displayInfo">Info Toasts</button>
<br /><br />
<button class="btn btn-warning" data-bind="click:displayWarning">Warning Toasts</button>
<br /><br />
<button class="btn btn-danger" data-bind="click:displayError">Error Toasts</button>
<br /><br />
<button class="btn btn-success" data-bind="click:displaySuccess">Success Toasts</button>
<br /><br />
<button class="btn btn-default" data-bind="click:clear">Clear All Toasts</button>
</div>
<script src="//cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>
<script src="toaster.js"></script><!--Toaster plugin-->
<script src="toastVM.js"></script><!--This page view model-->
</body>
</html>
CSS:
.btn {
display: inline-block;
padding: 6px 12px;
margin-bottom: 0;
font-size: 14px;
font-weight: normal;
line-height: 1.42857143;
text-align: center;
white-space: nowrap;
vertical-align: middle;
-ms-touch-action: manipulation;
touch-action: manipulation;
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
background-image: none;
border: 1px solid transparent;
border-radius: 4px;
}
.btn-info {
color: #fff;
background-color: #5bc0de;
border-color: #46b8da;
}
.btn-info:hover,
.btn-info:focus,
.btn-info.focus,
.btn-info:active,
.btn-info.active,
.open > .dropdown-toggle.btn-info {
color: #fff;
background-color: #31b0d5;
border-color: #269abc;
}
.btn-primary {
color: #fff;
background-color: #337ab7;
border-color: #2e6da4;
}
.btn-primary:hover,
.btn-primary:focus,
.btn-primary.focus,
.btn-primary:active,
.btn-primary.active,
.open > .dropdown-toggle.btn-primary {
color: #fff;
background-color: #286090;
border-color: #204d74;
}
.btn-success {
color: #fff;
background-color: #5cb85c;
border-color: #4cae4c;
}
.btn-success:hover,
.btn-success:focus,
.btn-success.focus,
.btn-success:active,
.btn-success.active,
.open > .dropdown-toggle.btn-success {
color: #fff;
background-color: #449d44;
border-color: #398439;
}
.btn-danger {
color: #fff;
background-color: #d9534f;
border-color: #d43f3a;
}
.btn-danger:hover,
.btn-danger:focus,
.btn-danger.focus,
.btn-danger:active,
.btn-danger.active,
.open > .dropdown-toggle.btn-danger {
color: #fff;
background-color: #c9302c;
border-color: #ac2925;
}
.btn-warning {
color: #fff;
background-color: #f0ad4e;
border-color: #eea236;
}
.btn-warning:hover,
.btn-warning:focus,
.btn-warning.focus,
.btn-warning:active,
.btn-warning.active,
.open > .dropdown-toggle.btn-warning {
color: #fff;
background-color: #ec971f;
border-color: #d58512;
}
.btn-default {
color: #333;
background-color: #fff;
border-color: #ccc;
}
.btn-default:hover,
.btn-default:focus,
.btn-default.focus,
.btn-default:active,
.btn-default.active,
.open > .dropdown-toggle.btn-default {
color: #333;
background-color: #e6e6e6;
border-color: #adadad;
}
No comments:
Post a Comment