웹마당넷 |[MENU] 자바스크립트 TAB 메뉴

Javascript Example

제 목

[MENU] 자바스크립트 TAB 메뉴

작성자

운영자

등록일

20080315180346

조회수

33,146

자바스크립트 TAB 메뉴 소스입니다.

TAB 메뉴

HTML

XHTML

CSS

DOM

JavaScript

DHTML

XML

XSLT

Hypertext Markup Language

HTML is the language in which Web pages are written. HTML uses tags like

and

to identify how text is to be structured and formatted within a document.

Extensible HyperText Markup Language

XHTML 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.

Cascading Style Sheets

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 CSS1 and CSS2). CSS2 extends CSS1.

Document Object Model

The DOM 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.

JavaScript

JavaScript 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.

Dynamic HTML

DHTML 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.

Extensible Markup Language

XML 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.

XSL Transformations

XSLT 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.

<html>
<head>
    <title>TAB 메뉴</title>
</head>

<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
}
</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

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) {
var firstTab = Math.floor(getLocation(n) / tabsPerRow) * tabsPerRow
    for(var i=0; i<numDiv; ++i) {
var loc = getLocation(i)

if(loc >= firstTab && loc < (firstTab + tabsPerRow)) setNewLocation(i, loc - 
    firstTab)
    else if(loc < tabsPerRow) setNewLocation(i,firstTab+(loc % tabsPerRow))
    else setNewLocation(i, loc)
}

    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>

<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>
<br><br><br><br><br><br><br><br>
</body>
</html>

※ 짧은 댓글일수록 예의를 갖추어 작성해 주시기 바랍니다.

번호

제목

글쓴이