<!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.TabPane</title>
<meta charset="utf-8">
<script src="../base.js"></script>
<script>
goog.require('goog.ui.TabPane');
</script>
<link rel="stylesheet" href="css/demo.css">
<style>
.goog-tabpane {
background: threedface;
padding-left: 1px;
position: relative;
}
.goog-tabpane-tabs {
list-style: none;
margin: 0px;
padding: 0px;
height: 1ex;
position: relative;
}
.goog-tabpane-left .goog-tabpane-tabs {
float: left;
}
.goog-tabpane-right .goog-tabpane-tabs {
float: right;
}
.goog-tabpane-cont {
overflow: auto;
background: threedface;
border: 1px solid;
border-color: threedhighlight threedshadow threedshadow threedhighlight;
padding: 2px;
height: 200px;
}
.goog-tabpane-tab, .goog-tabpane-tab-selected {
display: block;
padding: 0px 3ex;
background: threedface;
border: 1px solid;
margin: 0px;
}
.goog-tabpane-top .goog-tabpane-tab,
.goog-tabpane-top .goog-tabpane-tab-selected,
.goog-tabpane-bottom .goog-tabpane-tab,
.goog-tabpane-bottom .goog-tabpane-tab-selected {
float: left;
}
.goog-tabpane-top .goog-tabpane-tab,
.goog-tabpane-top .goog-tabpane-tab-selected {
border-color: threedhighlight threedshadow threedface threedhighlight;
}
.goog-tabpane-bottom .goog-tabpane-tab,
.goog-tabpane-bottom .goog-tabpane-tab-selected {
border-color: threedface threedshadow threedshadow threedhighlight;
}
.goog-tabpane-left .goog-tabpane-tab,
.goog-tabpane-left .goog-tabpane-tab-selected {
border-color: threedhighlight threedface threedshadow threedhighlight;
}
.goog-tabpane-right .goog-tabpane-tab,
.goog-tabpane-right .goog-tabpane-tab-selected {
border-color: threedhighlight threedshadow threedshadow threedface;
}
.goog-tabpane-top .goog-tabpane-tab {
margin-top: 3px;
}
.goog-tabpane-tab-selected {
font-weight: bold;
}
.goog-tabpane-tab-selected,
.goog-tabpane-tab-selected {
padding-bottom: 2px;
padding-top: 2px;
}
.goog-tabpane-top .goog-tabpane-tab-selected {
position: relative;
top: 1px;
}
.goog-tabpane-bottom .goog-tabpane-tab-selected {
position: relative;
top: -1px;
}
.goog-tabpane-left .goog-tabpane-tab-selected {
position: relative;
left: 1px;
}
.goog-tabpane-right .goog-tabpane-tab-selected {
position: relative;
left: -1px;
}
#tabpane2 .goog-tabpane-tab {
margin-top: 0px;
}
p {
margin-top: 0px;
}
</style>
</head>
<body>
<h1>goog.ui.TabPane</h1>
<div id="tabpane1"></div>
<strong id="tabpane1index"></strong> selected in tab pane 1.<br/><br/>
<h3>Bottom tabs</h3>
<div id="tabpane2">
<div>
<h2>Initial page</h2>
<p>
Page created automatically from tab pane child node.
</p>
</div>
</div>
<h3>Left tabs</h3>
<div id="tabpane3">
<div>
<h2>Front page!</h2>
<p>
Page created automatically from tab pane child node.
</p>
</div>
</div>
<h3>Right tabs</h3>
<div id="tabpane4">
<div>
<h2>Right 1</h2>
<p>
Page created automatically from tab pane child node.
</p>
</div>
<div>
<h2>Right 2</h2>
<p>
So was this page.
</p>
</div>
</div>
<div id="page1">
<h2>Page 1</h2>
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis ac augue sed
massa placerat iaculis. Aliquam tempor dictum massa. Quisque vehicula justo
ut tellus. Integer urna. Aliquam libero justo, ornare at, pretium ac,
vulputate quis, ante. Sed arcu. Etiam sit amet turpis. Maecenas pede. Sed
turpis. Sed ultricies commodo nisl. Morbi eget magna quis nisi euismod
porttitor. Vivamus lacinia massa et sem. Donec consequat ligula sed tellus.
Suspendisse enim sapien, vestibulum nec, eleifend id, placerat sit amet,
risus. Mauris in pede ac lorem varius facilisis. Donec dui. Nam mollis nisi
eu neque. Cras luctus nisl at sapien. Ut eleifend, odio id luctus
pellentesque, lorem diam dictum velit, ac gravida lectus magna vel velit.
</p>
<p>
Etiam tempus, ante semper iaculis ultrices, ligula eros lobortis tellus, sit
amet luctus dolor nisl sit amet dolor. Donec in velit. Vivamus facilisis.
Proin nisi felis, commodo ut, porta dignissim, vestibulum quis, ligula. Ut
egestas porttitor tortor. Ut porttitor diam a est. Sed placerat. Aliquam
luctus est a risus. Aenean blandit nibh et justo. Phasellus vel lectus ut
leo dictum consequat. Nam tincidunt facilisis nulla. Nunc nonummy tempus
quam. Aliquam id enim. Sed rhoncus cursus lorem. Curabitur ultricies, enim
quis eleifend mattis, est velit dapibus dolor, quis laoreet arcu tortor
volutpat tortor. Pellentesque habitant morbi tristique senectus et netus et
malesuada fames ac turpis egestas. Curabitur nec mauris et purus aliquam
mattis. Cras rhoncus posuere sapien. Class aptent taciti sociosqu ad litora
torquent per conubia nostra, per inceptos hymenaeos.
</p>
<p>
Mauris lacinia ornare nunc. Donec molestie. Sed nulla libero, tincidunt vel,
porta sit amet, nonummy eget, augue. Class aptent taciti sociosqu ad litora
torquent per conubia nostra, per inceptos hymenaeos. Donec ac risus. Cras
euismod congue orci. Mauris mattis, ipsum at vestibulum bibendum, odio est
rhoncus nisi, vel aliquam ante velit quis neque. Duis nonummy tortor id
ante. Aenean auctor odio non nulla. Fusce hendrerit, mi et fringilla
venenatis, sem ipsum fermentum lorem, vel posuere urna eros eget massa.
</p>
<p>
Nulla nec sapien eget mauris pretium tempor. Phasellus scelerisque quam id
mauris. Cras erat ante, pretium ut, vestibulum ac, tincidunt ut, nunc.
Vivamus velit sapien, feugiat ac, elementum ac, viverra non, leo. Phasellus
imperdiet, magna at placerat consectetuer, enim urna aliquam augue, nec
tincidunt justo lectus nec lectus. Nam neque. Nullam ullamcorper euismod
augue. Maecenas arcu purus, sollicitudin nec, consequat a, gravida quis,
massa. Nullam bibendum viverra risus. Sed nibh. Morbi dapibus pellentesque
erat.
</p>
<p>
Cras non tellus. Maecenas nulla est, tincidunt sed, porta sit amet, placerat
sed, diam. Morbi pulvinar. Vestibulum ante ipsum primis in faucibus orci
luctus et ultrices posuere cubilia Curae; Praesent felis lacus, pretium at,
egestas sed, fermentum at, est. Pellentesque sagittis feugiat orci. Nam
augue. Sed eget dolor. Proin vitae metus scelerisque massa fermentum tempus.
Nulla facilisi. Pellentesque habitant morbi tristique senectus et netus et
malesuada fames ac turpis egestas. Aenean eleifend, leo gravida mollis
tempor, tellus ipsum porttitor leo, eget condimentum tellus neque sit amet
orci. Sed non lectus. Suspendisse nonummy purus ac massa. Sed quis elit
dapibus nunc semper porta. Maecenas risus eros, euismod quis, sagittis eget,
aliquet eget, dui. Donec vel nibh. Vivamus nunc purus, euismod in, feugiat
in, sodales vitae, nunc. Nulla lobortis.
</p>
</div>
<div id="page2">
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras et nisi id
lorem tempor semper. Suspendisse ante. Integer ligula urna, venenatis quis,
placerat vitae, commodo quis, sapien. Quisque nec lectus. Sed non dolor. Sed
congue, nisi in pharetra consequat, odio diam pulvinar arcu, in laoreet elit
risus id ipsum. Class aptent taciti sociosqu ad litora torquent per conubia
nostra, per inceptos hymenaeos. Praesent tellus enim, imperdiet a, sagittis
id, pulvinar vel, tortor. Integer nulla. Sed nulla augue, lacinia id,
vulputate eu, rhoncus non, ante. Integer lobortis eros vitae quam. Phasellus
sagittis, ipsum sollicitudin bibendum laoreet, arcu erat luctus lacus, vel
pharetra felis metus tincidunt diam. Cras ac augue in enim ultricies
aliquam.
</p>
<input type="text" />
<select><option>Select box</option></select>
<button>Button</button>
</div>
<div id="page5">
<h2>Page 5</h2>
<p>
This is page 5.
</p>
</div>
<script>
var tabPane = new goog.ui.TabPane(document.getElementById('tabpane1'));
tabPane.addPage(new goog.ui.TabPane.TabPage(
document.getElementById('page1')));
tabPane.addPage(new goog.ui.TabPane.TabPage(
document.getElementById('page2'), 'Page 2'));
tabPane.addPage(new goog.ui.TabPane.TabPage(null, 'Page 3'));
tabPane.addPage(new goog.ui.TabPane.TabPage('Page 5'));
tabPane.addPage(new goog.ui.TabPane.TabPage('Page 4'), 3);
var pg5 = new goog.ui.TabPane.TabPage(document.getElementById('page5'))
tabPane.addPage(pg5);
tabPane.addPage(new goog.ui.TabPane.TabPage('Page 6'));
tabPane.removePage(pg5);
tabPane.removePage(2);
function tabChanged(event) {
goog.dom.setTextContent(document.getElementById('tabpane1index'),
event.page.getTitle());
}
goog.events.listen(tabPane, goog.ui.TabPane.Events.CHANGE, tabChanged);
tabPane.setSelectedIndex(1);
var tabPane2 = new goog.ui.TabPane(document.getElementById('tabpane2'),
goog.ui.TabPane.TabLocation.BOTTOM);
tabPane2.addPage(new goog.ui.TabPane.TabPage('Page 7'));
tabPane2.addPage(pg5);
pg5.select();
pg5.setTitle('Renamed Page');
var tabPane3 = new goog.ui.TabPane(document.getElementById('tabpane3'),
goog.ui.TabPane.TabLocation.LEFT);
tabPane3.addPage(new goog.ui.TabPane.TabPage('Page 7'));
var tabPane4 = new goog.ui.TabPane(document.getElementById('tabpane4'),
goog.ui.TabPane.TabLocation.RIGHT);
tabPane4.addPage(new goog.ui.TabPane.TabPage('Page 99'));
</script>
</body>
</html>
Codebase Browser
chromium