<?php require_once '../include/header.php'; require_once '../lib/Kendo/Autoload.php'; ?> <?php $splitter = new \Kendo\UI\Splitter('splitter'); $splitter->attr('style', 'height: 400px;')->orientation('vertical')->resize('onResize')->expand('onExpand')->collapse('onCollapse')->contentLoad('onContentLoad'); $topPane = new \Kendo\UI\SplitterPane(); $topPane->attr('id', 'top_pane')->content('<p>Top pane</p>')->collapsible(true)->size(100); $splitter->addPane($topPane); $ajaxPane = new \Kendo\UI\SplitterPane(); $ajaxPane->attr('id', 'ajax_pane')->contentUrl('../content/web/splitter/ajax/ajaxContent1.html')->collapsible(false); $splitter->addPane($ajaxPane); $bottomPane = new \Kendo\UI\SplitterPane(); $bottomPane->attr('id', 'bottom_pane')->content('<p>Bottom pane</p>')->collapsible(true)->size('20%'); $splitter->addPane($bottomPane); echo $splitter->render(); ?> <script> function onResize(e) { kendoConsole.log("Resized :: Splitter <b>#" + this.element[0].id + "</b>"); } function onExpand(e) { kendoConsole.log("Expanded :: Pane <b>#" + e.pane.id + "</b> from splitter <b>#" + this.element[0].id + "</b> expanded"); } function onCollapse(e) {
<?php require_once '../include/header.php'; require_once '../lib/Kendo/Autoload.php'; ?> <?php // create inner splitter $inner = new \Kendo\UI\Splitter('horizontal'); $inner->attr("style", "height: 100%; width: 100%;"); $leftPane = new \Kendo\UI\SplitterPane(); $leftPane->attr("id", "left-pane")->collapsible(true)->size(220)->startContent(); ?> <div class="pane-content"> <h3>Inner splitter / left pane</h3> <p>Resizable and collapsible.</p> </div> <?php $leftPane->endContent(); $inner->addPane($leftPane); $centerPane = new \Kendo\UI\SplitterPane(); $centerPane->attr("id", "center-pane")->collapsible(false)->startContent(); ?> <div class="pane-content"> <h3>Inner splitter / center pane</h3> <p>Resizable only.</p> </div> <?php $centerPane->endContent(); $inner->addPane($centerPane); $rightPane = new \Kendo\UI\SplitterPane();
</li> <li> <button id="removePane" class="k-button">Remove pane</button> </li> <li> <button id="insertBefore" class="k-button">Insert before index</button> </li> <li> <button id="insertAfter" class="k-button">Insert after index</button> </li> </ul> </div> <?php $splitter = new \Kendo\UI\Splitter('splitter'); $splitter->attr('style', 'height: 300px; width: 72%;'); $topPane = new \Kendo\UI\SplitterPane(); $topPane->attr('id', 'top_pane')->content('<p>Left pane</p>')->collapsible(true)->size(100); $splitter->addPane($topPane); $ajaxPane = new \Kendo\UI\SplitterPane(); $ajaxPane->attr('id', 'ajax_pane')->contentUrl('../content/web/splitter/ajax/ajaxContent1.html')->collapsible(false); $splitter->addPane($ajaxPane); $bottomPane = new \Kendo\UI\SplitterPane(); $bottomPane->attr('id', 'bottom_pane')->content('<p>Right pane</p>')->collapsible(true)->size('20%'); $splitter->addPane($bottomPane); echo $splitter->render(); ?> <script> var panes = $("#splitter").children(), getPane = function (index) {