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

<!DOCTYPE html>
<html>
<head>
    <title>API</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="configurator">
        <div class="header">Configurator</div>
        <div class="box-col">
            <h4>Enable / Disable</h4>
            <ul class="options">
                <li>
                    <input type="text" id="toggleIndex"/> <button class="toggleItem">Enable/Disable</button>
                </li>
                <li>
                    <button class="toggleTextItems">Enable/Disable all Sub Item 3</button>
                </li>
                <li>
                    <button class="toggleStrongItems">Enable/Disable <strong>strong</strong> elements</button>
                </li>
                <li>
                    <button class="toggleRedTextItems">Enable/Disable <span class="redText">.redText</span> elements</button>
                </li>
            </ul>
        </div>
        <div class="box-col">
            <h4>Add / Remove</h4>
            <ul class="options">
                <li>
                    <input type="text" id="removeIndex"/> <button class="removeItem k-button">Remove</button>
                </li>
                <li>
                    <input type="text" value="Item" id="appendText"/> <span class="append-position">under</span> <input type="text" value="0.0" id="appendIndex"/> <button class="appendItem">Append</button>
                </li>
                <li>
                    <input type="text" value="Item" id="beforeText"/> <span class="append-position">before</span> <input type="text" value="0" id="beforeIndex"/> <button class="beforeItem">Append</button>
                </li>
                <li>
                    <input type="text" value="Item" id="afterText"/> <span class="append-position">after</span> <input type="text" value="0" id="afterIndex"/> <button class="afterItem">Append</button>
                </li>
            </ul>
        </div>
        <div class="box-col">
            <h4>Open / Close</h4>
            <ul class="options">
                <li>
                    <input type="text" id="triggerIndex" class="k-textbox" /> <button class="triggerItem">Open/Close</button>
                </li>
            </ul>
        </div>
    </div>

    <div class="demo-section k-content wide">
        <ul id="menu"></ul>
    </div>

    <script>
        $(document).ready(function () {
            // You can also find an item by its cssClass
            var getItem = function (target) {
                var itemIndexes = target.val().split(/[.,]/),
                    item = menu.element;

                if (itemIndexes[0] !== "") {
                    for (var i = 0, len = itemIndexes.length; i < len; i++) {
                        item = item.children("li").eq(itemIndexes[i]);
                        if (i < len - 1) {
                            item = item.find("ul:first");
                        }
                    }
                }

                return item;
            },
                toggle = function (e) {
                    if (e.type != "keypress" || kendo.keys.ENTER == e.keyCode) {
                        var item = getItem($("#toggleIndex"));
                        menu.enable(item, item.hasClass("k-state-disabled"));
                    }
                },
                trigger = function (e) {
                    if (e.type != "keypress" || kendo.keys.ENTER == e.keyCode) {
                        var item = getItem($("#triggerIndex"));

                        if (item.children().eq(0).hasClass("k-state-active")) {
                            menu.close(item);
                        } else {
                            menu.open(item);
                        }
                    }
                },
                remove = function (e) {
                    if (e.type != "keypress" || kendo.keys.ENTER == e.keyCode)
                        menu.remove(getItem($("#removeIndex")));
                },
                append = function (e) {
                    if (e.type != "keypress" || kendo.keys.ENTER == e.keyCode) {
                        menu.append({
                            text: $("#appendText").val()
                        }, getItem($("#appendIndex")));
                    }
                },
                before = function (e) {
                    if (e.type != "keypress" || kendo.keys.ENTER == e.keyCode) {
                        menu.insertBefore({
                            text: $("#beforeText").val()
                        }, getItem($("#beforeIndex")));
                    }
                },
                after = function (e) {
                    if (e.type != "keypress" || kendo.keys.ENTER == e.keyCode) {
                        menu.insertAfter({
                            text: $("#afterText").val()
                        }, getItem($("#afterIndex")));
                    }
                },

                toggleText = function () {
                    var items = $("#menu").find(".k-link:contains(Sub Item 3)").parent();
                    menu.enable(items, items.hasClass("k-state-disabled"));
                },

                toggleStrong = function () {
                    var items = $("#menu").find(":has(> strong)").parent();
                    menu.enable(items, items.hasClass("k-state-disabled"));
                },

                toggleRedText = function () {
                    menu.enable(".redText", $("#menu").find(".redText").hasClass("k-state-disabled"));
                };

            $(".toggleItem").click(toggle);
            $("#toggleIndex").keypress(toggle);

            $(".triggerItem").click(trigger);
            $("#triggerIndex").keypress(trigger);

            $(".removeItem").click(remove);
            $("#removeIndex").keypress(remove);

            $(".appendItem").click(append);
            $("#appendText,#appendIndex").keypress(append);

            $(".beforeItem").click(before);
            $("#beforeText,#beforeIndex").keypress(before);

            $(".afterItem").click(after);
            $("#afterText,#afterIndex").keypress(after);

            $(".toggleTextItems").click(toggleText);
            $(".toggleStrongItems").click(toggleStrong);
            $(".toggleRedTextItems").click(toggleRedText);
        });

        var menu = $("#menu").kendoMenu({
            dataSource: [
                {
                    text: "First Item",
                    items: [
                        { text: "Sub Item 1" },
                        { text: "<strong>Sub Item 2</strong>", encoded: false },
                        { text: "Sub Item 3" },
                        { text: "Sub Item 4" }
                    ]
                },
                {
                    text: "<strong>Second Item</strong>",
                    encoded: false,
                    items: [
                        { text: "Sub Item 1" },
                        { text: "Sub Item 2" },
                        { text: "Sub Item 3" },
                        { text: "Sub Item 4" }
                    ]
                },
                {
                    text: "<strong>Third Item</strong>",
                    encoded: false,
                    items: [
                        { text: "Sub Item 1" },
                        { text: "Sub Item 2" },
                        { text: "Sub Item 3" },
                        { text: "Sub Item 4" }
                    ]
                },
                {
                    text: "Fourth Item",
                    cssClass: "redText",
                    items: [
                        { text: "Sub Item 1" },
                        { text: "<strong>Sub Item 2</strong>", encoded: false },
                        { text: "Sub Item 3" },
                        { text: "Sub Item 4" }
                    ]
                },
                {
                    text: "Fifth Item",
                    items: [
                        { text: "Sub Item 1" },
                        { text: "Sub Item 2", cssClass: "redText" },
                        { text: "Sub Item 3" },
                        { text: "Sub Item 4" }
                    ]
                }
            ]
        }).data("kendoMenu");
    </script>
    <style>
        .append-position {
            display: inline-block;
            min-width: 45px;
        }

        .redText,
        .redText > .k-link {
            color: red;
        }

        .redText.k-state-disabled > .k-link {
            color: lightcoral;
        }
    </style>
</div>


    
</body>
</html>