HTC(HTML Component)
invalid-file
select tag 개체를 변경시켜 주는 script
Javascript와 HTC
javascript 는 Netscape사에서 만든 것이고 HTC(HTML Component)는 Microsoft사에서 개발한 JScript 입니다. 둘다 ECMA-262(ECMAScript)를 구현한 것이라서 비슷한 문법구조를 갖고 있으면서도 점점 더 차별성을 두고 발전하고 있습니다. Internet Explorer 는 javascript를 작성하여도 jscript 로 생각합니다. 쉽게 말하면 구현회사만 다른 javascript이고, 서로 다른 script라는 겁니다.
HTC를 이용한 Select tag 제어
보통 CSS를 통해서 버튼의 외관을 제어를 하지만 마우스가 roll over되었을때와 out되었을때, 버튼의 외관을 바꿀경우는 CSS만으로는 제어가 거의 불가능하다.
<input name="butDelete" onclick="fncDelete();" type="button" class="button_default" onMouseOver="this.style.color='#A92967';" onMouseOut="this.style.color='#000000'" value="삭제">
와 같이 별도의 onMouseOver, onMouseOut을 통해서 각각 제어를 해야하는데, HTC를 통해서 제어를 할경우 이벤트까지 지정을 할수가 있다.
먼저 CSS의 정의이다.
-------------------------------------------------
button.css의 내용
-------------------------------------------------
.button_active{
cursor:hand;
font-family: "Verdana", "돋움";font-weight:none; font-size:11px; color:#000000;
height:22px; margin:0px; background:#EBEBEB;
border-width: 1px;border-style: solid; border-color: #CCCCCC #B6B6B6 #B6B6B6 #CCCCCC;
behavior:url("/sys/htc/activeButton.htc");
}
기본적으로 버튼의 넓이는 지정하지 않었다. 이부분은 htc에서 담당하도록 했다. value의 값에 따라 적절한 넓이를 세팅하기 위해서이다.
---------------------------------------------------------
activeButton.htc의 내용
---------------------------------------------------------
<PUBLIC:COMPONENT lightWeight="true">
<PUBLIC:ATTACH EVENT="oncontentready" for="element" ONEVENT="init();">
<PUBLIC:ATTACH EVENT="onmouseover" for="element" ONEVENT="overButton()" />
<PUBLIC:ATTACH EVENT="onmouseout" for="element" ONEVENT="outButton()" />
<PUBLIC:ATTACH EVENT="onfocus" ONEVENT="linkFocus()" />
<PUBLIC:PROPERTY NAME="width">
<PUBLIC:METHOD name="setWidth" />
<SCRIPT LANGUAGE="JavaScript">
function init(){
if(element.width != null || element.width != ""){
element.runtimeStyle.width = element.width;
}
}
// 마우스가 roll over 되었을때
function overButton(){
element.runtimeStyle.color = "#A92967";
element.runtimeStyle.backgroundColor = "#EEE8AA";
}
// 마우스가 roll out 되었을때
function outButton(){
element.runtimeStyle.color = "#000000";
element.runtimeStyle.backgroundColor = "#EBEBEB";
}
// 버튼 객체의 포커스를 빼준다.
function linkFocus(){
window.event.srcElement.blur()
}
function setWidth(newWidth){
element.runtimeStyle.width = newWidth;
}
</SCRIPT>
</PUBLIC:COMPONENT>
Event 설명
oncontentready - HTC가 적용된 HTML태그 자체가 파싱된 직후에 발생
ondocumentready - HTML 문서 전체가 모두 파싱된 후 발생
------------------------------------------------
적용한 jsp
------------------------------------------------
<%@ page contentType="text/html;charset=EUC-KR" %>
<html>
<head>
<link HREF="/sys/button.css" REL="STYLESHEET" TYPE="TEXT/CSS">
<title>HTC를 이용한 버튼제어</title>
<script language="JavaScript">
function settingWidth(newWidth){
frm.butAppr.setWidth(newWidth);
}
</script>
</head>
<body>
<form name="frm">
<input name="butAppr" type="button" width="" class="button_active" value="HTC를 이용한 버튼제어">
<p>
<input name="butAppr2" type="button" onclick="settingWidth(400);" class="button_active" value="500px로 변경">
</form>
</body>
</html>
width라는 프로퍼티를 정의하여 버튼의 넓이 값을 가져와 ondocumentready 발생시 버튼의 넓이를 세팅해준다.
input객체에 width라는 프로퍼티가 존재하지만 버튼은 실제 값을 대입해도 해당 크기로 세팅되지 않는다. 그래서 width라는 프로퍼티를 재정의 하여 htc에서 받어 css를 통해 값을 대입한다. HTC를 사용함으로써 단지 class만 지정 하여 onMouseOver, onMouseOut의 이벤트를 공통적으로 제어한다.
그만큼 소스가 간결해지고 HTC만 변동해주면 전체의 버튼이 바꿔지게 된다.
width property를 지정하지 않을 경우 여백이 많다.
width=140으로 지정했을 경우 버튼의 폭을 조절할 수 있다.
mouse가 rollup 되었을 경우
HTC를 이용한 select tag 제어
기존의 셀렉트박스를 스타일의 적용이 가능한 레이어 형태(실제로는 테이블과 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 등의 키를 누르면 포커스를 가진 셀렉트박스의 값을 변경 함
- 동적 처리
동적 변경 처리
- 셀렉트박스의 항목을 동적으로 변경할 경우 reInitializeSelectBox() 메소드를 이용하여 재변환 가능
- 셀렉트박스의 항목을 동적으로 추가 및 삭제할 경우 변환된 셀렉트박스를 제거 후 다시 변환함
<script>document.getElementById("SelectBox_Name").reInitializeSelectBox();</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>
<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 이하 사이즈)
| 1번 항목 |  |
| 1번 항목 | |
| 1번 항목 | |
| 1번 항목 |  |
| 1번 항목 | |
툴팁 메세지 설정
셀렉트박스 및 옵션 항목에 툴팁 메세지를 설정하는 것이 가능 함
셀렉트박스 태그 및 옵션 항목 태그에 tooltip="툴팁 메세지" 와 같이 프로퍼티 추가
| 1번 항목 | |
<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>
최대 출력 갯수 설정
옵션 항목 창에 출력될 항목의 갯수를 설정 가능
setDisplayCount="출력될 갯수" 를 이용하여 설정
| 1번 항목 | |
| 1번 항목 | |
| 1번 항목 | |
넓이 설정
style="width:200px" 와 같이 설정 가능
별도의 넓이 설정이 없을 경우에는 변환 전의 셀렉트박스의 넓이 값(this.style.offsetWidth)으로 설정 함(offsetWidth 값을 못 읽을 경우 이전 버전에서 사용하던 문자열의 넓이를 픽셀로 구하는 함수 이용)
| 스타일을 200px로 설정함 | |
| 옵션 텍스트가 한글만 있을 경우 | |
| This option text is english... | |
| 한글 + English + 1234567890 | |
정렬
테이블 안에서 셀의 정렬에 따라 자동 적용
| 왼쪽 정렬 |
| ||
| 중앙 정렬 |
| ||
| 오른쪽 정렬 |
|
onChange 이벤트 처리
일반적인 SelectBox와 동일하게 처리
| 1번 항목 | |
| :: 검색 사이트로 이동 :: | |
Scrollbar 및 layer 위치 test
셀렉트박스의 문서에서의 위치에 따라 옵션 항목 창을 위로 보여주거나 아래로 보여줌.
또한 한쪽으로 모두 못 보여줄 경우에는 자동으로 스크롤바가 생성됨.
기본적으로는 셀렉트박스를 기준으로 아래위의 공간을 비교하여 더 넓은 공간쪽으로 옵션 항목 창이 출력되나 공간이 10개 항목이 나올 정도의 높이(204px)가 되면 아래로 나옴
단, 하단 여백이 204px보다 적을 경우에도 하던 여백과 항목의 갯수에 비례해 공간이 될 경우에는 아래로 출력됨
문서를 스크롤하여 아래의 셀렉트박스를 기준으로 아래위의 공간을 조절한 후 셀렉트박스를 클릭하면 알 수 있음
| 1번 항목 | |
| 1번 항목 | |
| 1번 항목 | |
| 1번 항목 | |
| 1번 항목 | |
iframe test
아이프레임 또는 프레임 안에 셀렉트박스가 있을 경우 옵션 항목 창이 아이프레임 및 프레임을 넘어서 정상적으로 출력 가능함