jube-fork/Jube.App/wwwroot/kendo/examples/splitter/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>Pane index</h4>
            <ul class="options">
                <li>
                    <input id="index" type="text" value="0"/>
                </li>
            </ul>
        </div>
        <div class="box-col">
            <h4>Resize</h4>
            <ul class="options">
                <li>
                    <button id="toggle">Expand/Collapse</button>
                </li>
                <li>
                    <input id="size" type="text" value="100px" /> <button id="setSize" >Set size</button>
                </li>
                <li>
                    <input id="min" type="text" value="50px" /> <button id="setMinSize">Set minimum size</button>
                </li>
                <li>
                    <input id="max" type="text" value="150px" /> <button id="setMaxSize" >Set maximum size</button>
                </li>
            </ul>
        </div>
        <div class="box-col">
            <h4>Insert</h4>
            <ul class="options">
                <li>
                    <button id="appendPane">Append a pane</button>
                </li>
                <li>
                    <button id="removePane">Remove pane</button>
                </li>
                <li>
                    <button id="insertBefore">Insert before index</button>
                </li>
                <li>
                    <button id="insertAfter">Insert after index</button>
                </li>
            </ul>
        </div>
    </div>

    <div id="splitter">
        <div id="top_pane">
            <p>
                Left pane
            </p>
        </div>
        <div id="ajax_pane">
            <!-- content loaded with ajax -->
        </div>
        <div id="bottom_pane">
            <p>
                Right pane
            </p>
        </div>
    </div>

    <script>
        $(document).on("kendoReady", function() {
            var splitterElement = $("#splitter"),
                getPane = function (index) {
                    index = Number(index);

                    var panes = splitterElement.children(".k-pane");

                    if(!isNaN(index) && index < panes.length) {
                        return panes[index];
                    }
                },
                setSize = function (e) {
                    if (e.type != "keypress" || kendo.keys.ENTER == e.keyCode) {
                        var pane = getPane($("#index").val());

                        if (!pane) return;

                        splitter.size(pane, $("#size").val());
                    }
                },
                setMinSize = function (e) {
                    if (e.type != "keypress" || kendo.keys.ENTER == e.keyCode) {
                        var pane = getPane($("#index").val());

                        if (!pane) return;

                        splitter.min(pane, $("#min").val());
                    }
                },
                setMaxSize = function (e) {
                    if (e.type != "keypress" || kendo.keys.ENTER == e.keyCode) {
                        var pane = getPane($("#index").val());

                        if (!pane) return;

                        splitter.max(pane, $("#max").val());
                    }
                },
                appendPane = function (e) {
                    splitter.append().html("appended pane");
                },
                removePane = function (e) {
                    splitter.remove(splitter.element.children(".k-pane").eq($("#index").val()));
                },
                insertBefore = function (e) {
                    splitter.insertBefore({}, splitter.element.children(".k-pane").eq($("#index").val())).html("inserted before");
                },
                insertAfter = function (e) {
                    splitter.insertAfter({}, splitter.element.children(".k-pane").eq($("#index").val())).html("inserted after");
                };

            $("#toggle").click( function (e) {
                var pane = getPane($("#index").val());
                if (!pane) return;

                splitter.toggle(pane, $(pane).width() <= 0);
            });

            $("#setSize").click(setSize);
            $("#size").keypress(setSize);

            $("#setMinSize").click(setMinSize);
            $("#min").keypress(setMinSize);

            $("#setMaxSize").click(setMaxSize);
            $("#max").keypress(setMaxSize);

            $("#appendPane").click(appendPane);
            $("#removePane").click(removePane);

            $("#insertBefore").click(insertBefore);
            $("#insertAfter").click(insertAfter);

            var splitter = $("#splitter").kendoSplitter({
                orientation: "horizontal",
                panes: [
                    { collapsible: true, size: "100px" },
                    { collapsible: false, contentUrl: "../content/web/splitter/ajax/ajaxContent1.html" },
                    { collapsible: true, size: "20%" }
                ]
            }).data("kendoSplitter");
        });
    </script>
    <style>
        .box input
        {
            width: 80px;
        }
    </style>
</div>


    
        <div class='demo-section'>
            <h3>Note:</h3>
            <p>
                Security restrictions prevent this example from working in all browsers when the page is loaded from the file system (via file:// protocol).
                If the demo is not working as expected, please host the Kendo folder on a web server.
            </p>
        </div>
    
</body>
</html>