<html>
|
<head>
|
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
|
<title>Advanced 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="tabs-adv.css" />
|
|
<!-- GC -->
|
|
<script type="text/javascript" src="tabs-adv.js"></script>
|
|
</head>
|
<body>
|
<h1>Advanced Tabs</h1>
|
<p>Note that the JS and CSS are not minified so they are readable. See <a href="tabs-adv.js">tabs-adv.js</a> for the tab creation code.</p>
|
|
<p>This TabPanel is built entirely with JavaScript and demonstrates:</p>
|
|
<ul class="list">
|
<li>Auto tab resizing</li>
|
<li>Tab scrolling</li>
|
<li>Tabs with icons</li>
|
<li>Tab plugins (context menu)</li>
|
<li>Adding tabs with JS</li>
|
<li>Changing a tab's closable property dynamically (via the context menu)</li>
|
<li>Disabling a tab (also via the context menu)</li>
|
</ul>
|
<br>
|
<div id="addButtonCt"></div>
|
<br>
|
<div id="tabs" style="margin:15px 0;"></div>
|
</body>
|
</html>
|
