| <!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> |
