03.HTML 4.X, HTML5, XML.../HTML/Css/Script2008. 9. 3. 23:55

셀렉트박스 모든것...

반응형
 스크립트 목적
  - 기존의 셀렉트박스를 스타일의 적용이 가능한 레이어 형태(실제로는 테이블과 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 이상에서만 변환)
  - 옵션 항목 창 출력시 일시적으로 문서가 길어져 스크롤바가 출력되는 일이 없음

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


* 셀렉트박스 포커스 처리
  - 일반적인 SelectBox와 동일하게 처리 -> <script> document.getElementById('selectbox').focus();</script>
  - 셀렉트박스가 포커스를 가진 상황에서 휠을 움직이거나 Home, End, Page Up, Page Down,
    Up Arrow, Down Arrow 등의 키를 누르면 포커스를 가진 셀렉트박스의 값을 변경 함
  - 동적 처리 ->

<body onLoad="document.getElementById('selectbox_focus').focus();">
1번 항목

* 셀렉트박스 동적 변경 처리
  - 셀렉트박스의 항목을 동적으로 변경할 경우 reInitializeSelectBox() 메소드를 이용하여 재변환 가능
  - 셀렉트박스의 항목을 동적으로 추가 및 삭제할 경우 변환된 셀렉트박스를 제거 후 다시 변환함
    <script>document.getElementById("SelectBox_Name").reInitializeSelectBox();</script>

<script>
function addItem(selected_index){
  var objSB = document.getElementById("selectbox_dc_1");
  for(i=0; i<10; i++){
    objNewOption = new Option();
    objNewOption.text = "추가된 "+i+"번째 항목";
    objSB.add(objNewOption,objSB.length);
  }
  if(selected_index) objSB.selectedIndex = selected_index;
  objSB.reInitializeSelectBox();
}
</script>

2번 항목

<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>
2번 항목

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

* 툴팁 메세지 설정
  - 셀렉트박스 및 옵션 항목에 툴팁 메세지를 설정하는 것이 가능 함
  - 셀렉트박스 태그 및 옵션 항목 태그에 tooltip="툴팁 메세지" 와 같이 프로퍼티 추가

    <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>
3번 항목

* 최대 출력 갯수 설정
  - 옵션 항목 창에 출력될 항목의 갯수를 설정 가능
  - setDisplayCount="출력될 갯수" 를 이용하여 설정

<select name="selectbox_count_1" setDisplayCount="5">
1번 항목
<select name="selectbox_count_2" setDisplayCount="10">
10번 항목
<select name="selectbox_count_3" setDisplayCount="15">
1번 항목

* SelectBox의 넓이 설정
  - style="width:200px" 와 같이 설정 가능
  - 별도의 넓이 설정이 없을 경우에는 변환 전의 셀렉트박스의 넓이 값(this.style.offsetWidth)으로 설정 함
    (offsetWidth 값을 못 읽을 경우 이전 버전에서 사용하던 문자열의 넓이를 픽셀로 구하는 함수 이용)

<select style="width:200px" >
스타일을 200px로 설정함
자동 설정 ( 옵션 내용이 한글만 )
옵션 텍스트가 한글만 있을 경우
자동 설정 ( 옵션 내용이 영문만 )
This option text is english...
자동 설정 ( 옵션 내용이 한글 + 영문 + 숫자 )
한글 + English + 1234567890

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

왼쪽 정렬
왼쪽 정렬
중앙 정렬
중앙 정렬
오른쪽 정렬
오른쪽 정렬

* onChange 이벤트 처리
  - 일반적인 SelectBox와 동일하게 처리

<select onChange="alert('선택값 : '+this.options[this.selectedIndex].value)">
1번 항목
<select onChange="location.href=this.options[this.selectedIndex].value;">
:: 검색 사이트로 이동 ::

* 스크롤바 및 레이어 위치 테스트
  - 셀렉트박스의 문서에서의 위치에 따라 옵션 항목 창을 위로 보여주거나 아래로 보여줌.
  - 또한 한쪽으로 모두 못 보여줄 경우에는 자동으로 스크롤바가 생성됨.
  - 기본적으로는 셀렉트박스를 기준으로 아래위의 공간을 비교하여 더 넓은 공간쪽으로 옵션 항목 창이 출력되나
    공간이 10개 항목이 나올 정도의 높이(204px)가 되면 아래로 나옴
  - 단, 하단 여백이 204px보다 적을 경우에도 하던 여백과 항목의 갯수에 비례해 공간이 될 경우에는 아래로 출력됨
  - 문서를 스크롤하여 아래의 셀렉트박스를 기준으로 아래위의 공간을 조절한 후 셀렉트박스를 클릭하면 알 수 있음

테스트용 1 (항목이 2개)
1번 항목
테스트용 2 (항목이 5개)
1번 항목
테스트용 3 (항목이 10개)
1번 항목
테스트용 4 (항목이 15개)
1번 항목
테스트용 5 (항목이 100개)
1번 항목

* 아이프레임 테스트
  - 아이프레임 또는 프레임 안에 셀렉트박스가 있을 경우 옵션 항목 창이 아이프레임 및 프레임을 넘어서 정상적으로
   출력 가능함



Posted by 1010

티스토리툴바