검색 옵션처럼 select를 사용할 곳에 디자인이 입혀진 경우 마크업을 라디오 버튼으로 대체하여 작성한 예

javascript

function getClass(classname, tagname, tarID) {}	// 라이브러리 참조
function addEvent( obj, type, fn ) {}	// 라이브러리 참조
function removeEvent( obj, type, fn ) {}	// 라이브러리 참조
function stopBubble(e){}	// 라이브러리 참조

function selectMore(wrapper){
	var _d = document;
	var wrapper = _d.getElementById(wrapper);				// 링크박스
	var pointer = getClass('title','span',wrapper)[0];		// 타이틀
	var linkBox = getClass('linkbox','div',wrapper)[0];		// 목록
	var linkBoxList = linkBox.getElementsByTagName('label');	// 목록의 모든 라벨
	//	linkBox.style.display = 'none';		// 목록 숨김 초기화는 css로 지정함 : js제거시엔 작동 안함.

	function hideLinks(){			// 목록을 숨기는 함수
		if (linkBox.style.display == ''){
			linkBox.style.display = 'none';
		}
	}

	function toggleLinks(e){		// 목록 토글 함수
		if (linkBox.style.display == 'none'){
			linkBox.style.display = '';
			stopBubble(e);
			addEvent(document,'click',hideLinks);
		} else {
			linkBox.style.display = 'none';
			stopBubble(e);
			removeEvent(document,'click',hideLinks);
		}
		return false;
	}

	for (var i=0; i<linkBoxList.length; i++){
		linkBoxList[i].onclick = function(){
			pointer.childNodes[0].nodeValue = this.childNodes[0].nodeValue;		// 옵션 선택시 타이틀 value값 교체
			hideLinks();														// 선택시 목록 숨김
		}
		linkBoxList[linkBoxList.length-1].onblur = hideLinks;		// 링크목록의 마지막 링크에서 벗어나면 링크목록 숨김.
	}

	pointer.onclick = toggleLinks;			// 타이틀을 클릭 or 포커스 시 링크목록을 보이게 한다.
}

html

<div class="select_box" id="selectBox"><!-- id는 단순한 hook -->
	<span class="title">통합검색</span>
	<div class="linkbox" style="display:none;"><!-- css로 기본 숨김 -->
		<ul>
			<li><input type="radio" id="s_tot" name="test" /> <label for="s_tot">통합검색</label></li>
			<li><input type="radio" id="s_peo" name="test" /> <label for="s_peo">직원</label></li>
			<li><input type="radio" id="s_sub" name="test" /> <label for="s_sub">업무</label></li>
		</ul>
	</div>
	<input type="text" />
	<input type="button" class="button" value="검색" />
</div>
<script type="text/javascript">
//<![CDATA[
	selectMore('selectBox');
//]]>
</script>

미리보기

셀렉트 박스 디자인의 단순 링크 목록 펼침/숨김

javascript

function getClass(classname, tagname, tarID) {}	// 라이브러리 참조
function addEvent( obj, type, fn ) {}			// 라이브러리 참조
function removeEvent( obj, type, fn ) {}			// 라이브러리 참조
function stopBubble(e){}					// 라이브러리 참조

function linksMore(wrapper){
	var _d = document;
	var wrapper = _d.getElementById(wrapper);		// 링크박스
	var pointer = getClass('title','a',wrapper)[0];			// 타이틀
	var linkBox = wrapper.getElementsByTagName('ul')[0];	// 링크목록
	var linkBoxList = linkBox.getElementsByTagName('a');	// 링크목록의 모든 링크
	linkBox.style.display = 'none';		//링크목록 숨김 초기화

	function hideLinks(){			// 링크목록을 숨기는 함수
		if (linkBox.style.display == ''){
			linkBox.style.display = 'none';
		}
	}

	function toggleLinks(e){		// 링크목록 토글 함수
		if (linkBox.style.display == 'none'){
			linkBox.style.display = '';
			stopBubble(e);
			addEvent(document,'click',hideLinks);
		} else {
			linkBox.style.display = 'none';
			stopBubble(e);
			removeEvent(document,'click',hideLinks);
		}
		return false;
	}

	for (var i=0; i<linkBoxList.length; i++){		// 링크목록의 마지막 링크에서 벗어나면 링크목록 숨김.
		linkBoxList[linkBoxList.length-1].onblur = hideLinks;
	}

	pointer.onclick = toggleLinks;			// 타이틀을 클릭 or 포커스 시 링크목록을 보이게 한다.

	wrapper.onclick = function(e){			// 링크박스 영역을 클릭해도 링크목록이 사라지지 않게 한다.
		stopBubble(e);
	}
}

