Adding mapbox-gl branch
This commit is contained in:
Andreas Hocevar
@@ -0,0 +1,289 @@
|
||||
<!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>
|
||||
Reference in New Issue
Block a user