셀렉트박스 -> 레이어 변환 스크립트 HTC 버전

일반적인 셀렉트 박스를 이쁜 형태의 레이어로 변환해 주는 스크립트의 HTC 버전입니다.
첨으로 HTC로 작업하다 보니 조금 어려운 점이 있었지만 덕분에 MSDN도 뒤지면서 많은 공부가 되었습니다.

첫번째 링크는 예제 파일이고 두번째 링크는 HTC 파일입니다.
먼저 첫번째 링크를 열어서 예제를 보시기 바랍니다.

* 주요 기능
- 셀렉트박스 폼필드를 자동으로 레이어로 변환
- 기존 셀렉트박스 태그 수정 불필요
- 여백 공간에 따라 아래 위의 공간을 비교하여 넓은쪽으로 레이어가 출력 됨
- 옵션 항목이 많아질 경우 자동으로 스크롤바가 생성
- 특정 셀렉트박스에만 색상 및 화살표 이미지 별도 설정 가능
- 변환된 레이어를 텍스트처럼 취급 (2개 이상이 연속으로 출력 가능)
- HTC가 완벽히 지원되는 버전이 아닐 경우 변환을 하지 않음 (인터넷 익스플로러 5.5 이상)
- 자동으로 스크롤바가 생성되어 옵션 항목 레이어가 보일 때 문서가 일시적으로 길어져 문서의 스크롤바가 생기는 문제가 없음

* 개선 및 기능 추가 사항
- 값이 선택되어진 상태에서 휠을 아래 위로 움직일 경우 값을 변경
- 옵션 항목이 많아 스크롤바가 생성되었을 때 휠을 움직여 끝까지 도달한 경우 문서가 스크롤되는 문제
- 아이프레임으로 문서에 속해질 때 레이어의 높이 문제
- 전체를 묶는 태그를 <SPAN> 태그를 사용하여 변환된 셀렉트 박스 하단에 약간의 공백이 생기는 문제

* 사용 방법
- 스타일시트에 미리 정의하는 방법
  <style>select{ behavior: url('/inc/selectBox.htc');}<style>
- 특정 SelectBox 폼필드에만 적용하는 방법
  <select style="behavior: url('/inc/selectBox.htc');"></select>

* 혹시 문제점이나 기능 추가 사항이 있으면 이곳에 적어주시기 바랍니다.
  문제점을 수정하거나 기능 추가를 하여 다시 보여드리겠습니다.

http://www.djrecovery.or.kr/inc/selectBox.htc

http://www.djrecovery.or.kr/selectBox.htm

 

출처 :

http://www.phpschool.com/bbs2/inc_view.html?id=11008&code=tnt2&start=0&mode=&field=&search_name=&operator=&period=&category_id=&s_que=

* 사용 방법 - 스타일시트에 미리 정의하는 방법   <style>select{ behavior: url('/inc/selectBox.htc');}<style> - 특정 SelectBox 폼필드에만 적용하는 방법   <select style="behavior: url('/inc/selectBox.htc');"></select>

