// create outer splitter $outer = new \Kendo\UI\Splitter('vertical'); $outer->orientation("vertical"); $topPane = new \Kendo\UI\SplitterPane(); $topPane->attr("id", "top-pane")->collapsible(false)->content($inner->render()); $bottomPane = new \Kendo\UI\SplitterPane(); $bottomPane->attr("id", "bottom-pane")->collapsible(false)->resizable(false)->size(100)->startContent(); ?> <div class="pane-content"> <h3>Outer splitter / bottom pane</h3> <p>Non-resizable and non-collapsible.</p> </div> <?php $bottomPane->endContent(); $outer->addPane($topPane, $bottomPane); echo $outer->render(); ?> <ul id="keyboard-nav" class="keyboard-legend"> <li> <span class="button-preview"> <span class="key-button leftAlign wider">Alt</span> <span class="key-button">w</span> </span> <span class="button-descr"> focuses first splitbar </span> </li> </ul> <ul class="keyboard-legend">
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) { kendoConsole.log("Collapsed :: Pane <b>#" + e.pane.id + "</b> from splitter <b>#" + this.element[0].id + "</b> collapsed"); }