CSS Code
01 | /* UI Object */ |
02 | .select{ position : relative ; z-index : 1000 ; width : 300px ; font-family : '돋움' ,dotum; font-size : 12px } |
03 | .select ul,.select li,.select dl,.select dt,.select dd,.select p{ margin : 0 ; padding : 0 } |
04 | .select li{ list-style : none } |
05 | .select .select_label{ height : 12px ; padding : 4px 17px 3px 5px ; border : 1px solid #6e706f ; border-right-color : #d4d5d7 ; border-bottom-color : #d4d5d7 ; background : #fff url (img/bu_arr_label.gif) no-repeat 100% 0 ; line-height : 12px ; cursor : pointer ; _cursor :hand} |
06 | .select .select_label span{ display : block ; overflow : hidden ; width : 100% ; white-space : nowrap ;text- overflow :ellipsis} |
07 | .select .select_layer{ display : none ; position : absolute ; top : 19px ; left : 0 ; width : 100% ; z-index : 1000 ; background : #fff } |
08 | .select .select_layer ul{ border : 1px solid #d4d5d7 ; border-left-color : #6e706f ; border-top : 0 ; padding : 1px 2px 2px } |
09 | .select .select_layer ul li{ display :inline- block ; width : 100% ; vertical-align : top } |
10 | .select .select_layer ul li dl dt{ display : block ;* display :inline- block ; overflow : hidden ; width : 100% ; margin-top : 1px ; color : #666 ; line-height : 100% ; cursor : pointer ; _cursor :hand} |
11 | .select .select_layer ul li dl dt span{ display : block ; overflow : hidden ; padding : 4px 3px 3px ; white-space : nowrap } |
12 | .select .select_layer ul li dl{ position : relative } |
13 | .select .select_layer ul li dl dd{ display : none ; position : absolute ; top : -2px ; left : 100% ; margin-left : -5px ; padding-left : 14px ; background : url (img/bu_arr_tooltip.gif) no-repeat 10px -1px ; color : #fff ; line-height : 15px } |
14 | .select .select_layer ul li dl dd p{ padding : 4px ; border : 1px solid #333 ; border-left : 0 ; background : #4d4d4d ; white-space : nowrap } |
15 | .select .select_layer ul li dl dd img{ vertical-align : top } |
16 | .select .select_layer ul li.on dl dd{ display : block } |
17 | .select .select_layer ul li.on dl dt{ background : #eee ; color : #000 } |
18 | /* //UI Object */ |
HTML Code
01 | <!-- UI Object --> |
02 | < div class = "select" style = "width:120px" > |
03 | |
04 | < div id = "select_label" class = "select_label" > |
05 | < span >선택하세요</ span > |
06 | </ div > |
07 | |
08 | < div id = "select_layer" class = "select_layer" > |
09 | |
10 | < ul > |
11 | < li > |
12 | < dl > |
13 | < dt >< span >그레이트 피레니즈</ span ></ dt > |
14 | < dd > |
15 | < p >하얀놈</ p > |
16 | </ dd > |
17 | </ dl > |
18 | </ li > |
19 | < li > |
20 | < dl > |
21 | < dt >< span >골든 레트리버</ span ></ dt > |
22 | < dd > |
23 | < p >누런놈</ p > |
24 | </ dd > |
25 | </ dl > |
26 | </ li > |
27 | < li > |
28 | < dl > |
29 | < dt >< span >말라뮤트</ span ></ dt > |
30 | < dd > |
31 | < p >무서운놈</ p > |
32 | </ dd > |
33 | </ dl > |
34 | </ li > |
35 | < li > |
36 | < dl > |
37 | < dt >< span >허스키</ span ></ dt > |
38 | < dd > |
39 | < p >멋있는놈</ p > |
40 | </ dd > |
41 | </ dl > |
42 | </ li > |
43 | < li > |
44 | < dl > |
45 | < dt >< span >치와와</ span ></ dt > |
46 | < dd > |
47 | < p >< img src = "img/temp.jpg" width = "300" height = "100" alt = "쪼끄만 놈" ></ p > |
48 | </ dd > |
49 | </ dl > |
50 | </ li > |
51 | </ ul > |
52 | |
53 | </ div > |
54 | |
55 | </ div > |
56 | <!-- //UI Object --> |
JavaScript Code
01 | <script type= "text/javascript" > |
02 | /* UI Pattern Script */ |
03 | // 액션만 구현해 둔 테스트용 스크립트 |
04 | function selectBoxAction() { |
05 | var label, layer, li; |
06 | label = document.getElementById( "select_label" ); |
07 | layer = document.getElementById( "select_layer" ); |
08 | li = layer.getElementsByTagName( "LI" ); |
09 | label.onclick = function () { |
10 | layer.style.display = (layer.style.display != "block" ) ? "block" : "none" ; |
11 | } |
12 | for ( var i=0;i<li.length;i++) { |
13 | li[i].onmouseover = function () { this .className = "on" } |
14 | li[i].onmouseout = function () { this .className = "" } |
15 | li[i].onclick = function () { |
16 | label.getElementsByTagName( "SPAN" )[0].childNodes[0].nodeValue = this .getElementsByTagName( "DT" )[0].childNodes[0].childNodes[0].nodeValue; |
17 | layer.style.display = "none" ; |
18 | } |
19 | } |
20 | } |
21 | selectBoxAction(); |
22 | /* //UI Pattern Script */ |
23 | </script> |