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 = "코코몽" 입력시 자동으로 디폴트 잡게 만들었습니다.
디자인은 알아서^^..
.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 = "코코몽" 입력시 자동으로 디폴트 잡게 만들었습니다.
디자인은 알아서^^..
댓글 7개
11년 전
감사합니다~ㅎㅎ
11년 전
감사합니다.^^
스마트모바일
11년 전
감사합니다
11년 전
감사합니다.^^
11년 전
그누4에도 적용되나요? ^^;;
11년 전
그누보드 4에도 적용될껍니다. ^^
11년 전
그렇군요. 적용해봐야 겠네요. 답변 고맙습니다. ^^
게시판 목록
그누보드5 팁자료실
| 번호 | 제목 | 글쓴이 | 날짜 | 조회 |
|---|---|---|---|---|
| 공지 | 3년 전 | 4401 | ||
| 2694 | 2개월 전 | 188 | ||
| 2693 | 2개월 전 | 148 | ||
| 2692 | 2개월 전 | 158 | ||
| 2691 | 2개월 전 | 174 | ||
| 2690 | 2개월 전 | 326 | ||
| 2689 | 2개월 전 | 233 | ||
| 2688 |
|
2개월 전 | 440 | |
| 2687 | 2개월 전 | 291 | ||
| 2686 |
선택과집중
|
2개월 전 | 329 | |
| 2685 | 2개월 전 | 290 | ||
| 2684 | 2개월 전 | 346 | ||
| 2683 | 2개월 전 | 481 | ||
| 2682 | 2개월 전 | 276 | ||
| 2681 | 2개월 전 | 301 | ||
| 2680 |
선택과집중
|
2개월 전 | 278 | |
| 2679 | 2개월 전 | 330 | ||
| 2678 |
|
2개월 전 | 429 | |
| 2677 |
|
3개월 전 | 502 | |
| 2676 | 3개월 전 | 326 | ||
| 2675 | 3개월 전 | 304 | ||
| 2674 |
선택과집중
|
3개월 전 | 480 | |
| 2673 |
|
3개월 전 | 322 | |
| 2672 | 3개월 전 | 335 | ||
| 2671 | 3개월 전 | 284 | ||
| 2670 | 3개월 전 | 259 | ||
| 2669 | 3개월 전 | 373 | ||
| 2668 | 3개월 전 | 289 | ||
| 2667 |
선택과집중
|
3개월 전 | 483 | |
| 2666 |
선택과집중
|
3개월 전 | 470 | |
| 2665 |
선택과집중
|
3개월 전 | 404 |
댓글 작성
댓글을 작성하시려면 로그인이 필요합니다.
로그인하기