CSS


게시글 '셀렉트박스 -> 레이어 변환 스크립트 HTC 버전'에 대한 정보
셀렉트박스 -> 레이어 변환 스크립트 HTC 버전
등록일 2009-12-28 조회 3,728

일반적인 셀렉트 박스를 이쁜 형태의 레이어로 변환해 주는 스크립트의 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>

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


* 사용 방법
- 스타일시트에 미리 정의하는 방법
  <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번 항목
1번 항목
2번 항목
3번 항목
4번 항목
5번 항목
6번 항목
7번 항목
8번 항목
9번 항목
10번 항목
11번 항목
12번 항목
13번 항목
14번 항목
15번 항목
<select setColor="#000000,#FFFFFF,#000000,#E6E4E4,#C0C0C0,#000000">
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번 항목
1번 항목
2번 항목
3번 항목
4번 항목
5번 항목
6번 항목
7번 항목
8번 항목
9번 항목
10번 항목
11번 항목
12번 항목
13번 항목
14번 항목
15번 항목
<select setImage="/inc/arrow_image2.inc">
1번 항목
1번 항목
2번 항목
3번 항목
4번 항목
5번 항목
6번 항목
7번 항목
8번 항목
9번 항목
10번 항목
11번 항목
12번 항목
13번 항목
14번 항목
15번 항목
setColor와 setImage 동시 적용
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로 설정함
자동 설정 ( 옵션 내용이 한글만 )
옵션 텍스트가 한글만 있을 경우
옵션 텍스트가 한글만 있을 경우
옵션 텍스트가 한글만 있을 경우
옵션 텍스트가 한글만 있을 경우
옵션 텍스트가 한글만 있을 경우
자동 설정 ( 옵션 내용이 영문만 )
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