kendo-theme-bootstrap/demo/notification.html

69 строки
2.0 KiB
HTML

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Notification</title>
<link rel="stylesheet" href="../node_modules/bootstrap/dist/css/bootstrap.css" />
<link rel="stylesheet" href="../dist/all.css" />
<script src="http://localhost/kendo/dist/js/jquery.min.js"></script>
<script src="http://localhost/kendo/dist/js/kendo.all.min.js"></script>
<style type="text/css">
.w20p { display: inline-block; width: 20%; }
</style>
</head>
<body>
<div class="container">
<legend>Notification</legend>
<button id="append" class="k-button">append</button>
<div id="appendto">
<div class="k-widget k-notification k-notification-button k-notification-info">
<div class="k-notification-wrap">
<span class="k-icon k-i-note">info</span>Info<span class="k-icon k-i-close">Hide</span>
</div>
</div>
<div class="k-widget k-notification k-notification-success">
<div class="k-notification-wrap">
<span class="k-icon k-i-note">info</span>Success<span class="k-icon k-i-close">Hide</span>
</div>
</div>
<div class="k-widget k-notification k-notification-warning">
<div class="k-notification-wrap">
<span class="k-icon k-i-note">info</span>Warning<span class="k-icon k-i-close">Hide</span>
</div>
</div>
<div class="k-widget k-notification k-notification-error">
<div class="k-notification-wrap">
<span class="k-icon k-i-note">info</span>Error<span class="k-icon k-i-close">Hide</span>
</div>
</div>
</div>
<span id="staticNotification"></span>
</div>
<script>
var staticNotification = $("#staticNotification").kendoNotification({
appendTo: "#appendto"
}).data("kendoNotification");
$("#append").click(function(){
var d = new Date();
staticNotification.show(kendo.toString(d, 'HH:MM:ss.') + kendo.toString(d.getMilliseconds(), "000"), "info");
var container = $(staticNotification.options.appendTo);
container.scrollTop(container[0].scrollHeight);
});
</script>
</body>
</html>