jube-fork/Jube.App/wwwroot/kendo/examples/notification/templates.html

<!DOCTYPE html>
<html>
<head>
    <title>Templates</title>
    <meta charset="utf-8">
    <link href="../content/shared/styles/examples-offline.css" rel="stylesheet">
    <link href="../../styles/kendo.common.min.css" rel="stylesheet">
    <link href="../../styles/kendo.rtl.min.css" rel="stylesheet">
    <link href="../../styles/kendo.default.min.css" rel="stylesheet">
    <link href="../../styles/kendo.default.mobile.min.css" rel="stylesheet">
    <script src="../../js/jquery.min.js"></script>
    <script src="../../js/jszip.min.js"></script>
    <script src="../../js/kendo.all.min.js"></script>
    <script src="../content/shared/js/console.js"></script>
    <script>
        
    </script>
    
    
</head>
<body>
    
        <a class="offline-button" href="../index.html">Back</a>
    
    
<div id="example">

    <span id="notification" style="display:none;"></span>

    <div class="demo-section k-content" style="text-align: center;">

        <h4>Show notification:</h4>
        <p>
            <button id="showEmailNotification" class="k-button">Email</button><br />
            <button id="showErrorNotification" class="k-button">Error</button><br />
            <button id="showSuccessNotification" class="k-button">Upload Success</button>
        </p>
        <h4>Hide notification:</h4>
        <p>
            <button id="hideAllNotifications" class="k-button">Hide All Notifications</button>
        </p>

    </div>

    <script id="emailTemplate" type="text/x-kendo-template">
        <div class="new-mail">
            <img src="../content/web/notification/envelope.png" />
            <h3>#= title #</h3>
            <p>#= message #</p>
        </div>
    </script>

    <script id="errorTemplate" type="text/x-kendo-template">
        <div class="wrong-pass">
            <img src="../content/web/notification/error-icon.png" />
            <h3>#= title #</h3>
            <p>#= message #</p>
        </div>
    </script>

    <script id="successTemplate" type="text/x-kendo-template">
        <div class="upload-success">
            <img src="../content/web/notification/success-icon.png" />
            <h3>#= message #</h3>
        </div>
    </script>

    <script>
        $(document).ready(function() {

            var notification = $("#notification").kendoNotification({
                position: {
                    pinned: true,
                    top: 30,
                    right: 30
                },
                autoHideAfter: 0,
                stacking: "down",
                templates: [{
                    type: "info",
                    template: $("#emailTemplate").html()
                }, {
                    type: "error",
                    template: $("#errorTemplate").html()
                }, {
                    type: "success",
                    template: $("#successTemplate").html()
                }]

            }).data("kendoNotification");

            $("#showEmailNotification").click(function(){
                notification.show({
                    title: "New E-mail",
                    message: "You have 1 new mail message!"
                }, "info");
            });

            $("#showErrorNotification").click(function(){
                notification.show({
                    title: "Wrong Password",
                    message: "Please enter your password again."
                }, "error");
            });

            $("#showSuccessNotification").click(function(){
                notification.show({
                    message: "Upload Successful"
                }, "success");
            });

            $("#hideAllNotifications").click(function(){
                notification.hide();
            });

            $(document).one("kendo:pageUnload", function(){ if (notification) { notification.hide(); } });

        });
    </script>

    <style>
        .demo-section p {
            margin: 3px 0 20px;
            line-height: 50px;
        }
        .demo-section .k-button {
            width: 250px;
        }


        /* Notifications */
        .k-notification h3 {
            padding: 30px 10px 5px;
            font-size: 1em;
            line-height: normal;
        }
        .k-notification img {
            margin: 20px;
            float: left;
        }


        /* Info template */
        .new-mail {
            width: 300px;
            height: 100px;
        }

        /* Error template */
        .wrong-pass {
            width: 300px;
            height: 100px;
        }

        /* Success template */
        .upload-success {
            width: 300px;
            height: 100px;
        }


        /* For Bootstrap v4 theme */
        .k-bootstrap-v4 .k-notification h3 {
            padding: 10px 10px 5px;
        }
        .k-bootstrap-v4 .k-notification img {
            margin: 10px 20px 0 0;
        }
        .k-bootstrap-v4 .new-mail,
        .k-bootstrap-v4 .wrong-pass,
        .k-bootstrap-v4 .upload-success {
            width: calc( 300px - 2.5rem );
            height: calc( 100px - 1.5rem );
        }


        /* For Material v2 theme */
        .k-material-v2 .k-notification h3 {
            padding: 10px 10px 5px;
        }
        .k-material-v2 .k-notification img {
            margin: 10px 20px 0 0;
        }
        .k-material-v2 .new-mail,
        .k-material-v2 .wrong-pass,
        .k-material-v2 .upload-success {
            width: 270px;
            height: 70px;
        }
    </style>
</div>


    
</body>
</html>