자바스크립트, 스타일시트 탭 메뉴
테이블과_웹표준으로_코딩한_탭메뉴.zip탭메뉴 방식-Single page, Multi View
잘 응용하면 하나의 문서로 여러페이지를 보여줄 수 있는 유용한 스크립트 입니다
<!------ [1단계] 아래의 스크립트 소스를 <head></head> 사이에 복사 해 넣으세요 ------->
<style type="text/css">
/**탭메뉴박스 설정**/
#tablist{
padding: 3px 0;
margin-left: 0;
margin-bottom: 0;
margin-top: 0.1em;
font: bold 12px Verdana;
}
#tablist li{
list-style: none;
display: inline;
margin: 0;
}
#tablist li a{
padding: 3px 0.5em;
margin-left: 3px;
border: 1px solid #778;
border-bottom: none;
background: white;
}
#tablist li a:link, #tablist li a:visited{
color: navy;
}
#tablist li a.current{
background: lightyellow;
}
/**내용이 보여질 박스 설정**/
#tabcontentcontainer{
width: 400px;
padding: 20px;
border: 1px solid black;
}
.tabcontent{
display:none;
}
</style>
<script-x type="text/javascript-x">
var initialtab=[1, "sc1"] // 처음 시작될 탭의 ID
function cascadedstyle(el, cssproperty, csspropertyNS){
if (el.currentStyle)
return el.currentStyle[cssproperty]
else if (window.getComputedStyle){
var elstyle=window.getComputedStyle(el, "")
return elstyle.getPropertyValue(csspropertyNS)
}
}
var previoustab=""
function expandcontent(cid, aobject){
if (document.getElementById){
highlighttab(aobject)
detectSourceindex(aobject)
if (previoustab!="")
document.getElementById(previoustab).style.display="none"
document.getElementById(cid).style.display="block"
previoustab=cid
if (aobject.blur)
aobject.blur()
return false
}
else
return true
}
function highlighttab(aobject){
if (typeof tabobjlinks=="undefined")
collecttablinks()
for (i=0; i<tabobjlinks.length; i++)
tabobjlinks[i].style.backgroundColor=initTabcolor
var themecolor=aobject.getAttribute("theme")? aobject.getAttribute("theme") : initTabpostcolor
aobject.style.backgroundColor=document.getElementById("tabcontentcontainer").style.backgroundColor=themecolor
}
function collecttablinks(){
var tabobj=document.getElementById("tablist")
tabobjlinks=tabobj.getElementsByTagName("A")
}
function detectSourceindex(aobject){
for (i=0; i<tabobjlinks.length; i++){
if (aobject==tabobjlinks[i]){
tabsourceindex=i
break
}
}
}
function do_onload(){
var cookiecheck=window.get_cookie && get_cookie(window.location.pathname).indexOf("|")!=-1
collecttablinks()
initTabcolor=cascadedstyle(tabobjlinks[1], "backgroundColor", "background-color")
initTabpostcolor=cascadedstyle(tabobjlinks[0], "backgroundColor", "background-color")
if (typeof enablepersistence!="undefined" && enablepersistence && cookiecheck){
var cookieparse=get_cookie(window.location.pathname).split("|")
var whichtab=cookieparse[0]
var tabcontentid=cookieparse[1]
expandcontent(tabcontentid, tabobjlinks[whichtab])
}
else
expandcontent(initialtab[1], tabobjlinks[initialtab[0]-1])
}
if (window.addEventListener)
window.addEventListener("load", do_onload, false)
else if (window.attachEvent)
window.attachEvent("onload", do_onload)
else if (document.getElementById)
window.onload=do_onload
</script-x>
<!-------- 아래의 스크립트는 새로고침 시에도 현재페이지 상태를 유지시키기 위한 코드입니다 ----->
<script-x type="text/javascript-x">
var enablepersistence=true // 현재페이지 유지시에는 true, 아니면 false
function get_cookie(Name) {
var search = Name + "="
var returnvalue = "";
if (document.cookie.length > 0) {
offset = document.cookie.indexOf(search)
if (offset != -1) {
offset += search.length
end = document.cookie.indexOf(";", offset);
if (end == -1) end = document.cookie.length;
returnvalue=unescape(document.cookie.substring(offset, end))
}
}
return returnvalue;
}
function savetabstate(){
document.cookie=window.location.pathname+"="+tabsourceindex+"|"+previoustab
}
window.onunload=savetabstate
</script-x>
</head>
<body>
<!------ [2단계] 아래의 스크립트를 원하는 위치에 붙여 넣으세요 ---------------------->
<ul id="tablist">
<li><a href="#" class="current" onClick="return expandcontent('sc1', this)">첫번째메뉴</a></li>
<li><a href="#" onClick="return expandcontent('sc2', this)" theme="#EAEAFF">두번째메뉴</a></li>
<li><a href="#" onClick="return expandcontent('sc3', this)" theme="#FFE6E6">세번째메뉴</a></li>
<li><a href="#" onClick="return expandcontent('sc4', this)" theme="#DFFFDF">네번째메뉴</a></li>
</ul>
<DIV id="tabcontentcontainer">
<div id="sc1" class="tabcontent">
첫번째 탭 메뉴의 내용에 들어갈 구문을 입력 하세요
</div>
<div id="sc2" class="tabcontent">
두번째 탭 메뉴의 내용에 들어갈 구문을 입력 하세요
</div>
<div id="sc3" class="tabcontent">
세번째 탭 메뉴의 내용에 들어갈 구문을 입력 하세요
</div>
<div id="sc4" class="tabcontent">
네번째 탭 메뉴의 내용에 들어갈 구문을 입력 하세요
</div>
</DIV>
<!------ 여기까지 입니다 ---------->
'Web-Programming' 카테고리의 다른 글
| [ 웹 프로그래머 / 디버그 툴 / developer toolbar / http watch / fiddler2 ] 웹 프로그래머 디버그 툴 TOP 6 (0) | 2011.03.15 |
|---|---|
| MYSQL - 서브 쿼리 (1) | 2011.01.05 |
| IE-익스플로러 에서만 사용되게 하는 소스 (0) | 2011.01.05 |
| jQuery - 제이쿼리 란?? (0) | 2010.06.28 |
| 아파치 REWRITE 모듈 - 웹 사이트 주소를 짧게 써보자!! (0) | 2010.05.28 |
| Query style menu with CSS3 : 제이쿼리 스타일 스타일시트 메뉴바, 네비게이션바 (0) | 2010.05.12 |
| CSS3 Dropdown Menu : 스타일시트 드롭다운 메뉴, 네비게이션 메뉴바 (0) | 2010.05.12 |
| ROBOT AEGENT - 검색 엔진 이름 (0) | 2010.05.06 |
| Free XHTML Template Pack: Classic Luxury - 클래식한 느낌으 스타일시트 입니다.CSS (0) | 2010.05.05 |
| 자동로그인주소 알아내기-GET방식 (0) | 2010.04.20 |
댓글