div+button으로 구현하는 select box 정보
기타 div+button으로 구현하는 select box
본문
select option 에 image 를 넣고 싶다는 작은 소망에서 출발.
이런저런 팁들이 있긴 했는데, select box 기본 동작과 유사한 소스는 못 찾겠어서...
그냥 직접 만들었습니다.
키보드 접근 및 오조오억개 이벤트에 대응합니다. (는 구라)
스타일링은... 알아서 하기로 ^^^^^^
jQuery-1.8.3.js 으로 작업했습니다. (그누보드, 영카트 기본 탑재)
개선해야 될 점은
# 옵션버튼끼리 키보드 화살표로 이동 가능하게
# 스크린리더 접근 시 어떻게 인식을 용이하게 할 것인가?
# focusout, click 실행 순서 때문에 사용한 시간설정(settimeout)을 어떻게 극복할 것인가??
정도입니다.
엥... 스크립트 태그는 씹히나보네요.
데모 링크에서 소스보기를...
<!doctype html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>div select</title>
<style>
.co-sel .co-sel-list {display:none}
.co-sel .co-sel-opt {border:0;background:transparent}
.co-sel .selected {background:#e3e4e5}
</style>
</head>
<body>
<form action="<?php echo $_SERVER['SCRIPT_NAME']; ?>" method="post">
<div class="co-sel">
<input type="hidden" name="sel1" id="sel1" value="<?php echo $_POST['sel1']; ?>">
<button type="button" class="co-sel-opener">셀렉트1</button>
<div class="co-sel-list">
<button type="button" class="co-sel-opt" data-value="sel1-1"><img src="btn_end.gif" alt=""> 셀렉트1-1</button>
<button type="button" class="co-sel-opt" data-value="sel1-2">셀렉트1-2</button>
<button type="button" class="co-sel-opt" data-value="sel1-3">셀렉트1-3</button>
</div>
</div>
<div class="co-sel">
<input type="hidden" name="sel2" id="sel2" value="<?php echo $_POST['sel2']; ?>">
<button type="button" class="co-sel-opener">셀렉트2</button>
<div class="co-sel-list">
<button type="button" class="co-sel-opt" data-value="sel2-1"><img src="btn_end.gif" alt=""> 셀렉트2-1</button>
<button type="button" class="co-sel-opt" data-value="sel2-2">셀렉트2-2</button>
<button type="button" class="co-sel-opt" data-value="sel2-3">셀렉트2-3</button>
<button type="button" class="co-sel-opt" data-value="sel2-4">셀렉트2-4</button>
</div>
</div>
<div class="co-sel">
<input type="hidden" name="sel3" id="sel3" value="<?php echo $_POST['sel3']; ?>">
<button type="button" class="co-sel-opener">셀렉트3</button>
<div class="co-sel-list">
<button type="button" class="co-sel-opt" data-value="sel3-1"><img src="btn_end.gif" alt=""> 셀렉트3-1</button>
<button type="button" class="co-sel-opt" data-value="sel3-2">셀렉트3-2</button>
<button type="button" class="co-sel-opt" data-value="sel3-3">셀렉트3-3</button>
<button type="button" class="co-sel-opt" data-value="sel3-4">셀렉트3-4</button>
<button type="button" class="co-sel-opt" data-value="sel3-5">셀렉트3-5</button>
<button type="button" class="co-sel-opt" data-value="sel3-6">셀렉트3-6</button>
<button type="button" class="co-sel-opt" data-value="sel3-7">셀렉트3-7</button>
</div>
</div>
<input type="submit" value="submit">
</form>
</body>
</html>
6
댓글 9개
기본 select 와 option 태그를 이용해 만들고, jquery 를 이용해서 페이지가 랜더링 될때 해당 select > option 태그를 이용해 DOM을 재생성합니다.
모바일 디바이스에서는 모바일 디바이스 기본 UI처럼 동작하도록 되어있고,
탭키를 비롯하여 키보드 방향키 이동, 마우스로 선택 등이 가능하도록 되어있;;
그리고 탭키와 방향키를 이용할때 재구성된 DOM 선택한 옵션값에 포커싱 이벤트가 발생해서 스크린리더에도 대응가능합니다.
필요하시면 https://slack.moimz.com 슬랙채널에서 절 불러주세욧 (이렇게 슬랙채널 홍보를 ㅋㅋㅋ)
이미지까지 넣은 예제는 대충 요렇게 보입니다.
한 가지, 리스트로 들어가면 탭으로 빠져나올 수 없는 게 아쉽네요. ^^;;
제가 쓰는 브라우져들은 select 태그에서 option 이 나온상태로는 탭으로 포커스이동이 안되길래 그게 브라우져 표준인갑다 했는데 ㅎㅎㅎ
그것과는 별개로, select option 이 펼쳐진 상태에서 tab 으로 다음 컨텐츠로 이동할 수 있느냐 여부는 웹 접근성에 근거하여 다뤄져야 할 것으로 여겨지며, 문서 내에서의 이동은 자유로워야 한다고 생각합니다.
윈도우의 select 는 방향키를 눌렀을때, 현재 선택된 것의 이전 또는 다음것이 바로 선택되는 방식이고,
맥은 select 에 포커스를 둔채로 방향키를 눌렀을때 무조건 목록이 보여지고, 이전/다음 옵션에 포커싱이 된 상태(선택된 상태가 아닌)가 되고, 여기서 원하는 옵션으로 이동후 엔터를 눌러야 해당 옵션이 선택되네요.
엔터키를 누르지 않고 ESC로 옵션창을 숨겼을 경우 포커싱되어있는 옵션이 아닌 이전선택사항으로 돌아가게 됩니다.
그러니까 목록이 펼쳐진 상태에서 TAB키 이동을 지원할 경우 이전 선택사항을 유지한채 다음 인풋으로 돌아갈지, 포커싱이 되어 있는 옵션을 선택하고 다음 인풋으로 넘어갈지 불확실하기 때문에 탭키이동을 막아둔것 같습니다.
윈도우 방식은 select 에 옵션이 무엇이 있는지 명확한 상태에서 빠른선택을 할 수 있다는 장점이 있고, 맥 방식은 select 의 전체목록을 확인하고 원하는걸 고를 수 있는 장점이 있는 것 같습니다.
제가 맥을 오래써서 그런진 몰라도 제가 보기엔 맥 방식이 더 사용자 친화적이라고 생각되는... ㅎ
어떤 자료실의 카테고리 select 에
그누보드
그누보드4
그누보드4 스킨
그누보드5
그누보드5 플러그인
옵션이 있다고 하고
윈도우라면 그누보드4 스킨을 등록하려고 할때 윈도우방식은 방향키로 그누보드4 가 보인다면 방향키 이동을 멈출가능성이 있어 보입니다. 그누보드4 스킨이 있는지 모르니까요.
그누보드4 스킨 카테고리가 있다는걸 알고 있는 상태에서 그누보드5 스킨을 등록하려고 할때 방향키로 그누보드5 가 보인다면 한번더 방향키를 눌러 그누보드5 스킨을 선택하려고 하겠지만, 스킨이 아닌 그누보드5 플러그인 항목이 보인다면, 그때서야 그누보드5 스킨항목이 없다는 걸 알고 다시 방향키를 위로 해서 그누보드5 를 선택할것이고,
맥은 그누보드가 선택된 상태로 방향키를 누르면 전체목록이 바로 확인이 되니까 좀더 명확히 자신이 원하는 항목을 고를 수 있을 것 같습니다.
이 부분은 O/S에 따라 다른 부분이기 때문에, 서비스 제공자의 관점에 따라 방법론의 차이가 생길 수 밖에 없는, 정답이 없는 문제 같습니다.