* 색상 및 화살표 이미지 설정 setColor="일반폰트색상,일반배경색상,롤오버폰트색상,롤오버배경색상,일반보더색상,롤오버보더색상" setImage="/inc/arrow_image.gif" (14*16 이하 사이즈)
<select> (기본형)	1번 항목 2번 항목 3번 항목 4번 항목 5번 항목 6번 항목 7번 항목 8번 항목 9번 항목 10번 항목 11번 항목 12번 항목 13번 항목 14번 항목 15번 항목 1번 항목 1번 항목 2번 항목 3번 항목 4번 항목 5번 항목 6번 항목 7번 항목 8번 항목 9번 항목 10번 항목 11번 항목 12번 항목 13번 항목 14번 항목 15번 항목
<select setColor="#000000,#FFFFFF,#000000,#E6E4E4,#C0C0C0,#000000">	1번 항목 2번 항목 3번 항목 4번 항목 5번 항목 6번 항목 7번 항목 8번 항목 9번 항목 10번 항목 11번 항목 12번 항목 13번 항목 14번 항목 15번 항목 1번 항목 1번 항목 2번 항목 3번 항목 4번 항목 5번 항목 6번 항목 7번 항목 8번 항목 9번 항목 10번 항목 11번 항목 12번 항목 13번 항목 14번 항목 15번 항목
<select setColor="white,red,black,white,blue,yellow">	1번 항목 2번 항목 3번 항목 4번 항목 5번 항목 6번 항목 7번 항목 8번 항목 9번 항목 10번 항목 11번 항목 12번 항목 13번 항목 14번 항목 15번 항목 1번 항목 1번 항목 2번 항목 3번 항목 4번 항목 5번 항목 6번 항목 7번 항목 8번 항목 9번 항목 10번 항목 11번 항목 12번 항목 13번 항목 14번 항목 15번 항목
<select setImage="/inc/arrow_image2.inc">	1번 항목 2번 항목 3번 항목 4번 항목 5번 항목 6번 항목 7번 항목 8번 항목 9번 항목 10번 항목 11번 항목 12번 항목 13번 항목 14번 항목 15번 항목 1번 항목 1번 항목 2번 항목 3번 항목 4번 항목 5번 항목 6번 항목 7번 항목 8번 항목 9번 항목 10번 항목 11번 항목 12번 항목 13번 항목 14번 항목 15번 항목
setColor와 setImage 동시 적용	1번 항목 2번 항목 3번 항목 4번 항목 5번 항목 6번 항목 7번 항목 8번 항목 9번 항목 10번 항목 11번 항목 12번 항목 13번 항목 14번 항목 15번 항목 1번 항목 1번 항목 2번 항목 3번 항목 4번 항목 5번 항목 6번 항목 7번 항목 8번 항목 9번 항목 10번 항목 11번 항목 12번 항목 13번 항목 14번 항목 15번 항목

* SelectBox의 넓이 설정 - style="width:200px" 와 같이 설정 - 별도의 넓이 설정이 없을 경우에는 옵션항목의 길이에 따라 자동 설정
<select style="width:200px" >	스타일을 200px로 설정함 스타일을 200px로 설정함 스타일을 200px로 설정함 스타일을 200px로 설정함 스타일을 200px로 설정함 스타일을 200px로 설정함 스타일을 200px로 설정함 스타일을 200px로 설정함 스타일을 200px로 설정함
자동 설정 ( 옵션 내용이 한글만 )	옵션 텍스트가 한글만 있을 경우 옵션 텍스트가 한글만 있을 경우 옵션 텍스트가 한글만 있을 경우 옵션 텍스트가 한글만 있을 경우 옵션 텍스트가 한글만 있을 경우 옵션 텍스트가 한글만 있을 경우 옵션 텍스트가 한글만 있을 경우 옵션 텍스트가 한글만 있을 경우 옵션 텍스트가 한글만 있을 경우
자동 설정 ( 옵션 내용이 영문만 )	This option text is english... This option text is english... This option text is english... This option text is english... This option text is english... This option text is english... This option text is english... This option text is english... This option text is english...
자동 설정 ( 옵션 내용이 한글 + 영문 + 숫자 )	한글 + English + 1234567890 한글 + English + 1234567890 한글 + English + 1234567890 한글 + English + 1234567890 한글 + English + 1234567890 한글 + English + 1234567890 한글 + English + 1234567890 한글 + English + 1234567890 한글 + English + 1234567890

