JavaScript - Closure TabBar
Jump to navigation
Jump to search
About
NOTE: This page is a daughter page of: JavaScript
Here's some code I've played with from Google's public Closure library. Specifically, this code demonstrates the goog.ui.TabBar and was simplified from this demo created by Attila Bodis and Emil A. Eklund.
Simple tab bar example
tab_bar_demo.html:
<!DOCTYPE html>
<html>
<!--
Copyright 2012 The Closure Library Authors. All Rights Reserved.
Use of this source code is governed by the Apache License, Version 2.0.
-->
<head>
<title>goog.ui.TabBar</title>
<link href="tab_bar_demo.css" rel="stylesheet">
<script src="../../../javascript/closure/base.js"></script> <!-- MAKE SURE THIS POINTS TO RIGHT PLACE -->
<script>
goog.require('goog.dom');
goog.require('goog.events');
goog.require('goog.events.EventType');
goog.require('goog.object');
goog.require('goog.ui.Component.EventType');
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. This example
is a cut-down version of the original example at:
<a href="http://closure-library.googlecode.com/svn/docs/class_goog_ui_Tab.html">
closure-library.googlecode.com</a>.
</p>
<b>Above tab content:</b><br><br>
<div id="my_tab_bar" 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">Advanced</div>
</div>
<div id="my_tab_content" class="goog-tab-content">
Use the keyboard or the mouse to switch tabs.
</div>
<script>
var tabBar = new goog.ui.TabBar();
tabBar.decorate(goog.dom.getElement('my_tab_bar'));
goog.events.listen(tabBar, goog.ui.Component.EventType.SELECT,
function(e) {
var tabSelected = e.target;
var contentElement = goog.dom.getElement('my_tab_content');
goog.dom.setTextContent(contentElement,
'You selected the "' + tabSelected.getCaption() + '" tab.');
});
</script>
</body>
</html>
tab_bar_demo.css:
/**
* Copyright 2012 Google Inc. All Rights Reserved.
*
* Use of this source code is governed by the Apache License, Version 2.0.
*
* Author: attila@google.com (Attila Bodis)
* Author: eae@google.com (Emil A. Eklund)
*/
html {
font-family: "open sans", arial, sans-serif;
height: 100%;
}
body {
margin: 10px;
padding: 10px;
}
/*
* Styles used by goog.ui.TabBarRenderer:
*/
.goog-tab-bar {
margin: 0;
border: 0;
padding: 0;
list-style: none;
cursor: default;
outline: none;
background: #ebeff9;
}
.goog-tab-bar-clear {
clear: both;
height: 0;
overflow: hidden;
}
.goog-tab-bar-start {
float: left;
}
.goog-tab-bar-end {
float: right;
}
.goog-tab {
position: relative;
padding: 4px 8px;
color: #00c;
text-decoration: underline;
cursor: default;
}
.goog-tab-bar-top .goog-tab {
margin: 1px 4px 0 0;
border-bottom: 0;
float: left;
}
.goog-tab-bar-top:after,
.goog-tab-bar-bottom:after {
content: " ";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.goog-tab-bar-bottom .goog-tab {
margin: 0 4px 1px 0;
border-top: 0;
float: left;
}
.goog-tab-bar-start .goog-tab {
margin: 0 0 4px 1px;
border-right: 0;
}
.goog-tab-bar-end .goog-tab {
margin: 0 1px 4px 0;
border-left: 0;
}
.goog-tab-disabled { /* State: Disabled */
color: #666;
}
.goog-tab-selected { /* State: Selected */
color: #000;
background: #fff;
text-decoration: none;
font-weight: bold;
border: 1px solid #6b90da;
}
.goog-tab-bar-top {
padding-top: 5px !important;
padding-left: 5px !important;
border-bottom: 1px solid #6b90da !important;
}
/*
* Shift selected tabs 1px towards the contents (and compensate via margin and
* padding) to visually merge the borders of the tab with the borders of the
* content area.
*/
.goog-tab-bar-top .goog-tab-selected {
top: 1px;
margin-top: 0;
padding-bottom: 5px;
}
/*
* Final border:
*/
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;
}
| Code license | For all of the code on my site... if there are specific instruction or licence comments please leave them in. If you copy my code with minimum modifications to another webpage, or into any code other people will see I would love an acknowledgment to my site.... otherwise, the license for this code is more-or-less WTFPL (do what you want)! If only copying <20 lines, then don't bother. That said - if you'd like to add a web-link to my site www.andrewnoske.com or (better yet) the specific page with code, that's a really sweet gestures! Links to the page may be useful to yourself or your users and helps increase traffic to my site. Hope my code is useful! :)
|
Links
- Closure - Google's library for browser independent javascript.
