HTML Select Box, 셀렉트 박스를 DIV/HTML로

2016-08-30 16:29:33

심심해서, Select box 를 HTML 로 구현했다.

그렇게 구현하는 이유는 Option 안에 이미지 출력이나, 필요한 HTML 처리 등이 어렵기 때문이다.

그리고 디자인도 원하는 대로 바꿀수 있고...

non-jquery 처리하려다 귀찮아서.. 그냥.. jQuery 버전이다.

적당히 이용하면 된다.

<?php

function htmlSelectBox(&$array,$name='',$def='',$option='')
{
	$TITLE='';
	$OP='';

	foreach($array as $v)
	{
		if(!$TITLE || $DEF==$v['KEY']){$TITLE=$v['VAL'];}
		$OP.='<div class="InputSelectOptionList" data-value="'.$v['KEY'].'">'.$v['VAL'].'</div>';
	}

	$H='<div class="InputSelect">';
	$H.='<input type="hidden" name="'.$name.'" value="'.$def.'" class="InputSelectValue">';
	$H.='<div class="InputTitle"'.$option.'>'.$TITLE.'</div>';
	$H.='<div class="InputSelectOption">'.$OP.'</div>';
	$H.='</div>';

	return $H;
}

?>

<style>

.InputSelect
{ 
	display:block;
    position:relative;
    width:100%;
}
.InputSelect .InputTitle
{
	width:100%;
    height:24px;
    cursor:pointer;
    line-height:22px;
    background-color: #fff;
    padding:0px 10px;
    border-radius:4px;
    border:1px solid #ccc;
    border-right:5px solid #ccc;
}
.InputSelect .InputSelectOption
{
	display:none;
	position:absolute;
	width:100%;
	background:#fff;
	border:1px solid #888;
	border-radius:4px;
	top:25px;
	left:0px;
	overflow:hidden;
	box-shadow:0px 0px 10px 0px rgba(0,0,0,0.5);
	z-index:10;
}

.InputSelect .InputSelectOptionList
{
	border-bottom:1px solid #ddd;
	padding:0px 10px;
	line-height:28px;
	color:#888;
	cursor:pointer;
	white-space:nowrap;
	overflow:hidden;
	text-overflow:ellipsis;white-space:nowrap;word-wrap:normal;
}
.InputSelect .InputSelectOptionList:hover
{
	background:#eee;
}

.InputSelect .InputSelectOptionList:last-child
{
	border-bottom:0px;
}

</style>

<script>

$(document).ready(function(){

	$(".InputSelect").click(function(){
		$(this).children('.InputSelectOption').toggle();
	});
	
	$(".InputSelectOptionList").click(function(){
		var nid=$(this).parent().parent();
		if(!nid){return;}
	
		var nid_title=nid.children('.InputTitle');
		var nid_value=nid.children('.InputSelectValue');
		
		if(nid_title)
		{
			nid_title.html($(this).html());
		}
		
		if(nid_value)
		{
			nid_value.val($(this).data('value'));
		}
	});

});
	
</script>

사이트에 맞게 디자인 하고, 드롭다운 화살표를 첨가하면 좀더 좋아질것이고.. 드롭다운 애니메이션을 넣으면 더 좋아질것이다.

목록 이전 다음

개발/TIP

자바스크립트 - 쿠키

function setCookie(mName, mValue, mDay) { var expire=new Date(); expire.setDate(expire.getDate( ... more

2016-06-28 00:22:51

<<<0 1 2 >>>

토쳐라이딩 | IEO.KR

IEO.KR의 사전 서면동의 없이 IEO.KR 사이트의 일체의 정보, 콘덴츠 및 UI등을 상업적 목적으로 전재, 전송, 스크래핑 등 무단 사용할 수 없습니다.