Andreas Hocevar
303 lines
10 KiB
HTML
303 lines
10 KiB
HTML
<!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.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>
|