쏭군은 열정 드리머

접근성이 좋은 멀티탭, 포털에서 많이 쓰는~

포털사이트에서 공간활용과 좁은 공간에 효율적인 컨텐츠 배치를 하기 위해서 많이 사용하는 멀티탭입니다.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ko">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>tab dialog </title>
<style type="text/css">
legend {display:none;}

.form_multitab {
        width:500px;
}

.form_multitab fieldset.tab {
        border:none;
}

.form_multitab fieldset {
        border:none;
        clear:both;
}

.tab_menu {
        clear:both;
        height:32px;
}
.tab_menu div {
        display:block;
        float:left;
        padding:5px;
        margin:2px;
        background-color:#EDF;
}

.tab_menu .tab_label_selected {
        background-color:#FDE;
}
.tab_body {
        background-color:#EEE;
        padding:5px;
       
}
</style>
<script type="text/javascript">
<!--//        
// 여기서부터        
function getElementsByClass(_class, el_id) {
        var parent, els, returnArr = new Array(), i = 0;
        parent = (el_id) ? document.getElementById(el_id) : document;
        els = parent.getElementsByTagName('*') || parent.all;
        for (i; i < els.length; i++)
                if (els[i].className == _class)
                        returnArr[returnArr.length] = els[i];
        return returnArr;
}
function multitab_init(objId) {
        var multitab = document.getElementById(objId);
        multitab.showTab = showTab;
        var colFieldset = getElementsByClass("tab", objId);
        var colTabarea = getElementsByClass("tab_menu", objId);
        var tabarea = colTabarea[0];
       
        for(var i = 0; i < colFieldset.length; i++) {
                var childs = colFieldset[i].childNodes;
                for(var j = 0; j < childs.length; j++) {
                        if (childs[j].tagName == "LEGEND") {
                                var obj = document.createElement("DIV");
                                obj.id = "menu_" + i;
                                obj.className = "tab_label";
                                var aObj = document.createElement("A");
                                aObj.id = "a_menu_" + (i + 1);
                                aObj.href = "#tab_" + (i + 1);
                                aObj.tabIndex = ((i + 1) * 10);
                                aObj.multiTab = objId;
                                aObj.targetValue = i;
                                aObj.tabButton = obj.id;
                                aObj.onclick = clickTab;
                                aObj.onfocus = clickTab;
                                aObj.innerHTML = childs[j].innerHTML;
                                obj.appendChild(aObj);
                                tabarea.appendChild(obj);
                        }
                }
        }
        multitab.showTab(0);
}

function clickTab() {
        var multiTab = document.getElementById(this.multiTab);
        multiTab.showTab(this.targetValue);
       
        var colTabButton = getElementsByClass("tab_label_selected", this.multiTab);
        for(var i=0; i < colTabButton.length; i++) {
                colTabButton[i].className="tab_label";
        }
        document.getElementById(this.tabButton).className = "tab_label_selected"
}

function showTab(val) {
        var colFieldset = getElementsByClass("tab", this.id);
        for(var i = 0; i < colFieldset.length; i++) {
                if (i != val) {
                        colFieldset[i].style.display = "none";
                } else {
                        colFieldset[i].style.display = "block";
                }
        }       
}
// 여기까지를 별도의 js로 묶어두면 편하겠죠.

function init() {
        multitab_init("something");
}

window.onload = init;
//-->
</script>
</head>
<body>
<form id="something" class="form_multitab" method="post" action="" >
        <div class="tab_menu"></div>
        <div class="tab_body">
                <fieldset id="tab_1" class="tab">
                        <legend>tab 1</legend>
                        <fieldset>
                                <label for="item_1">item 1</label>
                                <input type="text" tabindex="11" id="item_1" name="item_1" />
                        </fieldset>
                        <fieldset>
                                <label for="item_2">item 2</label>
                                <input type="text" tabindex="12" id="item_2" name="item_2" />
                        </fieldset>
                        <fieldset>
                                <label for="item_3">item 3</label>
                                <input type="text" tabindex="13" id="item_3" name="item_3" />
                        </fieldset>
                </fieldset>
                <fieldset id="tab_2" class="tab">
                        <legend>tab 2</legend>
                        <fieldset>
                                <label for="item_4">item 4</label>
                                <input type="text" tabindex="21" id="item_4" name="item_4" />
                        </fieldset>
                        <fieldset>
                                <label for="item_5">item 5</label>
                                <input type="text" tabindex="22" id="item_5" name="item_5" />
                        </fieldset>
                        <fieldset>
                                <label for="item_6">item 6</label>
                                <input type="text"  tabindex="23" id="item_6" name="item_6" />
                        </fieldset>
                </fieldset>
                <fieldset id="tab_3" class="tab">
                        <legend>tab 3</legend>
                        <fieldset>
                                <label for="item_7">item 7</label>
                                <input type="text" tabindex="31" id="item_7" name="item_7" />
                        </fieldset>
                        <fieldset>
                                <label for="item_8">item 8</label>
                                <input type="text" tabindex="32" id="item_8" name="item_8" />
                        </fieldset>
                        <fieldset>
                                <label for="item_9">item 9</label>
                                <input type="text" tabindex="33" id="item_9" name="item_9" />
                        </fieldset>
                </fieldset>
                <fieldset id="tab_4" class="tab">
                        <legend>tab 4</legend>
                        <fieldset>
                                <label for="item_10">item 10</label>
                                <input type="text" tabindex="41" id="item_10" name="item_10" />
                        </fieldset>
                        <fieldset>
                                <label for="item_11">item 11</label>
                                <input type="text" tabindex="42" id="item_11" name="item_11" />
                        </fieldset>
                        <fieldset>
                                <label for="item_12">item 12</label>
                                <input type="text" tabindex="43" id="item_12" name="item_12" />
                        </fieldset>
                </fieldset>
                <fieldset class="operation">
                        <button type="submit">ok</button>
                </fieldset>
        </div>
</form>
</body>
</html>
소스 작동 예제 페이지 : http://eouia0.cafe24.com/temp/css_multitab/index.html
소스 출처 : http://css.macple.com/forum

어렵지 않으니 필요하신 분들은 연구해보세요~^ㅁ^~
2007/01/24 07:20
받은 트랙백이 없고,, 댓글 4개가 달렸습니다.

트랙백 주소 :: http://monoeyes.com/trackback/38

  1. BlogIcon 박군 2007/01/26 17:57  댓글주소  수정/삭제  댓글쓰기

    아.. 웹 표준 책에서 본 기억이 나네요.. 책을 읽어도 실제로 적용하기는 힘든거 같아요.. 한번 써봐야겠어요.. ^^

    • BlogIcon 쏭군 2007/01/26 19:00  댓글주소  수정/삭제

      오호! 안녕하세요 ^ㅁ^ 이 소스 사실은 무지 어려워 눈 돌아간다는 ㅋ 지금 저녁 시간이네요.. 식사 맛있게 하세용^^

  2. 해음이 2010/02/09 11:41  댓글주소  수정/삭제  댓글쓰기

    아 감사합니다. 작동이 아주 잘되네요
    ^^




◀ 이전 1 ... 289 290 291 292 293 294 295 296 297 ... 300 다음 ▶

''에 해당되는 글 건