Andreas Hocevar
290 lines
10 KiB
HTML
290 lines
10 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<!--
|
|
Copyright 2010 The Closure Library Authors. All Rights Reserved.
|
|
|
|
Use of this source code is governed by the Apache License, Version 2.0.
|
|
See the COPYING file for details.
|
|
-->
|
|
<head>
|
|
<title>goog.ui.TabBar</title>
|
|
<link rel="stylesheet" href="css/demo.css">
|
|
<link rel="stylesheet" href="../css/roundedtab.css">
|
|
<link rel="stylesheet" href="../css/tab.css">
|
|
<link rel="stylesheet" href="../css/tabbar.css">
|
|
<style>
|
|
fieldset {
|
|
padding: 10px;
|
|
border: 1px solid #369;
|
|
}
|
|
|
|
.goog-tab-content {
|
|
height: 9em;
|
|
margin: 0;
|
|
border: 1px solid #6b90da;
|
|
border-top: 0;
|
|
padding: 4px 8px;
|
|
background: #fff;
|
|
overflow: auto;
|
|
}
|
|
</style>
|
|
<script src="../base.js"></script>
|
|
<script>
|
|
goog.require('goog.debug.DivConsole');
|
|
goog.require('goog.debug.LogManager');
|
|
goog.require('goog.dom');
|
|
goog.require('goog.events');
|
|
goog.require('goog.events.EventType');
|
|
goog.require('goog.log');
|
|
goog.require('goog.log.Level');
|
|
goog.require('goog.object');
|
|
goog.require('goog.ui.Component.EventType');
|
|
goog.require('goog.ui.RoundedTabRenderer');
|
|
goog.require('goog.ui.Tab');
|
|
goog.require('goog.ui.TabBar');
|
|
</script>
|
|
</head>
|
|
<body>
|
|
<h1>goog.ui.TabBar</h1>
|
|
<p>
|
|
A <b>goog.ui.TabBar</b> is a subclass of <b>goog.ui.Container</b>,
|
|
designed to host one or more <b>goog.ui.Tab</b>s. The tabs in the
|
|
first four tab bars on this demo page were decorated using the default
|
|
tab renderer. Tabs in the last two tab bars were decorated using the
|
|
rounded tab renderer (<b>goog.ui.RoundedTabRenderer</b>).
|
|
</p>
|
|
<table border="0" cellpadding="0" cellspacing="10" width="100%">
|
|
<tbody>
|
|
<tr valign="top">
|
|
<td width="50%">
|
|
<b>Above tab content:</b><br><br>
|
|
<div id="top" class="goog-tab-bar goog-tab-bar-top">
|
|
<div class="goog-tab goog-tab-selected">Hello</div>
|
|
<div class="goog-tab">Settings</div>
|
|
<div class="goog-tab">More</div>
|
|
<div class="goog-tab goog-tab-disabled">Advanced</div>
|
|
</div>
|
|
<!-- Use goog-tab-bar-clear to separate the tabs from the content. -->
|
|
<div class="goog-tab-bar-clear"></div>
|
|
<div id="top_content" class="goog-tab-content">
|
|
Use the keyboard or the mouse to switch tabs.
|
|
</div>
|
|
<label>
|
|
Show/hide the first tab
|
|
<input type="checkbox" id="show_top" checked>
|
|
</label>
|
|
<label>
|
|
Enable/disable the fourth tab
|
|
<input type="checkbox" id="enable_top">
|
|
</label>
|
|
</td>
|
|
<td width="50%">
|
|
<b>Below tab content:</b><br><br>
|
|
<div id="bottom_content" class="goog-tab-content">
|
|
Use the keyboard or the mouse to switch tabs.
|
|
</div>
|
|
<!-- Use goog-tab-bar-clear to separate the tabs from the content. -->
|
|
<div class="goog-tab-bar-clear"></div>
|
|
<div id="bottom" class="goog-tab-bar goog-tab-bar-bottom">
|
|
<div class="goog-tab">Hello</div>
|
|
<div class="goog-tab goog-tab-selected">Settings</div>
|
|
<div class="goog-tab">More</div>
|
|
<div class="goog-tab goog-tab-disabled">Advanced</div>
|
|
</div>
|
|
<!-- Use goog-tab-bar-clear to separate the tabs from the content. -->
|
|
<div class="goog-tab-bar-clear"></div>
|
|
<label>
|
|
Show/hide the first tab
|
|
<input type="checkbox" id="show_bottom" checked>
|
|
</label>
|
|
<label>
|
|
Enable/disable the fourth tab
|
|
<input type="checkbox" id="enable_bottom">
|
|
</label>
|
|
</td>
|
|
</tr>
|
|
<tr valign="top">
|
|
<td width="50%">
|
|
<b>Before tab content:</b><br><br>
|
|
<div id="start" class="goog-tab-bar goog-tab-bar-start">
|
|
<div class="goog-tab">Hello</div>
|
|
<div class="goog-tab">Settings</div>
|
|
<div class="goog-tab goog-tab-selected">More</div>
|
|
<div class="goog-tab goog-tab-disabled">Advanced</div>
|
|
</div>
|
|
<div id="start_content" class="goog-tab-content">
|
|
Use the keyboard or the mouse to switch tabs.
|
|
</div>
|
|
<!-- Use goog-tab-bar-clear to separate the tabs from the content. -->
|
|
<div class="goog-tab-bar-clear"></div>
|
|
<label>
|
|
Show/hide the first tab
|
|
<input type="checkbox" id="show_start" checked>
|
|
</label>
|
|
<label>
|
|
Enable/disable the fourth tab
|
|
<input type="checkbox" id="enable_start">
|
|
</label>
|
|
</td>
|
|
<td width="50%">
|
|
<b>After tab content:</b><br><br>
|
|
<div id="end" class="goog-tab-bar goog-tab-bar-end">
|
|
<div class="goog-tab">Hello</div>
|
|
<div class="goog-tab">Settings</div>
|
|
<div class="goog-tab">More</div>
|
|
<div class="goog-tab goog-tab-disabled">Advanced</div>
|
|
</div>
|
|
<div id="end_content" class="goog-tab-content">
|
|
Use the keyboard or the mouse to switch tabs.
|
|
</div>
|
|
<!-- Use goog-tab-bar-clear to separate the tabs from the content. -->
|
|
<div class="goog-tab-bar-clear"></div>
|
|
<label>
|
|
Show/hide the first tab
|
|
<input type="checkbox" id="show_end" checked>
|
|
</label>
|
|
<label>
|
|
Enable/disable the fourth tab
|
|
<input type="checkbox" id="enable_end">
|
|
</label>
|
|
</td>
|
|
</tr>
|
|
<tr valign="top">
|
|
<td width="50%">
|
|
<b>Above tab content (rounded corners):</b><br><br>
|
|
<div id="top_round" class="goog-tab-bar goog-tab-bar-top">
|
|
<div class="goog-rounded-tab">Hello</div>
|
|
<div class="goog-rounded-tab goog-rounded-tab-selected">Settings
|
|
</div>
|
|
<div class="goog-rounded-tab">More</div>
|
|
<div class="goog-rounded-tab goog-rounded-tab-disabled">Advanced
|
|
</div>
|
|
</div>
|
|
<!-- Use goog-tab-bar-clear to separate the tabs from the content. -->
|
|
<div class="goog-tab-bar-clear"></div>
|
|
<div id="top_round_content" class="goog-tab-content"
|
|
style="border-width:4px">
|
|
Use the keyboard or the mouse to switch tabs.
|
|
</div>
|
|
<label>
|
|
Show/hide the first tab
|
|
<input type="checkbox" id="show_top_round" checked>
|
|
</label>
|
|
<label>
|
|
Enable/disable the fourth tab
|
|
<input type="checkbox" id="enable_top_round">
|
|
</label>
|
|
</td>
|
|
<td width="50%">
|
|
<b>Before tab content (rounded corners):</b><br><br>
|
|
<div id="start_round" class="goog-tab-bar goog-tab-bar-start">
|
|
<div class="goog-rounded-tab goog-rounded-tab-selected">Hello</div>
|
|
<div class="goog-rounded-tab">Settings</div>
|
|
<div class="goog-rounded-tab">More</div>
|
|
<div class="goog-rounded-tab goog-rounded-tab-disabled">Advanced
|
|
</div>
|
|
</div>
|
|
<div id="start_round_content" class="goog-tab-content"
|
|
style="border-width:4px">
|
|
Use the keyboard or the mouse to switch tabs.
|
|
</div>
|
|
<!-- Use goog-tab-bar-clear to separate the tabs from the content. -->
|
|
<div class="goog-tab-bar-clear"></div>
|
|
<label>
|
|
Show/hide the first tab
|
|
<input type="checkbox" id="show_start_round" checked>
|
|
</label>
|
|
<label>
|
|
Enable/disable the fourth tab
|
|
<input type="checkbox" id="enable_start_round">
|
|
</label>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td colspan="2">
|
|
<!-- Event log. -->
|
|
<fieldset class="goog-debug-panel">
|
|
<legend>Event Log</legend>
|
|
<div id="log"></div>
|
|
</fieldset>
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
<br>
|
|
<div id="perf"></div>
|
|
<script>
|
|
var timer = goog.now();
|
|
|
|
// Set up a logger.
|
|
goog.debug.LogManager.getRoot().setLevel(goog.log.Level.ALL);
|
|
var logger = goog.log.getLogger('demo');
|
|
var logconsole = new goog.debug.DivConsole(goog.dom.getElement('log'));
|
|
logconsole.setCapturing(true);
|
|
|
|
var EVENTS = goog.object.getValues(goog.ui.Component.EventType);
|
|
goog.log.fine(logger, 'Listening for: ' + EVENTS.join(', ') + '.');
|
|
|
|
function logEvent(e) {
|
|
var source =
|
|
typeof e.target.getCaption == 'function' && e.target.getCaption() ||
|
|
e.target.getId();
|
|
goog.log.info(logger, '"' + source + '" dispatched: ' + e.type);
|
|
}
|
|
|
|
var topTab = new goog.ui.TabBar();
|
|
topTab.decorate(goog.dom.getElement('top'));
|
|
|
|
var bottom = new goog.ui.TabBar();
|
|
bottom.decorate(goog.dom.getElement('bottom'));
|
|
|
|
var start = new goog.ui.TabBar();
|
|
start.decorate(goog.dom.getElement('start'));
|
|
|
|
var end = new goog.ui.TabBar();
|
|
end.decorate(goog.dom.getElement('end'));
|
|
|
|
var topRound = new goog.ui.TabBar();
|
|
topRound.decorate(goog.dom.getElement('top_round'));
|
|
|
|
var startRound = new goog.ui.TabBar();
|
|
startRound.decorate(goog.dom.getElement('start_round'));
|
|
|
|
goog.array.forEach([topTab, bottom, start, end, topRound, startRound],
|
|
function(tabBar) {
|
|
// Log all events.
|
|
goog.events.listen(tabBar, EVENTS, logEvent);
|
|
|
|
// Handle SELECT events dispatched by tabs.
|
|
goog.events.listen(tabBar, goog.ui.Component.EventType.SELECT,
|
|
function(e) {
|
|
var tabSelected = e.target;
|
|
var contentElement = goog.dom.getElement(tabBar.getId() +
|
|
'_content');
|
|
goog.dom.setTextContent(contentElement,
|
|
'You selected the "' + tabSelected.getCaption() + '" tab.');
|
|
});
|
|
|
|
// Hook up the "Show/hide first tab" checkbox.
|
|
goog.events.listen(goog.dom.getElement('show_' + tabBar.getId()),
|
|
goog.events.EventType.CLICK,
|
|
function(e) {
|
|
var checkbox = e.target;
|
|
tabBar.getChildAt(0).setVisible(checkbox.checked);
|
|
});
|
|
|
|
// Hook up the "Enable/disable fourth tab" checkbox.
|
|
goog.events.listen(goog.dom.getElement('enable_' + tabBar.getId()),
|
|
goog.events.EventType.CLICK,
|
|
function(e) {
|
|
var checkbox = e.target;
|
|
tabBar.getChildAt(3).setEnabled(checkbox.checked);
|
|
});
|
|
});
|
|
|
|
goog.dom.setTextContent(goog.dom.getElement('perf'),
|
|
(goog.now() - timer) + 'ms');
|
|
</script>
|
|
</body>
|
|
</html>
|