* 테이블 안에서의 정렬 - 테이블 안에서 셀의 정렬에 따라 자동 적용
왼쪽 정렬	왼쪽 정렬 1번 항목 2번 항목 3번 항목 4번 항목 5번 항목 6번 항목 7번 항목 8번 항목 9번 항목 10번 항목 11번 항목 12번 항목 13번 항목 14번 항목 15번 항목 왼쪽 정렬 왼쪽 정렬 1번 항목 2번 항목 3번 항목 4번 항목 5번 항목 6번 항목 7번 항목 8번 항목 9번 항목 10번 항목 11번 항목 12번 항목 13번 항목 14번 항목 15번 항목
중앙 정렬	중앙 정렬 1번 항목 2번 항목 3번 항목 4번 항목 5번 항목 6번 항목 7번 항목 8번 항목 9번 항목 10번 항목 11번 항목 12번 항목 13번 항목 14번 항목 15번 항목 중앙 정렬 중앙 정렬 1번 항목 2번 항목 3번 항목 4번 항목 5번 항목 6번 항목 7번 항목 8번 항목 9번 항목 10번 항목 11번 항목 12번 항목 13번 항목 14번 항목 15번 항목
오른쪽 정렬	오른쪽 정렬 1번 항목 2번 항목 3번 항목 4번 항목 5번 항목 6번 항목 7번 항목 8번 항목 9번 항목 10번 항목 11번 항목 12번 항목 13번 항목 14번 항목 15번 항목 오른쪽 정렬 오른쪽 정렬 1번 항목 2번 항목 3번 항목 4번 항목 5번 항목 6번 항목 7번 항목 8번 항목 9번 항목 10번 항목 11번 항목 12번 항목 13번 항목 14번 항목 15번 항목

* onChange 이벤트 처리 - 일반적인 SelectBox와 동일하게 처리
<select onChange="alert('선택값 : '+this.options[this.selectedIndex].value)">	1번 항목 2번 항목 3번 항목 4번 항목 5번 항목 6번 항목 7번 항목 8번 항목 9번 항목 10번 항목 11번 항목 12번 항목 13번 항목 14번 항목 15번 항목 1번 항목 1번 항목 2번 항목 3번 항목 4번 항목 5번 항목 6번 항목 7번 항목 8번 항목 9번 항목 10번 항목 11번 항목 12번 항목 13번 항목 14번 항목 15번 항목
<select onChange="location.href=this.options[this.selectedIndex].value;">	:: 검색 사이트로 이동 :: 네이버 엠파스 야후 MyM 다음 :: 검색 사이트로 이동 :: :: 검색 사이트로 이동 :: 네이버 엠파스 야후 MyM 다음

