jube-fork/Jube.App/wwwroot/kendo/examples/drawer/mvvm.html

<!DOCTYPE html>
<html>
<head>
    <title>MVVM</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">
        <div id="toolbar"
             data-role="toolbar"
             data-items='[
   		        {"type": "button", "icon": "menu", attributes: { "class": "k-flat" }}
   	        ]'
             data-bind="events: { click: toggleDrawer }">
        </div>
        <div id="drawer"
             data-role="drawer"
             data-width="150"
             data-mode="push"
             data-template="<ul><li data-role='drawer-item'><span class='k-item-text'>First Item</span></li><li data-role='drawer-separator'></li><li data-role='drawer-item'><span class='k-item-text'>Second Item</span></li><li data-role='drawer-item' class='k-state-selected'><span class='k-item-text'>Third Item</span></li><li data-role='drawer-separator'></li><li data-role='drawer-item'><span class='k-item-text'>Last Item</span></li></ul>">
            <div style="height: 200px;">Lorem ipsum dolor sit amet consectetur adipisicing elit. Error accusantium odit, optio nulla maiores quo neque fugit debitis dignissimos incidunt maxime? Eum voluptatem blanditiis voluptatum praesentium dolorem, dolore placeat debitis quod delectus laborum assumenda cupiditate quaerat quam fugiat deleniti suscipit necessitatibus.</div>
        </div>
    </div>
    <script>
        var viewModel = kendo.observable({
            toggleDrawer: function () {
                var drawerInstance = $("#drawer").data().kendoDrawer;
                var drawerContainer = drawerInstance.drawerContainer;

                if (drawerContainer.hasClass("k-drawer-expanded")) {
                    drawerInstance.hide();
                } else {
                    drawerInstance.show();
                }
            }
        });

        kendo.bind($("#example"), viewModel);
    </script>
    <style>

        #example .demo-section {
            max-width: 640px;
        }

        .k-drawer-content {
            padding: 1em;
        }
    </style>
</div>


    
</body>
</html>