강의 컨설팅 트레이닝 무료진단 무료책자 마케팅편지 마케팅정보공유 다이어리 서비스제휴 고객센터

스타일이 적용된 selectbox 컨트롤
작성자 : 99 단국강토
등록날짜 : 2008.12.30 17:12
3,855
* 스크립트 목적
  - 기존의 셀렉트박스를 스타일의 적용이 가능한 레이어 형태(실제로는 테이블과 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 등의 키를 누르면 포커스를 가진 셀렉트박스의 값을 변경 함
  - 동적 처리 -> <INPUT> <INPUT>

<body onLoad="document.getElementById('selectbox_focus').focus();"> 1번 항목2번 항목3번 항목4번 항목5번 항목6번 항목7번 항목8번 항목9번 항목10번 항목11번 항목12번 항목13번 항목14번 항목15번 항목
5번 항목 arrow_image2.gif

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

<INPUT onclick=addItem() type=button value=addItem() name=Submit4>

<INPUT onclick=addItem(20) type=button value=addItem(20) name=Submit42 ;>

<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>

1번 항목2번 항목3번 항목4번 항목5번 항목6번 항목7번 항목8번 항목9번 항목10번 항목11번 항목12번 항목13번 항목14번 항목15번 항목
1번 항목 arrow_image2.gif

<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번 항목
4번 항목 arrow_image2.gif

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

* 툴팁 메세지 설정
  - 셀렉트박스 및 옵션 항목에 툴팁 메세지를 설정하는 것이 가능 함
  - 셀렉트박스 태그 및 옵션 항목 태그에 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>
1번 항목2번 항목3번 항목4번 항목5번 항목6번 항목7번 항목8번 항목9번 항목10번 항목11번 항목12번 항목13번 항목14번 항목15번 항목
1번 항목 arrow_image2.gif

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

<select name="selectbox_count_1" setDisplayCount="5"> 1번 항목2번 항목3번 항목4번 항목5번 항목6번 항목7번 항목8번 항목9번 항목10번 항목11번 항목12번 항목13번 항목14번 항목15번 항목
1번 항목 arrow_image2.gif
<select name="selectbox_count_2" setDisplayCount="10"> 1번 항목2번 항목3번 항목4번 항목5번 항목6번 항목7번 항목8번 항목9번 항목10번 항목11번 항목12번 항목13번 항목14번 항목15번 항목
1번 항목 arrow_image2.gif
<select name="selectbox_count_3" setDisplayCount="15"> 1번 항목2번 항목3번 항목4번 항목5번 항목6번 항목7번 항목8번 항목9번 항목10번 항목11번 항목12번 항목13번 항목14번 항목15번 항목
1번 항목 arrow_image2.gif

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

<select style="width:200px" > 스타일을 200px로 설정함스타일을 200px로 설정함스타일을 200px로 설정함스타일을 200px로 설정함
스타일을 200px로 설정함 arrow_image2.gif
자동 설정 ( 옵션 내용이 한글만 ) 옵션 텍스트가 한글만 있을 경우옵션 텍스트가 한글만 있을 경우옵션 텍스트가 한글만 있을 경우옵션 텍스트가 한글만 있을 경우
옵션 텍스트가 한글만 있을 경우 arrow_image2.gif
자동 설정 ( 옵션 내용이 영문만 ) 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... arrow_image2.gif
자동 설정 ( 옵션 내용이 한글 + 영문 + 숫자 ) 한글 + English + 1234567890한글 + English + 1234567890한글 + English + 1234567890한글 + English + 1234567890
한글 + English + 1234567890 arrow_image2.gif

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

왼쪽 정렬 왼쪽 정렬1번 항목2번 항목3번 항목4번 항목5번 항목6번 항목7번 항목8번 항목9번 항목10번 항목11번 항목12번 항목13번 항목14번 항목15번 항목
왼쪽 정렬 arrow_image2.gif
중앙 정렬 중앙 정렬1번 항목2번 항목3번 항목4번 항목5번 항목6번 항목7번 항목8번 항목9번 항목10번 항목11번 항목12번 항목13번 항목14번 항목15번 항목
중앙 정렬 arrow_image2.gif
오른쪽 정렬 오른쪽 정렬1번 항목2번 항목3번 항목4번 항목5번 항목6번 항목7번 항목8번 항목9번 항목10번 항목11번 항목12번 항목13번 항목14번 항목15번 항목
오른쪽 정렬 arrow_image2.gif

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

<select onChange="alert('선택값 : '+this.options[this.selectedIndex].value)"> 1번 항목2번 항목3번 항목4번 항목5번 항목6번 항목7번 항목8번 항목9번 항목10번 항목11번 항목12번 항목13번 항목14번 항목15번 항목
1번 항목 arrow_image2.gif
<select onChange="location.href=this.options[this.selectedIndex].value;"> :: 검색 사이트로 이동 ::네이버엠파스야후MyM다음
:: 검색 사이트로 이동 :: arrow_image2.gif

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

테스트용 1 (항목이 2개) 1번 항목2번 항목
1번 항목 arrow_image2.gif
테스트용 2 (항목이 5개) 1번 항목2번 항목3번 항목4번 항목5번 항목
1번 항목 arrow_image2.gif
테스트용 3 (항목이 10개) 1번 항목2번 항목3번 항목4번 항목5번 항목6번 항목7번 항목8번 항목9번 항목10번 항목
1번 항목 arrow_image2.gif
테스트용 4 (항목이 15개) 1번 항목2번 항목3번 항목4번 항목5번 항목6번 항목7번 항목8번 항목9번 항목10번 항목11번 항목12번 항목13번 항목14번 항목15번 항목
1번 항목 arrow_image2.gif
테스트용 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번 항목
1번 항목 arrow_image2.gif

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

[출처] 웹디황용

"쇼핑몰·홈페이지·오픈마켓
블로그·페이스북·이메일 등의 각종 마케팅 글쓰기,
각종 광고, 영업, 판매, 제안서, 전단지
반응율 3배×10배 이상 높이는 마법의 8단계 공식"
자세히보기

Comments

번호 제목 글쓴이 날짜 조회
3165 TextArea 박스 내부에 밑줄이미지 삽입 99 단국강토 02.16 3870
3164 unix grep 명령어 사용법2번째 13 김영철 01.29 3864
3163 윈도우XP 풍선도움말 없애기 13 김영철 01.29 3858
열람중 스타일이 적용된 selectbox 컨트롤 99 단국강토 12.30 3856
3161 [컴퓨터 키보드, 특수문자 정식 명칭들] M 최고의하루 12.18 3854
3160 MS outlook 2007 백업 프로그램입니다. 2 coruscate 09.14 3850
3159 알아두면 좋은 포토샵 단축키 총모음 M 최고의하루 12.19 3830
3158 history.back() 시 폼데이터 유지하기 13 김영철 01.15 3822
3157 원격데스크톱 연결 (원격제어) M 최고의하루 12.19 3816
3156 swf파일을 fla 파일로 변환하기 M 최고의하루 02.04 3814
3155 [펌] 제11강 - ADO(Active Database Object) - Database Access Component Cobol vs C#-1 M 최고의하루 12.23 3806
3154 rsync 미러링을 통한 백업기법 13 김영철 01.29 3804
3153 체크박스 배열을 edit 수정페이지로 불러오기 M 최고의하루 01.12 3804
3152 이것은 AI파일 미리보기입니다. 댓글2 M 최고의하루 01.15 3804
3151 미디어 컨트롤 소스 M 최고의하루 12.24 3790
3150 [MSSQL] 그룹별 상위 n명 가져오기 예제 13 김영철 01.23 3790
3149 체크박스 트리메뉴 99 단국강토 02.03 3789
3148 ps 명령어 사용법 13 김영철 01.29 3780
3147 제약조건(1) M 최고의하루 12.20 3775
3146 자신의 아이큐 알아보기 댓글1 17 미니 04.27 3775
3145 웹프로그래밍 언어별 데이터베이스연결 (ASP편) 13 김영철 01.23 3770
3144 pcre 문법, preg | 13 김영철 01.13 3765
3143 PUTTY Telnet , SSH 접속 프로그램 99 단국강토 01.06 3760
3142 [Gmail] CSV 파일 Outlook에 적용하기 M 최고의하루 12.20 3758
3141 PDF 암호를 깨버리자 (APDFPRP) M 최고의하루 12.04 3745
3140 출력물로 판단하는 토너 카트리지 이상 증상 2 coruscate 09.14 3743
3139 contentEditable 속성 99 단국강토 02.09 3736
3138 DBA라면 이 정도는 알고 있어야 하지 않을까요 !!! 13 김영철 01.23 3728
3137 ServerXMLHTTP의 인코딩 문제 13 김영철 01.29 3726
3136 MSSQL에서 문자로 된 날짜 시간 차이값 얻기 13 김영철 01.24 3708
마케팅
특별 마케팅자료
다운로드 마케팅자료
창업,경영
기획,카피,상품전략
동기부여,성취