지돌스타의 Flex와 천문프로그래밍

Select 태그로 CSS를 이용해 색을 지정하기 힘듭니다.
그래서 검색중에 찾은 건데요. Select Tag를 직접사용한 것은 아니지만 javascript를 이용해 비슷하게 구현한 것을 발견했습니다. 만약 없는 기능이 있다면 javascript 소스를 수정하면 됩니다.
FireFox와 IE6, IE7에서 테스트를 했습니다. 잘 되더군요.

위 코드와 이미지를 전부 다운로드 받아서 html 을 실행해보세요. 아래와 같은 화면이 나올겁니다.
색이 좀 구리지만 이쁘게 만들 수 있습니다. Select박스에 화살표 표시도 이미지 이기 때문에 PNG, GIF로 하면 투명으로 할 수 있구요.
 
소스에 testSelectBox에서 사용되는 설정값을 정리해 보면 아래와 같습니다

id : selectBox의 id를 지정 (id이름으로 hidden 폼을 생성하여 선택되는 값을 입력한다)
width : selectBox의 가로크기를 지정 (절대값이나 %를 붙인 상대값 사용가능;;)
height : 높이 지정 (역시 절대/상대값 사용하면 됨)
bordercolor : 테두리 색깔을 지정
bgcolor : 배경 색깔 지정
fontcolor : 글자 색깔 지정
focusbgcolor : 선택되었을때 배경 색깔
fontsize : 글자의 크기 (숫자만 넣어야 함. 예를 들어 8을 넣으면 8pt가 됨;)
padding : cellpadding의 값을 정함
bullet : 오른쪽 화살표, <img src=...>등의 이미지도 되고, - 같은 텍스트 넣어도 됨
onChange : selectBox에서 많이 쓰는 onChange 이벤트가 일어날때 페이지 이동을 해야 할 경우 [onChange]=true를 입력하면 됨;
     (이 경우에는 option의 value값에 url을 입력하면 됨)

- 그리고 testOption에서는 0 부터 원하는 option값을 추가하면 됩니다
name과 value를 , 로 연결해서 지정하면 됩니다.
예를 들어 이름은
testOption[0] = "이름,값";
으로 하면 되죠;
(참 허접한 지정입니다만;; 간편한 사용을 위해서 그런 것이니 이해를;;)
만약 option의 초기값을 사용하고 싶은 경우에는;; testOption["select"]=0; 처럼 select 키에 인덱스값을 지정하면 됩니다.

HTML 소스 (Language : html4strict)

1. <script src="zSelectBox.js"></script>
2. <script>
3. var testSelectBox = new Array();
4. var testOption = new Array();
5. testSelectBox["id"] = "test";
6. testSelectBox["bordercolor"] = "#ff0000";
7. testSelectBox["bgcolor"] = "#ffccee";
8. testSelectBox["fontsize"] = "10";
9. testSelectBox["focusbgcolor"] = "#0000ff";
10. testSelectBox["bullet"] = "<img src='downbutton.gif' border=0/>";
11. testOption[0] = "테스트1,1";
12. testOption[1] = "테스트2,2";
13. testOption[2] = "테스트3,3";
14. testOption["select"] = 0;
15.  
16. printZSelectBox(testSelectBox,testOption);
17. </script>
18.  
19.  

zSelectBox.js (Language : javascript)