html

<div id="selectBox">
	<a href="#" class="title">links more...</a>
	<ul class="linkbox" id="linkbox1">
		<li><a href="#">link1</a></li>
		<li><a href="#">link2</a></li>
		<li><a href="#">link3</a></li>
	</ul>
</div>

<div id="selectBox2">
	<a href="#linkbox2" class="title">links more...</a>
	<ul class="linkbox" id="linkbox2">
		<li><a href="#">link1</a></li>
		<li><a href="#">link2</a></li>
		<li><a href="#">link3</a></li>
	</ul>
</div>

<script type="text/javascript">
//<![CDATA[
	linksMore('selectBox');
	linksMore('selectBox2');
//]]>
</script>

id를 가진 wrapper안에서 class=”title” 클릭시 wrapper안의 첫번째 ul을 보여줌.

프로세스

1. 펼침 메뉴(링크목록)은 기본적으로 숨김 처리.
2. 링크(타이틀) 클릭시 펼침메뉴 보이고 숨김 토글 함수 실행
3. 링크목록의 마지막 링크에서 포커스 아웃(블러)시 링크목록 숨김
4. 링크목록이 보이는 상태라면 링크목록 바깥쪽(document)클릭시 링크목록 숨김 처리
5. 링크목록 영역은 클릭해도 사라지지 않음.

사용한 함수

1. 토글함수 – toggleLinks(e)
2. 목록숨김함수 – hideLinks()
3. class선택자 함수 – getClass(classname, tagname, tarID) (
4. 이벤트리스터추가 함수 – addEvent( obj, type, fn )
5. 이벤트리스터제거 함수 – removeEvent( obj, type, fn )
6. 이벤트 버블 멈춤 함수 – stopBubble(e)

미리보기

IE6에서 셀렉트박스가 z-index에 무관하게 최상위로 보이는 현상

<!--[if lte IE 6.0]>
<script type="text/javascript">
function selectFix(divID) {
	var tar = document.getElementById(divID);
	var tarWidth = tar.offsetWidth;
	var tarHeight = tar.offsetHeight;
	var tarTop = tar.offsetTop;
	var tarLeft = tar.offsetLeft;

	var coverID = divID + "_cover";

	if (document.getElementById(coverID)) return false;

	var cover = document.createElement("iframe");
	tar.parentNode.insertBefore(cover,tar);
	cover.setAttribute("id",coverID);

	if (!document.getElementById(coverID)) return false;
	var obj = document.getElementById(coverID);
	obj.setAttribute("frameborder",0);
	obj.style.position = "absolute";
	obj.style.top = tarTop + "px";
	obj.style.left = tarLeft + "px";
	obj.style.width = tarWidth + "px";
	obj.style.height = tarHeight + "px";
}
function removeSelectFix(divID) {
	var tar = document.getElementById(divID);
	var obj = document.getElementById(divID + "_cover");
	if (!obj) return false;
	tar.parentNode.removeChild(obj);
}
</script>
<![endif]-->

조건부 주석으로 IE6에서만 적용되도록 감쌌음.

아래의 사용법

<script type="text/javascript">
function showPopup() {
	document.getElementById("popup").style.display = "";
	try{
		if(selectFix) {
			selectFix("popup");
		}
	}catch(aa){}

}
function hidePopup() {
	document.getElementById("popup").style.display = "none";
	try{
		if(removeSelectFix) {
			removeSelectFix("popup");
		}
	}catch(aa){}
}
</script>

레이어등이 보이는경우 – showPopup();에 selectFix(layerID)를 추가해 주고,
레이어를 없앨경우 – hidePopup(); 에 removeSelectFix(layerID)를 추가함.

• select를 단순 박스형태로 덮는경우에 사용 가능
• 동적으로 움직이는 레이어나 box형태가 아닌 레이어에 대해 iframe의 한계가 있음.
• 투명한 플래쉬일 경우 역시 iframe의 한계가 있음.

미리보기