* 스크립트 목적 - 기존의 셀렉트박스를 스타일의 적용이 가능한 레이어 형태(실제로는 테이블과 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();"> | 1번 항목2번 항목3번 항목4번 항목5번 항목6번 항목7번 항목8번 항목9번 항목10번 항목11번 항목12번 항목13번 항목14번 항목15번 항목
|
* 셀렉트박스 동적 변경 처리 | ||||
<INPUT onclick=addItem() type=button value=addItem() name=Submit4> <INPUT onclick=addItem(20) type=button value=addItem(20) name=Submit42 ;> |
<script> |
1번 항목2번 항목3번 항목4번 항목5번 항목6번 항목7번 항목8번 항목9번 항목10번 항목11번 항목12번 항목13번 항목14번 항목15번 항목
| ||
<INPUT onclick=changeItem() type=button value=changeItem() name=Submit3> <INPUT> |
<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> |
1번 항목2번 항목3번 항목4번 항목5번 항목6번 항목7번 항목8번 항목9번 항목10번 항목11번 항목12번 항목13번 항목14번 항목15번 항목
|
* 색상 및 화살표 이미지 설정 setColor="일반폰트색상,일반배경색상,롤오버폰트색상,롤오버배경색상,일반보더색상,롤오버보더색상" setImage="./arrow_image.gif" (14*16 이하 사이즈) | |||
<select> (기본형) | 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번 항목
| ||
<select setColor="white,red,black,white,blue,yellow"> | 1번 항목2번 항목3번 항목4번 항목5번 항목6번 항목7번 항목8번 항목9번 항목10번 항목11번 항목12번 항목13번 항목14번 항목15번 항목
| ||
<select setImage="./arrow_image2.gif"> | 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번 항목
|
* 툴팁 메세지 설정 | |||
<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> |
1번 항목2번 항목3번 항목4번 항목5번 항목6번 항목7번 항목8번 항목9번 항목10번 항목11번 항목12번 항목13번 항목14번 항목15번 항목
|
* 최대 출력 갯수 설정 | |||
<select name="selectbox_count_1" setDisplayCount="5"> | 1번 항목2번 항목3번 항목4번 항목5번 항목6번 항목7번 항목8번 항목9번 항목10번 항목11번 항목12번 항목13번 항목14번 항목15번 항목
| ||
<select name="selectbox_count_2" setDisplayCount="10"> | 1번 항목2번 항목3번 항목4번 항목5번 항목6번 항목7번 항목8번 항목9번 항목10번 항목11번 항목12번 항목13번 항목14번 항목15번 항목
| ||
<select name="selectbox_count_3" setDisplayCount="15"> | 1번 항목2번 항목3번 항목4번 항목5번 항목6번 항목7번 항목8번 항목9번 항목10번 항목11번 항목12번 항목13번 항목14번 항목15번 항목
|
* SelectBox의 넓이 설정 | |||
<select style="width: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...
| ||
자동 설정 ( 옵션 내용이 한글 + 영문 + 숫자 ) | 한글 + 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 이벤트 처리 | |||
<select onChange="alert('선택값 : '+this.options[this.selectedIndex].value)"> | 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다음
|
* 스크롤바 및 레이어 위치 테스트 | |||
테스트용 1 (항목이 2개) | 1번 항목2번 항목
| ||
테스트용 2 (항목이 5개) | 1번 항목2번 항목3번 항목4번 항목5번 항목
| ||
테스트용 3 (항목이 10개) | 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번 항목
| ||
테스트용 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번 항목
|
* 아이프레임 테스트 |
[출처] 웹디황용
"쇼핑몰·홈페이지·오픈마켓
블로그·페이스북·이메일 등의 각종 마케팅 글쓰기, 각종 광고, 영업, 판매, 제안서, 전단지 반응율 3배×10배 이상 높이는 마법의 8단계 공식" |
☞자세히보기 |
|
|