jube-fork/Jube.App/wwwroot/kendo/examples/menu/events.html

<!DOCTYPE html>
<html>
<head>
    <title>Events</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">                    
            <div class="demo-section k-content">
                <h4>Menu</h4>
                <ul id="menu">
                    <li>
                        First Item
                        <ul>
                            <li>Sub Item 1</li>
                            <li>Sub Item 2</li>
                            <li>Sub Item 3</li>
                            <li>Sub Item 4</li>
                        </ul>
                    </li>
                    <li>
                        Second Item
                        <ul>
                            <li>Sub Item 1</li>
                            <li>Sub Item 2</li>
                            <li>Sub Item 3</li>
                            <li>Sub Item 4</li>
                        </ul>
                    </li>
                    <li>
                        Third Item
                        <ul>
                            <li>Sub Item 1</li>
                            <li>Sub Item 2</li>
                            <li>Sub Item 3</li>
                            <li>Sub Item 4</li>
                        </ul>
                    </li>
                </ul>
                <h4 style="padding-top: 2em;">Context Menu</h4>
                <ul id="context-menu-events">
                    <li>animation
                        <ul>
                            <li>slideIn</li>
                            <li>fadeIn</li>
                            <li>expand</li>
                        </ul>
                    </li>
                    <li>animation.close
                        <ul>
                            <li>animation.close.effects</li>
                            <li>animation.close.duration</li>
                        </ul>
                    </li>
                    <li>animation.open
                        <ul>
                            <li>animation.open.effects</li>
                            <li>animation.open.duration</li>
                        </ul>
                    </li>
                </ul>
                <p>A collection of <span id="context-target">Animation (?)</span> objects, used to change default animations. A value of false will disable all animations in the widget.</p>
            </div>            
        </div>
        <script>
            $(document).ready(function() {
                function onOpen(e) {
                    kendoConsole.log("Opened: " + ($(e.item).children(".k-link").text() || "ContextMenu"));
                }

                function onClose(e) {
                    kendoConsole.log("Closed: " + ($(e.item).children(".k-link").text() || "ContextMenu"));
                }

                function onSelect(e) {
                    kendoConsole.log("Selected: " + $(e.item).children(".k-link").text());
                }

                function onActivate(e) {
                    kendoConsole.log("Activated: " + ($(e.item).children(".k-link").text() || "ContextMenu"));
                }

                function onDeactivate(e) {
                    kendoConsole.log("Deactivated: " + ($(e.item).children(".k-link").text() || "ContextMenu"));
                }

                $("#menu").kendoMenu({
                    select: onSelect,
                    open: onOpen,
                    close: onClose,
                    activate: onActivate,
                    deactivate: onDeactivate
                });

                $("#context-menu-events").kendoContextMenu({
                    target: "#context-target",
                    showOn: "click",
                    alignToAnchor: true,
                    select: onSelect,
                    open: onOpen,
                    close: onClose,
                    activate: onActivate,
                    deactivate: onDeactivate
                });
            });
        </script>

        <style>
            .demo-section .box-col li {
                margin-bottom: 0;
            }
            #context-target {
                cursor: pointer;
                color: red;
            }
            #context-target:hover {
                text-decoration: underline;
            } 
        </style>


    
</body>
</html>