<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
|
<html>
|
<head>
|
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
|
<title>Ext JS - Side Tabs</title>
|
<!-- Ext includes -->
|
<script type="text/javascript" src="../../examples/shared/include-ext.js"></script>
|
<script type="text/javascript" src="../../examples/shared/options-toolbar.js"></script>
|
|
<!-- Shared example includes -->
|
<link rel="stylesheet" type="text/css" href="../shared/example.css" />
|
<script type="text/javascript" src="../shared/examples.js"></script>
|
|
<!-- Example includes -->
|
<link rel="stylesheet" type="text/css" href="side-tabs.css" />
|
|
<!-- GC -->
|
|
<script type="text/javascript" src="side-tabs.js"></script>
|
|
</head>
|
<body>
|
<h1>Side Tabs</h1>
|
<p>Note that the JS and CSS are not minified so they are readable. See <a href="side-tabs.js">side-tabs.js</a> for the tab creation code.</p>
|
|
<p>
|
This example demonstrates side-aligned tabs in Ext JS. Tab Panels can be configured
|
with a tabPosition of "right" to rotate the tab bar clockwise, or "left" to rotate
|
the tab bar counter-clockwise.
|
</p>
|
|
<div id="left-tabs" class="tab-cont">
|
<h2>Left-Aligned Tabs</h2>
|
</div>
|
|
<div id="right-tabs" class="tab-cont">
|
<h2>Right-Aligned Tabs</h2>
|
</div>
|
<div class="x-clear"></div>
|
<div id="left-scroll-tabs" class="tab-cont">
|
<h2>Left-Aligned Tabs With Scrolling</h2>
|
</div>
|
<div id="right-scroll-tabs" class="tab-cont">
|
<h2>Right-Aligned Tabs With Scrolling</h2>
|
</div>
|
|
</body>
|
</html>
|
