| * 스크립트 목적 - 기존의 셀렉트박스를 스타일의 적용이 가능한 레이어 형태(실제로는 테이블과 Popup Object)로 자동 변환 * 주요 기능 및 특징 - 기존 셀렉트박스 태그의 수정 없이 스타일 시트에 정의하는 것만으로 모든 셀렉트박스 변환 가능 - 셀렉트박스를 기준으로 아래위의 여백을 비교하여 옵션 항목 창의 출력 방향 결정 - 기존 셀렉트박스처럼 변환된 셀렉트박스도 포커스를 가질 수 있음 <script>document.getElementById('SelectBox_Name').focus();</script> - 변환된 셀렉트박스가 포커스를 가지고 있을 경우 휠을 움직이거나 키보드의 Home, End, Page Up, Page Down, Up Arrow, Down Arrow 등을 누름에 따라 값의 변경이 가능 또한 열려진 옵션 항목 창에서도 가능함 - 위의 이벤트 시에 문서의 스크롤을 제어하여 문서의 움직임이 없음 - 아이프레임 및 프레임에 삽입된 상황에서도 프레임에 영향을 받지 않고 정상적으로 출력 (Layer가 아닌 Popup Object를 이용) - 셀렉트박스의 항목이 동적으로 변경할 경우를 위한 메소드 제공 <script>document.getElementById("SelectBox_Name").reInitializeSelectBox();</script> - 옵션 항목 창에 출력될 항목의 갯수를 지정(setDisplayCount() 메소드 이용)할 수 있으며 항목이 출력될 갯수보다 많을 경우 자동으로 스크롤바 생성 (기본값은 10) - 셀렉트박스 및 옵션 항목에 대해 툴팁 메세지 설정 가능 - 특정 셀렉트박스의 색상 및 화살표 이미지 변경 가능 - 변환된 레이어를 텍스트처럼 취급 (연속적인 출력이 가능, 하단 여백 없음) - HTC 가 지원되는 브라우져에서만 변환 (HTC는 5.0 이상에서 가능하나 createPopup() 메소드가 5.5부터 지원되어 IE 5.5 이상에서만 변환) - 옵션 항목 창 출력시 일시적으로 문서가 길어져 스크롤바가 출력되는 일이 없음 |
|
* 사용 방법 |
|
* 셀렉트박스 포커스 처리 | |||
| <body onLoad="document.getElementById('selectbox_focus').focus();"> |
| ||
|
* 셀렉트박스 동적 변경 처리 | ||||
|
|
<script> |
| ||
|
|
<script> function changeItem(selected_index){ var objSB = document.getElementById("selectbox_dc_2"); for(i=0; i<10; i++){ objSB.add = new Option("변경된 "+i+"번째 항목",i); } if(selected_index) objSB.selectedIndex = selected_index; objSB.reInitializeSelectBox(); } </script> |
| ||
| * 색상 및 화살표 이미지 설정 setColor="일반폰트색상,일반배경색상,롤오버폰트색상,롤오버배경색상,일반보더색상,롤오버보더색상" setImage="./arrow_image.gif" (14*16 이하 사이즈) | |||
| <select> (기본형) |
| ||
| <select setColor="#000000,#FFFFFF,#000000,#E6E4E4,#C0C0C0,#000000"> |
| ||
| <select setColor="white,red,black,white,blue,yellow"> |
| ||
| <select setImage="./arrow_image2.gif"> |
| ||
| setColor와 setImage 동시 적용 |
| ||
|
* 툴팁 메세지 설정 | |||
| <select name='selectbox_tooltip' tooltip='필수 항목이니 꼭 선택하세요'> <option value='1' tooltip='첫번째 항목'>1번 항목</option> <option value='2' tooltip='두번째 항목'>2번 항목</option> <option value='3' tooltip='세번째 항목'>3번 항목</option> <option value='4' tooltip='네번째 항목'>4번 항목</option> <option value='5' tooltip='다섯번째 항목'>5번 항목</option> </select> |
| ||
|
* 최대 출력 갯수 설정 | |||
| <select name="selectbox_count_1" setDisplayCount="5"> |
| ||
| <select name="selectbox_count_2" setDisplayCount="10"> |
| ||
| <select name="selectbox_count_3" setDisplayCount="15"> |
| ||
|
* SelectBox의 넓이 설정 | |||
| <select style="width:200px" > |
| ||
| 자동 설정 ( 옵션 내용이 한글만 ) |
| ||
| 자동 설정 ( 옵션 내용이 영문만 ) |
| ||
| 자동 설정 ( 옵션 내용이 한글 + 영문 + 숫자 ) |
| ||
|
* 테이블 안에서의 정렬 | |||
| 왼쪽 정렬 |
| ||
| 중앙 정렬 |
| ||
| 오른쪽 정렬 |
| ||
|
* onChange 이벤트 처리 | |||
| <select onChange="alert('선택값 : '+this.options[this.selectedIndex].value)"> |
| ||
| <select onChange="location.href=this.options[this.selectedIndex].value;"> |
| ||
|
* 스크롤바 및 레이어 위치 테스트 | |||
| 테스트용 1 (항목이 2개) |
| ||
| 테스트용 2 (항목이 5개) |
| ||
| 테스트용 3 (항목이 10개) |
| ||
| 테스트용 4 (항목이 15개) |
| ||
| 테스트용 5 (항목이 100개) |
| ||
"HTML & CSS" 카테고리의 다른 글
[2008/07/15] DOCTYPE HTML PUBLIC 선언 [2008/10/21] HTML 특수문자표, ( 숫자표현,문자표현 ) 코드표 [2007/11/03] 테이블 테두리 [2007/11/03] 스타일 시트(Style Sheets) [2007/11/03] border-collapse: collapse [2008/06/27] IE 계열의 CSS 다중선택자 버그에 대해 [2008/10/08] 원하는 위치에 배경 고정 시키기 [2007/11/03] Mouse Event
(0) 
(0)
댓글을 달아 주세요