SelectBox 디자인 하기~ > 그누보드5 팁자료실

그누보드5 팁자료실

SelectBox 디자인 하기~ 정보

SelectBox 디자인 하기~

본문

<style type="text/css">
.SelectBoxBasic { width:120px; font-size:11px; color:#999; }
.SelectBoxBasic div.DefaultName { height:24px; line-height:26px; padding:0 0 0 6px; background-color:#FFF; border:1px solid #d4d4d4; cursor:pointer; }
.SelectBoxBasic ul { background-color:#FFF; border-left:1px solid #d4d4d4; border-right:1px solid #d4d4d4; position:absolute; display:none; margin:0 0 0 0; padding:0; }
.SelectBoxBasic ul li { list-style-type:none; height:24px; line-height:26px; border-bottom:1px solid #d4d4d4; cursor:pointer; padding:0 0 0 6px; }
</style>


<div class="SelectBoxBasic">
 <input type="hidden" value="봄하늘"/>
 <div class="DefaultName">선택하세요</div>
 <ul>
  <li id="가을하늘">가을하늘</li>
  <li id="겨울하늘">겨울하늘</li>
  <li id="여름하늘">여름하늘12</li>
  <li id="봄하늘">봄하늘2</li>
 </ul>
</div>

<br/>

<div class="SelectBoxBasic">
 <input type="hidden" value="M48"/>
 <div class="DefaultName">선택하세요</div>
 <ul>
  <li id="1을하늘">1을하늘</li>
  <li id="2울하늘">2울하늘</li>
  <li id="3름하늘">3름하늘12</li>
  <li id="M48">4하늘2</li>
 </ul>
</div>

<script type="text/javascript">
$(".SelectBoxBasic").each(function(){
var SelectVal = $(this).children('input').val();
var SelectDefault = $(this).children('ul').children("#"+SelectVal);
if(SelectVal){ // INPUT TRUE
 if($(SelectDefault).html()){
  $(this).children('.DefaultName').html($(SelectDefault).html());
 }else{
  $(this).children('.DefaultName').html("VALUE ERROR");
  $(this).children('input').val("");
 }
}
});
$(".SelectBoxBasic").click(function(){
 $(this).children('ul').css("width",$(".SelectBoxBasic").width()-2+"px");
 $(this).children('ul').slideToggle(100);
});
$(".SelectBoxBasic").mouseleave(function() {
 $(this).children('ul').fadeOut(500);
});
$(".SelectBoxBasic ul li").click(function(){
 $(this).parent('ul').siblings('.DefaultName').html($(this).text());
 $(this).parent('ul').siblings('input').val($(this).attr('id'));
});

</script>

모두 직접 제작했구요 뭐..
구글에서 이것저것 찾아보니깐 DB에서 벨류 값 지정하면 자동으로 지정안되길래
직접 만들었습니다.

그냥 뭐..
만약 페이지 로딩시 코코몽 이라는 value 가 디폴트로 잡히고 싶으면
input value = "코코몽" 입력시 자동으로 디폴트 잡게 만들었습니다.

디자인은 알아서^^..
추천
4

댓글 7개

전체 2,431 |RSS
그누보드5 팁자료실 내용 검색

회원로그인

(주)에스아이알소프트 / 대표:홍석명 / (06211) 서울특별시 강남구 역삼동 707-34 한신인터밸리24 서관 1404호 / E-Mail: admin@sir.kr
사업자등록번호: 217-81-36347 / 통신판매업신고번호:2014-서울강남-02098호 / 개인정보보호책임자:김민섭(minsup@sir.kr)
© SIRSOFT