tab menu 의 링크를 각각의 content에 걸어줌으로 인해 quick link의 역활을 수행하여 접근성을 높였고, 각 content 하단에 tab menu로 바로 가는 quick link도 제공함으로 더욱 완성도 높은 접근성이 보장되었다. 하지만 이렇게 보면 전혀 tab menu같지가 않다.
이제는 tab menu스럽게 꾸며보자.
body { font:12px arial; } a { text-decoration:none; } img { border:0; }
/* tab menu */ #tab_menus { margin:0; padding:0; list-style:none; } #tab_menus li { margin-bottom:16px; float:left; padding:0px; } #tab_menus li a { padding:8px 10px; color:#505050; border-width:1px 0 1px 1px; border-style:solid; border-color:#ae9f96; background-color:#eae4e0; background-image:none; font-weight:bold; font-size:0.9em; display:block; } #tab_menus li a:hover { color:black; } #tab_menus li.selected a { border-bottom:0 solid white; background:white url("blt_arrowdown.gif") no-repeat center bottom; color:black; }
tab menu의 a를 block으로 잡고 hover를 주어 onMouse상태일때 Javascript없이도 변화를 줄 수 있게 하였다. #Menu_02, #Menu_03에 display:none을 안 준 것을 궁금해 하는 독자가 있다면, 당신은 천재! Javascript없이도 모든 content의 접근성을 보장하기 위해서다. 이건 조금 후 다시 설명하기로 하고..
자 이제는 마무리. Javascript로 tab menu 동작을 만들자. mootools 1.11(Element.Event, Element.Selectors)을 이용하였다
var selected_menu = 0;
var menus = $$('#tab_menus li'); var contents = $$('div.content'); contents.each(function(div, i) { if (i != 0) { div.setStyle('display', 'none'); } })
menus.each(function(quick_link, i) { quick_link.getElement("a").blur(); quick_link.addEvent('click', function(event) { e = new Event(event).stop(); contents[selected_menu].setStyle('display', 'none'); menus[selected_menu].removeClass('selected');
#Menu_01을 제외한 다른 content들은 가려주었고, tab menu의 박스에 click 이벤트를 걸어줌으로써 toggle 기능이 완성이 되었다. 만약 content들을 CSS에서 가려주었다면(#Menu_02, #Menu_03 display:none) CSS는 render가 되었는데 Javascript가 동작이 안되는 상황이 오면 다른 content에 접근할 방법이 없어진다. Javascript로 원하는 content를 display:block으로 바꿔줘야 하는데 Javascript가 동작이 안되니 tab을 백날눌러도 그 tab의 content는 볼 수 가 없게 되는 것이다.
결론. 결국은 content는 CSS와 Javascipt에 영향을 받지 않게 설계,코딩 되어야 하고 더불어 semantic하게 markup되어야 한다는 것이다.
다운로드 미리보기 (링크걸리는줄 알았는데 그게 아니네요. 아..이럴때 개인서버가 살아있었다면..)
여기까지 끈기있게 읽으신분들은 "근데 이거 만들어서 어따 쓸려고.." 라는 의문점이 드실거에요.(의문점이 드시면 당신은 천재..!!?? 혹은 동변상련을 느끼시는 분들..??) 이걸 왜 만들었냐하면, Wiki에 쓸 Formatter를 만드는데 거기에 쓸려고 만든 정규식입니다. (Formatter 같은거 만들때 꽤나 유용하게 쓰일 정규식입니다.)
wiki 혹은 punBB같은 Formatter가 있는것들은 내부적으로 문법이 있습니다. 문법따라 여러가지 옵션들이 붙는데 이 옵션을 뽑아내서 처리하는 부분이 필요하죠. 바로 이 문제때문에 만들게 된 것입니다. 무슨말이신지 잘 모르시겠죠?? 그러실것 같아서 아래 예제를 준비했습니다.
와 같은 문법이 있다고 한다면, 각각의 Attribute을 뽑아서 선행처리(Attribute가 옳바른 것인가? 쉽게 말하면 onclick 같은게 있는가..검사하는 등등)해야 하고, Attribute속성에 맞게 다시 수정을 해줘야 합니다.(width, height같은것은 css로 만드는 등등)
이런것에 아주 유용하게 쓰일 정규식입니다.
쓸대없이 두서가 길었네요. Formatter에서 [[image(~~~)]] 는 제거하여 순수하게 Attribute만 남기겠습니다. 그렇게 되면
var rgb_hex = function(color) { if(color==0){ var color="00"; return color; } else{ var y=color/16; var y=y+"a"; if (y.indexOf(".")==-1){ var hex2="0"; var u=y.indexOf("a"); var q=y.substring(0,u); var hex1=hex_array[q]; } else{ var l=y.split("."); var q=l[0]; var z=q*16; var xyz=color-z; var hex1=hex_array[q]; var hex2=hex_array[xyz]; } var color=hex1+hex2; return color; } }
tab-menu.html
tab-menu.zip
댓글을 달아 주세요