<?php require_once '../lib/Kendo/Autoload.php'; ?> <?php $position = new \Kendo\UI\NotificationPosition(); $position->top(30); $position->left(30); $popupNotification = new \Kendo\UI\Notification('popupNotification'); $popupNotification->position($position); $popupNotification->button(true); echo $popupNotification->render(); $staticNotification = new \Kendo\UI\Notification('staticNotification'); $staticNotification->appendTo('#appendto'); $staticNotification->button(true); echo $staticNotification->render(); ?> <div class="k-rtl"> <span id="popupNotification"></span> <span id="staticNotification"></span> <div class="demo-section k-content"> <h4>Show notification</h4> <p> <button id="showPopupNotification" class="k-button">As a popup at top-left</button><br /> <button id="showStaticNotification" class="k-button">Static in the panel below</button> </p> <div style="padding-top: 1em;"> <h4>Hide notification</h4> <button id="hideAllNotifications" class="k-button">Hide All Notifications</button> </div> </div> <div id="appendto" class="demo-section k-content"></div> </div> <style> .demo-section p { margin: 3px 0 20px; line-height: 40px; } .demo-section .k-button { width: 250px; } </style> <script> $(document).ready(function() { var popupNotification = $("#popupNotification").data("kendoNotification"); var staticNotification = $("#staticNotification").data("kendoNotification"); $("#showPopupNotification").click(function(){ var d = new Date(); popupNotification.show(kendo.toString(d, 'HH:MM:ss.') + kendo.toString(d.getMilliseconds(), "000"), "error"); }); $("#showStaticNotification").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); }); $("#hideAllNotifications").click(function(){ popupNotification.hide(); staticNotification.hide(); }); }); </script>