* 스크롤바 및 레이어 위치 테스트 - selectbox의 문서에서의 위치에 따라 항목 레이어를 위로 보여주거나 아래로 보여줌. - 또한 한쪽으로 모두 못 보여줄 경우에는 자동으로 스크롤바가 생성됨. - 기본적으로는 selectbox를 기준으로 아래위의 공간을 비교하여 더 넓은 공간쪽으로 레이어가 생성되나 아래의   공간이 10개 항목이 나올 정도의 높이(204px)가 되면 아래로 나옴 (단, 여백이 204px보다 적을 경우에도 objSelectBox.length < 11 && (objSelectBox.length * 20 + 4) > downSpace 에 의해 항목의 갯수에 비례해 공간이 될 경우에는 아래로 출력됨) (문서를 스크롤하여 아래의 selectbox를 기준으로 아래위의 공간을 조절한 후 메뉴를 클릭하면 알 수 있음)
테스트용 1 (항목이 2개)	1번 항목 2번 항목 1번 항목 1번 항목 2번 항목
테스트용 2 (항목이 5개)	1번 항목 2번 항목 3번 항목 4번 항목 5번 항목 1번 항목 1번 항목 2번 항목 3번 항목 4번 항목 5번 항목
테스트용 3 (항목이 10개)	1번 항목 2번 항목 3번 항목 4번 항목 5번 항목 6번 항목 7번 항목 8번 항목 9번 항목 10번 항목 1번 항목 1번 항목 2번 항목 3번 항목 4번 항목 5번 항목 6번 항목 7번 항목 8번 항목 9번 항목 10번 항목
테스트용 4 (항목이 15개)	1번 항목 2번 항목 3번 항목 4번 항목 5번 항목 6번 항목 7번 항목 8번 항목 9번 항목 10번 항목 11번 항목 12번 항목 13번 항목 14번 항목 15번 항목 1번 항목 1번 항목 2번 항목 3번 항목 4번 항목 5번 항목 6번 항목 7번 항목 8번 항목 9번 항목 10번 항목 11번 항목 12번 항목 13번 항목 14번 항목 15번 항목
테스트용 5 (항목이 100개)	1번 항목 2번 항목 3번 항목 4번 항목 5번 항목 6번 항목 7번 항목 8번 항목 9번 항목 10번 항목 11번 항목 12번 항목 13번 항목 14번 항목 15번 항목 16번 항목 17번 항목 18번 항목 19번 항목 20번 항목 21번 항목 22번 항목 23번 항목 24번 항목 25번 항목 26번 항목 27번 항목 28번 항목 29번 항목 30번 항목 31번 항목 32번 항목 33번 항목 34번 항목 35번 항목 36번 항목 37번 항목 38번 항목 39번 항목 40번 항목 41번 항목 42번 항목 43번 항목 44번 항목 45번 항목 46번 항목 47번 항목 48번 항목 49번 항목 50번 항목 51번 항목 52번 항목 53번 항목 54번 항목 55번 항목 56번 항목 57번 항목 58번 항목 59번 항목 60번 항목 61번 항목 62번 항목 63번 항목 64번 항목 65번 항목 66번 항목 67번 항목 68번 항목 69번 항목 70번 항목 71번 항목 72번 항목 73번 항목 74번 항목 75번 항목 76번 항목 77번 항목 78번 항목 79번 항목 80번 항목 81번 항목 82번 항목 83번 항목 84번 항목 85번 항목 86번 항목 87번 항목 88번 항목 89번 항목 90번 항목 91번 항목 92번 항목 93번 항목 94번 항목 95번 항목 96번 항목 97번 항목 98번 항목 99번 항목 100번 항목 1번 항목 1번 항목 2번 항목 3번 항목 4번 항목 5번 항목 6번 항목 7번 항목 8번 항목 9번 항목 10번 항목 11번 항목 12번 항목 13번 항목 14번 항목 15번 항목 16번 항목 17번 항목 18번 항목 19번 항목 20번 항목 21번 항목 22번 항목 23번 항목 24번 항목 25번 항목 26번 항목 27번 항목 28번 항목 29번 항목 30번 항목 31번 항목 32번 항목 33번 항목 34번 항목 35번 항목 36번 항목 37번 항목 38번 항목 39번 항목 40번 항목 41번 항목 42번 항목 43번 항목 44번 항목 45번 항목 46번 항목 47번 항목 48번 항목 49번 항목 50번 항목 51번 항목 52번 항목 53번 항목 54번 항목 55번 항목 56번 항목 57번 항목 58번 항목 59번 항목 60번 항목 61번 항목 62번 항목 63번 항목 64번 항목 65번 항목 66번 항목 67번 항목 68번 항목 69번 항목 70번 항목 71번 항목 72번 항목 73번 항목 74번 항목 75번 항목 76번 항목 77번 항목 78번 항목 79번 항목 80번 항목 81번 항목 82번 항목 83번 항목 84번 항목 85번 항목 86번 항목 87번 항목 88번 항목 89번 항목 90번 항목 91번 항목 92번 항목 93번 항목 94번 항목 95번 항목 96번 항목 97번 항목 98번 항목 99번 항목 100번 항목

* 개선 및 기능 추가 사항 - 값이 선택되어진 상태에서 휠을 아래 위로 움직일 경우 값을 변경 - 옵션 항목이 많아 스크롤바가 생성되었을 때 휠을 움직여 끝까지 도달한 경우 문서가 스크롤되는 문제 - 아이프레임으로 문서에 속해질 때 레이어의 높이 문제 - 전체를 묶는 태그를 <SPAN> 태그를 사용하여 변환된 셀렉트 박스 하단에 약간의 공백이 생기는 문제