Tab control
/*
Mastering JavaScript, Premium Edition
by James Jaworski
ISBN:078212819X
Publisher Sybex CopyRight 2001
*/
<html><head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Tabbed Panel</title>
<style rel="stylesheet" type="text/css">
.tab {font-family: sans-serif; line-height:150%;
font-weight: bold; position:absolute;
text-align: center; border: 2px; border-color:#999999;
border-style: outset; border-bottom-style: none;
height: 54px; width: 90px; margin:0px}
.panel {font-family: sans-serif; font-size: smaller;
position:absolute; border: 2px; border-color:#999999;
border-style:outset; width: 400px; height: 200px;
left:0px; top:54px; margin:0px; padding:6px}
h1 {text-align: center}
</style>
<script language="JavaScript">
var panelID = "p1"
var numDiv = 8
var numRows = 2
var tabsPerRow = 4
var numLocations = numRows * tabsPerRow
var tabWidth = 90
var tabHeight = 30
var vOffset = 6
var hOffset = 10</script>
<script language="JavaScript" >
var divLocation = new Array(numLocations)
var newLocation = new Array(numLocations)
for(var i=0; i<numLocations; ++i) {
divLocation[i] = i
newLocation[i] = i
}
function getDiv(s,i) {
var div
if(navigator.appName == "Microsoft Internet Explorer"
&& navigator.appVersion.charAt(0) < 5)
div = document.all.item(panelID+s+i)
else div = document.getElementById(panelID+s+i)
return div
}
function setZIndex(div, zIndex) {
div.style.zIndex = zIndex
}
function getLocation(i) {
return divLocation[i]
}
function setLocation(i, j) {
divLocation[i] = j
}
function getNewLocation(i) {
return newLocation[i]
}
function setNewLocation(i, j) {
newLocation[i] = j
}
function updatePosition(div, newPos) {
div.style.top = (numRows-(Math.floor(newPos/tabsPerRow) + 1)) * (tabHeight-
vOffset)
div.style.left = (newPos % tabsPerRow) * tabWidth +
(hOffset * (Math.floor(newPos / tabsPerRow)))
}
function selectTab(n) {
// n is the ID of the division that was clicked
// firstTab is the location of the first tab in the selected row
var firstTab = Math.floor(getLocation(n) / tabsPerRow) * tabsPerRow
// newLoc is its new location
for(var i=0; i<numDiv; ++i) {
// loc is the current location of the tab
var loc = getLocation(i)
// If in the selected row
if(loc >= firstTab && loc < (firstTab + tabsPerRow)) setNewLocation(i, loc -
firstTab)
else if(loc < tabsPerRow) setNewLocation(i,firstTab+(loc % tabsPerRow))
else setNewLocation(i, loc)
}
// Set tab positions & zIndex
// Update location
for(var i=0; i<numDiv; ++i) {
var div = getDiv("tab",i)
var loc = getNewLocation(i)
updatePosition(div, loc)
if(i == n) setZIndex(div, numLocations +1)
else setZIndex(div,numLocations - loc)
div = getDiv("panel",i)
if(i == n) setZIndex(div, numLocations +1)
else setZIndex(div, numLocations - loc)
setLocation(i, loc)
}
}
</script>
</head><body><h1>Tabbed Panel</h1><div
style="background-color: transparent; position: relative; width: 400px;
height: 200px"><div class="tab" style="font-weight: bold; background-color:
yellow; left: 0px; top: 24px; z-index: 8" id="p1tab0"
onclick="selectTab(0)">HTML</div><div class="tab" style="font-weight: bold;
background-color: orange; left: 90px; top: 24px; z-index: 7" id="p1tab1"
onclick="selectTab(1)">XHTML</div><div class="tab" style="font-weight: bold;
background-color: red; left: 180px; top: 24px; z-index: 6" id="p1tab2"
onclick="selectTab(2)">CSS</div><div class="tab" style="font-weight: bold;
background-color: cyan; left: 270px; top: 24px; z-index: 5" id="p1tab3"
onclick="selectTab(3)">DOM</div><div class="tab" style="font-weight: bold;
background-color: rgb(170,170,255); left: 10px; top: 0px; z-index: 4"
id="p1tab4" onclick="selectTab(4)">JavaScript</div><div class="tab"
style="font-weight: bold; background-color: fuchsia; left: 100px; top: 0px;
z-index: 3" id="p1tab5" onclick="selectTab(5)">DHTML</div><div class="tab"
style="font-weight: bold; background-color: lime; left: 190px; top: 0px; z-
index: 2" id="p1tab6" onclick="selectTab(6)">XML</div><div class="tab"
style="font-weight: bold; background-color: silver; left: 280px; top: 0px; z-
index: 1" id="p1tab7" onclick="selectTab(7)">XSLT</div><div class="panel"
style="background-color: yellow; z-index: 8" id="p1panel0">
<h2>Hypertext Markup Language</h2>
<p><a href="http://www.w3.org/MarkUp/" target="external">HTML</a> is the
language in which Web pages are written. HTML uses tags like <p> and
</p> to identify how text is to be structured and formatted within a
document. </p>
</div><div class="panel" style="background-color: orange; z-index: 7"
id="p1panel1">
<h2>Extensible HyperText Markup Language</h2>
<p><a href="http://www.w3.org/TR/xhtml1/" target="external">XHTML</a> is a
redevelopment and extension of HTML that makes HTML compatible with XML.
XHTML specifies a family of markup languages that are based on HTML but take
advantage of the simplicity, extensibility, and powerful toolset of XML. </p>
</div><div class="panel" style="background-color: red; z-index: 6"
id="p1panel2">
<h2>Cascading Style Sheets</h2>
<p>CSS is a style sheet language that enables Web page writers to specify
presentation, sizing, and positioning properties of HTML and XML documents.
CSS is used to describe the appearance of a document in a manner that is
independent of its content. There are currently two versions of CSS (referred
to as <a href="http://www.w3.org/TR/REC-CSS1" target="external">CSS1</a> and
<a href="http://www.w3.org/TR/REC-CSS2" target="external">CSS2</a>). CSS2
extends CSS1.</p></div><div class="panel" style="background-color: cyan;
z-index: 5" id="p1panel3">
<h2>Document Object Model</h2>
<p>The <a href="http://www.w3.org/DOM/" target="external">DOM</a> is a model
that describes the objects that are available within HTML and XML documents.
It describes these objects in a programming language-independent manner as a
system of interfaces. It defines the properties of these objects and methods
for accessing these objects. The objects can be accessed via programming
languages, such as JavaScript and Java.</p>
</div><div class="panel" style="background-color: rgb(170,170,255); z-index: 4"
id="p1panel4">
<h2>JavaScript</h2>
<p><a href="http://developer.netscape.com/javascript/"
target="external">JavaScript</a> is a programming language for scripting Web
pages that was developed by Netscape. It has been standardized by the ECMA
and is referred to as ECMAScript. JavaScript has evolved into a general-
purpose scripting language - it is no longer limited to Web pages. Microsoft
has also developed a version of JavaScript that is named JScript.</p>
</div><div class="panel" style="background-color: fuchsia; z-index: 3"
id="p1panel5">
<h2>Dynamic HTML</h2>
<p><a href="http://developer.netscape.com/dhtml/" target="external">DHTML</a> is
a combination of HTML, CSS, and JavaScript that enables Web page content to
exhibit dynamic behavior. This is accomplished by dynamically changing the
properties of document objects in response to user actions and other
events.</p>
</div><div class="panel" style="background-color: lime; z-index: 2"
id="p1panel6">
<h2>Extensible Markup Language</h2>
<a href="http://www.w3.org/XML/" target="external">XML</a> is a language for
creating structured documents for use with the Web and in other application
areas. XML is a simplified subset of the Standard Generalized Markup Language
(SGML) that is used to create custom markup languages that follow a common
syntax.
</div><div class="panel" style="background-color: silver; z-index: 1"
id="p1panel7">
<h2>XSL Transformations</h2>
<a href="http://www.w3.org/TR/xslt" target="external">XSLT</a> is a part of the
Extensible Stylesheet Language (XSL) that is used to transform XML documents
from one format into another format. XSLT style sheets are written in XML.
These style sheets specify how XML documents are to be translated. They are
provided as input to a translation program, which performs the actual
translation.
</div></div><img border="0" height="50"><p></p></body></html>
Related examples in the same category
