<!DOCTYPE html>
<html>
<!--
Copyright 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.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.log.setLevel(goog.log.getRootLogger(), 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>
Codebase Browser
chromium