<ul class="options">
<li>
<input id="toggle" name="animation" type="radio" /> <label for="toggle">toggle animation</label>
</li>
<li>
<input id="expand" name="animation" type="radio" checked="checked" /> <label for="expand">expand animation</label>
</li>
<li>
<input id="opacity" type="checkbox" checked="checked" /> <label for="opacity">animate opacity</label>
</li>
</ul>
</div>
<div class="history">
<?php
$panelbar = new \Kendo\UI\PanelBar('panelbar');
$today = new \Kendo\UI\PanelBarItem("Today");
$today->expanded(true)->addItem(new \Kendo\UI\PanelBarItem("Jane King"), new \Kendo\UI\PanelBarItem("Bob Fuller"), new \Kendo\UI\PanelBarItem("Lynda Kallahan"), new \Kendo\UI\PanelBarItem("Matt Sutnar"));
$panelbar->addItem($today);
$yesterday = new \Kendo\UI\PanelBarItem("Today");
$yesterday->addItem(new \Kendo\UI\PanelBarItem("Stewart "), new \Kendo\UI\PanelBarItem("Jane King"), new \Kendo\UI\PanelBarItem("Steven"), new \Kendo\UI\PanelBarItem("Ken Stone"));
$panelbar->addItem($yesterday);
$wednesday = new \Kendo\UI\PanelBarItem("Wednesday, February 01, 2012");
$wednesday->addItem(new \Kendo\UI\PanelBarItem("Jane King"), new \Kendo\UI\PanelBarItem("Lynda Kallahan"), new \Kendo\UI\PanelBarItem("Todd "), new \Kendo\UI\PanelBarItem("Bob Fuller"));
$panelbar->addItem($wednesday);
$tuesday = new \Kendo\UI\PanelBarItem("Tuesday, January 31, 2012");
$tuesday->addItem(new \Kendo\UI\PanelBarItem("Emily Davolio"), new \Kendo\UI\PanelBarItem("Matt Sutnar"), new \Kendo\UI\PanelBarItem("Bob Fuller"), new \Kendo\UI\PanelBarItem("Jenn Heinlein"));
$panelbar->addItem($tuesday);
$monday = new \Kendo\UI\PanelBarItem("Monday, January 30, 2012");
$monday->addItem(new \Kendo\UI\PanelBarItem("Matt Sutnar"), new \Kendo\UI\PanelBarItem("Joshua"), new \Kendo\UI\PanelBarItem("Michael"), new \Kendo\UI\PanelBarItem("Jenn Heinlein"));
$panelbar->addItem($monday);
$swimming->imageUrl("../content/shared/icons/sports/swimming.png");
$swimming->addItem(array("text" => "Top News", "imageUrl" => "../content/shared/icons/16/star.png"), array("text" => "Photo Galleries", "imageUrl" => "../content/shared/icons/16/photo.png"));
$snowboarding = new \Kendo\UI\PanelBarItem("Snowboarding");
$snowboarding->imageUrl("../content/shared/icons/sports/snowboarding.png");
$snowboarding->addItem(array("text" => "Photo Galleries", "imageUrl" => "../content/shared/icons/16/photo.png"), array("text" => "Videos Records", "imageUrl" => "../content/shared/icons/16/video.png"));
$panelbar->dataSource(array($baseball, $golf, $swimming, $snowboarding));
echo $panelbar->render();
?>
</div>
<div class="demo-section">
<h3>PanelBar with sprites</h3>
<?php
$panelbar = new \Kendo\UI\PanelBar('panelbar-sprites');
$brazil = new \Kendo\UI\PanelBarItem("Brail");
$brazil->spriteCssClass("brazilFlag");
$brazil->addItem(array("text" => "History", "spriteCssClass" => "historyIcon"), array("text" => "Geography", "spriteCssClass" => "geographyIcon"));
$india = new \Kendo\UI\PanelBarItem("India");
$india->imageUrl("indiaFlag");
$india->addItem(array("text" => "Top News", "spriteCssClass" => "historyIcon"), array("text" => "Photo Galleries", "spriteCssClass" => "geographyIcon"));
$netherlands = new \Kendo\UI\PanelBarItem("Netherlands");
$netherlands->spriteCssClass("netherlandsFlag");
$netherlands->addItem(array("text" => "Top News", "spriteCssClass" => "historyIcon"), array("text" => "Photo Galleries", "spriteCssClass" => "geographyIcon"));
$panelbar->dataSource(array($brazil, $india, $netherlands));
echo $panelbar->render();
?>
</div>
<style scoped>
<?php
require_once '../include/header.php';
require_once '../lib/Kendo/Autoload.php';
$panelbar = new \Kendo\UI\PanelBar('panelbar');
$panelbar->attr('style', 'width: 250px; margin: 20px auto;')->expandMode("single");
$metallica = new \Kendo\UI\PanelBarItem("Metallica - Master of Puppets 1986");
$metallica->expanded(true);
$metallica->addItem(new \Kendo\UI\PanelBarItem("Battery"), new \Kendo\UI\PanelBarItem("Master of Puppets"), new \Kendo\UI\PanelBarItem("The Thing That Should Not Be"), new \Kendo\UI\PanelBarItem("Welcome Home (Sanitarium)"), new \Kendo\UI\PanelBarItem("Disposable Heroes"), new \Kendo\UI\PanelBarItem("Leper Messiah"), new \Kendo\UI\PanelBarItem("Orion (Instrumental)"), new \Kendo\UI\PanelBarItem("Damage, Inc."));
$panelbar->addItem($metallica);
$ironmaiden = new \Kendo\UI\PanelBarItem("Iron Maiden - Brave New World 2000");
$ironmaiden->addItem(new \Kendo\UI\PanelBarItem("The Wicker Man"), new \Kendo\UI\PanelBarItem("Ghost Of The Navigator"), new \Kendo\UI\PanelBarItem("Brave New World"), new \Kendo\UI\PanelBarItem("Blood Brothers"), new \Kendo\UI\PanelBarItem("The Mercenary"), new \Kendo\UI\PanelBarItem("Dream Of Mirrors"), new \Kendo\UI\PanelBarItem("The Fallen Angel"), new \Kendo\UI\PanelBarItem("The Nomad"), new \Kendo\UI\PanelBarItem("Out Of The Silent Planet"), new \Kendo\UI\PanelBarItem("The Thin Line Between Love And Hate"));
$panelbar->addItem($ironmaiden);
$empty = new \Kendo\UI\PanelBarItem("Empty Item");
$panelbar->addItem($empty);
$ajax = new \Kendo\UI\PanelBarItem("Ajax Item");
$ajax->contentUrl("../content/web/panelbar/ajax/ajaxContent1.html");
$panelbar->addItem($ajax);
$error = new \Kendo\UI\PanelBarItem("Error Item");
$error->contentUrl("error.html");
$panelbar->addItem($error);
$panelbar->select("onSelect")->expand("onExpand")->expand("onExpand")->collapse("onCollapse")->activate("onActivate")->contentLoad("onContentLoad")->error("onError");
echo $panelbar->render();
?>
<script>
function onSelect(e) {
kendoConsole.log("Select: " + $(e.item).find("> .k-link").text());
}
<?php
require_once '../include/header.php';
require_once '../lib/Kendo/Autoload.php';
?>
<div class="wrapper">
<?php
$panelbar = new \Kendo\UI\PanelBar('panelbar');
$panelbar->expandMode('single');
$body = new \Kendo\UI\PanelBarItem("BODY");
$body->contentUrl("../content/web/panelbar/ajax/ajaxContent1.html");
$engine = new \Kendo\UI\PanelBarItem("ENGINE");
$engine->contentUrl("../content/web/panelbar/ajax/ajaxContent2.html");
$transmission = new \Kendo\UI\PanelBarItem("TRANSMISSION");
$transmission->contentUrl("../content/web/panelbar/ajax/ajaxContent3.html");
$performance = new \Kendo\UI\PanelBarItem("PERFORMANCE");
$performance->contentUrl("../content/web/panelbar/ajax/ajaxContent4.html");
$panelbar->addItem($body, $engine, $transmission, $performance);
echo $panelbar->render();
?>
</div>
<div class="configuration configuration-horizontal-bottom">
<span class="infoHead">Information</span>
<p>Image courtesy of Aston Martin</p>
<p>
<strong>Note:</strong>
Security restrictions in Chrome prevent this
example from working when the page is
loaded from the file system (via file:// protocol).
<?php
require_once '../include/header.php';
require_once '../lib/Kendo/Autoload.php';
?>
<div class="demo-section">
<?php
$panelbar = new \Kendo\UI\PanelBar('panelbar');
$panelbar->attr('accesskey', 'w')->expandMode("multiple");
$salesforecasts = new \Kendo\UI\PanelBarItem("Sales Forecasts");
$salesforecasts->addItem(new \Kendo\UI\PanelBarItem("Q1 Forecast"), new \Kendo\UI\PanelBarItem("Q2 Forecast"), new \Kendo\UI\PanelBarItem("Q3 Forecast"), new \Kendo\UI\PanelBarItem("Q4 Forecast"));
$projects = new \Kendo\UI\PanelBarItem("Projects");
$projects->addItem(new \Kendo\UI\PanelBarItem("New Business Plan"), $salesforecasts, new \Kendo\UI\PanelBarItem("Sales Reports"));
$panelbar->addItem($projects);
$programs = new \Kendo\UI\PanelBarItem("Programs");
$programs->addItem(new \Kendo\UI\PanelBarItem("Monday"), new \Kendo\UI\PanelBarItem("Tuesday"), new \Kendo\UI\PanelBarItem("Wednesday"), new \Kendo\UI\PanelBarItem("Thursday"), new \Kendo\UI\PanelBarItem("Friday"));
$panelbar->addItem($programs);
$communication = new \Kendo\UI\PanelBarItem("Communication");
$communication->enabled(false);
$panelbar->addItem($communication);
echo $panelbar->render();
?>
</div>
<ul class="keyboard-legend">
<li>
<span class="button-preview">
<span class="key-button leftAlign wider"><a target="_blank" href="http://en.wikipedia.org/wiki/Access_key">Access key</a></span>
<button class="removeItem k-button">Remove</button>
</li>
<li>
<input type="text" value="Item" id="appendText" class="k-textbox"/> <button class="appendItem k-button">Append</button>
</li>
<li>
<input type="text" value="Item" id="beforeText" class="k-textbox"/> <button class="beforeItem k-button">Insert Before</button>
</li>
<li>
<input type="text" value="Item" id="afterText" class="k-textbox"/> <button class="afterItem k-button">Insert After</button>
</li>
</ul>
</div>
<?php
$panelbar = new \Kendo\UI\PanelBar('panelbar');
$panelbar->attr('style', 'margin-right: 220px;');
$first = new \Kendo\UI\PanelBarItem("First Item");
$first->expanded(true);
$first->addItem(new \Kendo\UI\PanelBarItem("Sub Item 1"), new \Kendo\UI\PanelBarItem("Sub Item 2"), new \Kendo\UI\PanelBarItem("Sub Item 3"), new \Kendo\UI\PanelBarItem("Sub Item 4"));
$panelbar->addItem($first);
$second = new \Kendo\UI\PanelBarItem("Second Item");
$second->addItem(new \Kendo\UI\PanelBarItem("Sub Item 1"), new \Kendo\UI\PanelBarItem("Sub Item 2"), new \Kendo\UI\PanelBarItem("Sub Item 3"), new \Kendo\UI\PanelBarItem("Sub Item 4"));
$panelbar->addItem($second);
$third = new \Kendo\UI\PanelBarItem("Third Item");
$third->addItem(new \Kendo\UI\PanelBarItem("Sub Item 1"), new \Kendo\UI\PanelBarItem("Sub Item 2"), new \Kendo\UI\PanelBarItem("Sub Item 3"), new \Kendo\UI\PanelBarItem("Sub Item 4"));
$panelbar->addItem($third);
$fourth = new \Kendo\UI\PanelBarItem("Fourth Item");
$fourth->addItem(new \Kendo\UI\PanelBarItem("Sub Item 1"), new \Kendo\UI\PanelBarItem("Sub Item 2"), new \Kendo\UI\PanelBarItem("Sub Item 3"), new \Kendo\UI\PanelBarItem("Sub Item 4"));
$panelbar->addItem($fourth);
$fifth = new \Kendo\UI\PanelBarItem("Fifth Item");
<?php
require_once '../include/header.php';
require_once '../lib/Kendo/Autoload.php';
$panelbar = new \Kendo\UI\PanelBar('panelbar');
$panelbar->attr('style', 'width: 300px')->expandMode('single');
$teamMates = new \Kendo\UI\PanelBarItem();
$teamMates->text('My Teammates')->expanded(true)->startContent();
?>
<div style="padding: 10px;">
<div class="teamMate">
<img src="../content/web/panelbar/andrew.jpg" alt="Andrew Fuller">
<h2>Andrew Fuller</h2>
<p>Team Lead</p>
</div>
<div class="teamMate">
<img src="../content/web/panelbar/nancy.jpg" alt="Nancy Leverling">
<h2>Nancy Leverling</h2>
<p>Sales Associate</p>
</div>
<div class="teamMate">
<img src="../content/web/panelbar/robert.jpg" alt="Robert King">
<h2>Robert King</h2>
<p>Business System Analyst</p>
</div>
</div>
<?php
$teamMates->endContent();
$panelbar->addItem($teamMates);
<?php
require_once '../include/header.php';
require_once '../lib/Kendo/Autoload.php';
?>
<div class="k-rtl">
<?php
$panelbar = new \Kendo\UI\PanelBar('panelbar');
$first = new \Kendo\UI\PanelBarItem("First Item");
$first->expanded(true);
$first->addItem(new \Kendo\UI\PanelBarItem("Sub Item 1"), new \Kendo\UI\PanelBarItem("Sub Item 2"), new \Kendo\UI\PanelBarItem("Sub Item 3"), new \Kendo\UI\PanelBarItem("Sub Item 4"));
$panelbar->addItem($first);
$second = new \Kendo\UI\PanelBarItem("Second Item");
$second->addItem(new \Kendo\UI\PanelBarItem("Sub Item 1"), new \Kendo\UI\PanelBarItem("Sub Item 2"), new \Kendo\UI\PanelBarItem("Sub Item 3"), new \Kendo\UI\PanelBarItem("Sub Item 4"));
$panelbar->addItem($second);
$third = new \Kendo\UI\PanelBarItem("Third Item");
$third->addItem(new \Kendo\UI\PanelBarItem("Sub Item 1"), new \Kendo\UI\PanelBarItem("Sub Item 2"), new \Kendo\UI\PanelBarItem("Sub Item 3"), new \Kendo\UI\PanelBarItem("Sub Item 4"));
$panelbar->addItem($third);
echo $panelbar->render();
?>
</div>
<?php
require_once '../include/footer.php';