1. function printZSelectBox(selectBox,option) {
2.     var tmp, name, value, outString, action;
3.     var id = selectBox["id"];
4.     var width = selectBox["width"];
5.     var height = selectBox["height"];
6.     var bordercolor = selectBox["bordercolor"];
7.     var bgcolor = selectBox["bgcolor"];
8.     var fontcolor = selectBox["fontcolor"];
9.     var focusbgcolor = selectBox["focusbgcolor"];
10.     var fontsize = selectBox["fontsize"];
11.     var padding = selectBox["padding"];
12.     var bullet = selectBox["bullet"];
13.     var onChange = selectBox["onChange"];
14.     var select = option["select"];
15.  
16.     if(bordercolor==null) bordercolor = "#888888";
17.     if(bgcolor==null) bgcolor= "#ffffff";
18.     if(fontcolor==null) fontcolor="#333333";
19.     if(focusbgcolor==null) focusbgcolor= "#ededed";
20.     if(width==null) width=130;
21.     if(height!=null) height="height="+height; else height = "";
22.     if(fontsize==null) fontsize="9";
23.     if(padding==null) padding="1";
24.     if(bullet==null) bullet="▽";
25.  
26.     outString = "<input type=hidden name='"+id+"'>";
27.     outString += "<table width="+width+" "+height+" border=0 cellspacing=1 cellpadding=0 bgcolor="+bordercolor+" style='table-layout:fixed;cursor:hand' onClick=\"showZSelectBox('layer_"+id+"')\">\n";
28.     outString += "<tr bgcolor="+bgcolor+">\n";
29.     outString += "<td>\n";
30.     outString += "<table border=0 width=100% height=100% cellspacing=0 cellpadding="+padding+" style='table-layout:fixed;'>\n";
31.     outString += "<col width=></col><col width=20></col>\n";
32.     outString += "<tr>\n";
33.     outString += "<td style='line-height:100%;padding-top:3px;padding-left:3px;' onMouseOver=this.style.backgroundColor='"+focusbgcolor+"' onMouseOut=this.style.backgroundColor=''><div id="+id+"_value style=color:"+fontcolor+";font-size:"+fontsize+"pt;>Select</div></td>\n";
34.     outString += "<td style='font-size:"+fontsize+"pt;padding:0px;color:"+fontcolor+";' align=center>"+bullet+"</td>\n";
35.     outString += "</tr>\n";
36.     outString += "</table>\n";
37.     outString += "</td>\n";
38.     outString += "</tr>\n";
39.     outString += "</table>\n";
40.  
41.     outString += "<div id='layer_"+id+"' style='z-index:100; position:absolute; visibility:hidden' onMouseOver=showZSelectBox('layer_"+id+"') onMouseOut=hideZSelectBox('layer_"+id+"')>\n";
42.     outString += "<table border=0 cellspacing=1 cellpadding=0 bgcolor="+bordercolor+" width="+width+">\n";
43.     outString += "<tr bgcolor="+bgcolor+">\n";
44.     outString += "<td>\n";
45.     outString += "<table border=0 cellspacing=0 cellpadding=0 width=100% style=table-layout:fixed>\n";
46.     outString += "<col style=padding-left:3px;font-size:"+fontsize+"pt;color:"+fontcolor+" width=></col>\n";
47.     for(i=0;i<option.length;i++) {
48.         tmp = option[i].split(",");
49.         name = tmp[0];
50.         value = tmp[1];
51.         if(value==null) value = "";
52.         if(onChange!=null&&value) action= "location.href=\""+value+"\"";
53.         else action = "\"selectZSelectBox('"+name+"','"+value+"','"+id+"')\"";
54.         outString += "<tr onMouseOver=this.style.backgroundColor='"+focusbgcolor+"' onMouseOut=this.style.backgroundColor='' style=cursor:hand><td onClick="+action+" style='padding-top:1px;font-size:"+fontsize+"pt;color:"+fontcolor+"'>"+name+"</td></tr>\n";
55.     }
56.    
57.     outString += "</table>\n";
58.     outString += "</td>\n";
59.     outString += "</tr>\n";
60.     outString += "</table>\n";
61.     outString += "</div>\n";
62.     document.writeln(outString);
63.  
64.     if(select!=null) {
65.         tmp = option[select].split(",");
66.         name = tmp[0];
67.         value = tmp[1];
68.         if(value==null) value = "";
69.         document.all[id+"_value"].innerHTML = name;
70.         document.all[id].value = value;
71.     }
72. }
73.  
74. function showZSelectBox(id) {
75.     document.all[id].style.visibility = '';
76. }
77.  
78. function hideZSelectBox(id) {
79.     document.all[id].style.visibility = 'hidden';
80. }
81.  
82. function selectZSelectBox(name,value,id) {
83.     document.all[id+"_value"].innerHTML = name;
84.     document.all[id].value=value;
85.     document.all["layer_"+id].style.visibility = 'hidden';
86. }
87.  

세티님께서 지적하신 것 처럼 document.all은 DOM 표준이 아닙니다.
그래서 document.all 대신해 document.getElementById를 사용하는 것이 좋습니다.
실제로 사파리 브라우져에서는 document.all을 인식하지 못하더군요.
위의 Javascript 에서는 document.all[id].value 대신해서 document.getElementId(id).value 로 수정하는 것을 추천합니다.

출처 : http://designsurf.net/zboard/zboard.php ··· no%3D136 

글쓴이 : 지돌스타(http://blog.jidolstar.com )

이 글의 관련글

이글의 태그와 관련된 글이 없습니다.

오늘의 인기글

• (동영상) 대한민국의 땅, 독도 (31)
• [Flex, ActionScript 3] ActionScript 계산 속도 최.. (22)
• [Flex]한글폰트 입력이 가능한 회전하는 Textarea.. (18)
• [CSS/XHTML] 색을 지정할 수 있는 Select 태그 (14)
• [Flex] MXML에서 사용하는 Non Visual 컴포넌트 제.. (13)

전체조회 7773 : 오늘조회 15