DRUNKEN KEVIN

웹접근성을 준수하는 [탭] 코딩

2009. 7. 24. 13:56

가상
반응형



회사에서 탭으로 고민고민 하다가 다음꺼 보고 힌트를 얻어(?) 배낀거다. 하하.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ko" xml:lang="ko">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Tab Test</title>
<style type="text/css">
BODY{ font-size:75%; }
UL, LI, H2{ margin:0; padding:0; list-style:none; }
#tab_area{ position:relative; }
#tab1, #tab2, #tab3, #tab4{ width:50px; height:25px; padding-top:5px;
                            border-top:1px solid #dedede; border-left:1px solid #dedede; border-right:1px solid #dedede;
                            position:absolute; top:0; text-align:center; background-color:#ededed;
                            font-size:1.3em; }
#tab1 A, #tab2 A, #tab3 A, #tab4 A{ display:block; }
#tab1{ left:0; }
#tab2{ left:51px; }
#tab3{ left:102px; }
#tab4{ left:153px; }

#area1, #area2, #area3, #area4{ width:203px; border-left:1px solid #dedede; border-right:1px solid #dedede; border-bottom:1px solid #dedede;
                                display:none; position:absolute; top:31px;}

.On{ background-color:#ffffff !important; }
.Visible{ display:block !important; }
</style>
<script type="text/javascript">
//<![CDATA[
/**
 *    Tab Control (made by 킴민재)
 *
 *    tabName 탭의 id
 *    contentName 은 탭에 따라 나오는 영역의 id
 *    tabLength 는 탭의 갯수
 *   
 *    해당 엘리멘트의 ID는 tabName + 숫자, contentName + 숫자와 동일해야한다.
 */
var tabName = '';
var contentName = '';
var tabLength = 0;

function setTab(t, c, l){
    tabName = t;
    contentName = c;
    tabLength = l;
   
    addTabEvent();
}

function addTabEvent(){
    for(var i = 1 ; i <= tabLength ; i++){
        var tabObj = document.getElementById(tabName+i);
       
        tabObj.getElementsByTagName("a")[0].onmouseover = onTab;
        tabObj.getElementsByTagName("a")[0].onfocus = onTab;
    }   
}

function onTab(){
    for(var i = 1 ; i <= tabLength ; i++){
        var tabObj = document.getElementById(tabName+i);
        tabObj.className = "";
    }
    this.parentNode.className = "On";
   
    var seq = this.parentNode.id.substring(3);
    for(var i = 1 ; i <= tabLength ; i++){
        tabObj = document.getElementById(contentName+i);
        tabObj.className = "";
    }
    document.getElementById(contentName+seq).className = "Visible";
}
//]]>
</script>
</head>
<body>
<h1>Tab 테스트 파일</h1>

<div id="tab_area">
    <h2 id="tab1" class="On"><a href="#area1">탭1</a></h2>
    <div id="area1" class="Visible">
        <ul>
            <li><a href="#">안녕하세요</a></li>
            <li><a href="#">탭 테스트</a></li>
            <li><a href="#">오늘은 7월 24일</a></li>
            <li><a href="#">라라라</a></li>
        </ul>
    </div>

    <h2 id="tab2"><a href="#area2">탭2</a></h2>
    <div id="area2">
        <ul>
            <li><a href="#">두번째 탭</a></li>
            <li><a href="#">환영합니다</a></li>
            <li><a href="#">헬로 월드</a></li>
            <li><a href="#">웅컁컁컁</a></li>
        </ul>
    </div>

    <h2 id="tab3"><a href="#area3">탭3</a></h2>
    <div id="area3">
        <ul>
            <li><a href="#">다음 탭 따라하기</a></li>
            <li><a href="#">다음 탭 따라하기</a></li>
            <li><a href="#">다음 탭 따라하기</a></li>
            <li><a href="#">다음 탭 따라하기</a></li>
        </ul>
    </div>

    <h2 id="tab4"><a href="#area4">탭4</a></h2>
    <div id="area4">
        <ul>
            <li><a href="#">여기는 마지막 탭</a></li>
            <li><a href="#">아침을 안 먹어</a></li>
            <li><a href="#">배가 고프군요</a></li>
            <li><a href="#">밥 사줘</a></li>
        </ul>
    </div>
</div>

<script type="text/javascript">setTab('tab','area',4);</script>
</body>
</html>


 이거면 마우스 오버든, Tab키로 이동이든, 선형화에 맞는 포커스 이동이 가능!

Prototype을 쓴다면, 클래스로 작성해서 한 페이지에 여러 탭 컨트롤도 가능하겠지.


반응형

'가상' 카테고리의 다른 글

전자정부 프레임워크  (2) 2009.12.23
GPU 프로그래밍의 시작, CUDA  (0) 2009.12.22
GPGPU ; General-Purpose computing on GPU  (0) 2009.12.21
OOPrinciples SOLID  (0) 2009.11.23
디버깅 원칙 3가지  (4) 2009.06.10
,

티스토리툴바