Exemplos de Kendo\UI\Splitter::render em PHP

Exemplo n.º 1

Arquivo: keyboard-navigation.php Projeto: neevan1e/Done

// 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">

Exemplo n.º 2

Arquivo: events.php Projeto: neevan1e/Done

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");
    }