웹&컴퓨팅

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

x2chi 2007. 10. 17. 14:55
반응형

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

* 테이블 안에서의 정렬
- 테이블 안에서 셀의 정렬에 따라 자동 적용

왼쪽 정렬
왼쪽 정렬
왼쪽 정렬
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번 항목
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
다음

* 스크롤바 및 레이어 위치 테스트
- selectbox의 문서에서의 위치에 따라 항목 레이어를 위로 보여주거나 아래로 보여줌.
- 또한 한쪽으로 모두 못 보여줄 경우에는 자동으로 스크롤바가 생성됨.
- 기본적으로는 selectbox를 기준으로 아래위의 공간을 비교하여 더 넓은 공간쪽으로 레이어가 생성되나 아래의
  공간이 10개 항목이 나올 정도의 높이(204px)가 되면 아래로 나옴

(단, 여백이 204px보다 적을 경우에도 objSelectBox.length < 11 && (objSelectBox.length * 20 + 4) > downSpace 에
의해 항목의 갯수에 비례해 공간이 될 경우에는 아래로 출력됨)
(문서를 스크롤하여 아래의 selectbox를 기준으로 아래위의 공간을 조절한 후 메뉴를 클릭하면 알 수 있음)

테스트용 1 (항목이 2개)
1번 항목
1번 항목
2번 항목
테스트용 2 (항목이 5개)
1번 항목
1번 항목
2번 항목
3번 항목
4번 항목
5번 항목
테스트용 3 (항목이 10개)
1번 항목
1번 항목
2번 항목
3번 항목
4번 항목
5번 항목
6번 항목
7번 항목
8번 항목
9번 항목
10번 항목
테스트용 4 (항목이 15개)
1번 항목
1번 항목
2번 항목
3번 항목
4번 항목
5번 항목
6번 항목
7번 항목
8번 항목
9번 항목
10번 항목
11번 항목
12번 항목
13번 항목
14번 항목
15번 항목
테스트용 5 (항목이 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> 태그를 사용하여 변환된 셀렉트 박스 하단에 약간의 공백이 생기는 문제




반응형

'웹&컴퓨팅' 카테고리의 다른 글

리눅스 네트워크 설정하기  (4) 2007.10.19
이전 페이지 주소 정보 확인  (1) 2007.10.19
검색엔진최적화(SEO) - 메타태그(META TAG)의 속성정리  (0) 2007.10.12
php 파일 업, 다운로드 php  (5) 2007.10.11
meta  (0) 2007.10.11