[HTC] 셀렉트 박스 -> 레이어 자동 변환 스크립트 > script

* 사용 방법
  - 스타일시트에 미리 정의하는 방법
  <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 등의 키를 누르면 포커스를 가진 셀렉트박스의 값을 변경 함
  - 동적 처리 ->

* 셀렉트박스 동적 변경 처리
  - 셀렉트박스의 항목을 동적으로 변경할 경우 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>

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

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

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

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

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

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

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