-
Javascript HTC에 대해서...스크렙프로그램/JavaScript 2007. 11. 9. 14:41
http://blog.naver.com/pluggers/150004379783 보통 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의 내용
---------------------------------------------------------
<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>Event
oncontentready - HTC가 적용된 HTML태그 자체가 파싱된 직후에 발생
ondocumentready - HTML 문서 전체가 모두 파싱된 후 발생width라는 프로퍼티를 정의하여 버튼의 넓이 값을 가져와 ondocumentready 발생시 버튼의 넓이를 세팅해준다.
------------------------------------------------
적용한 jsp
------------------------------------------------
<%@ page contentType="text/html;charset=EUC-KR" %>
<html>
<link HREF="/sys/button.css" REL="STYLESHEET" TYPE="TEXT/CSS">
<script language="JavaScript">
function settingWidth(newWidth){
frm.butAppr.setWidth(newWidth);
}
</script><body>
<form name="frm">
<input name="butAppr" type="button" width="" class="button_active" value="HTC를 이용한 버튼제어">
<input name="butAppr2" type="button" onclick="settingWidth(400);" class="button_active" value="500px로 변경">
</form>
</body>
</html>input객체에 width라는 프로퍼티가 존재하지만 버튼은 실제 값을 대입해도 해당 크기로 세팅되지 않는다. 그래서 width라는 프로퍼티를 재정의 하여 htc에서 받어 css를 통해 값을 대입한다. HTC를 사용함으로써 단지 class만 지정 하여 onMouseOver, onMouseOut의 이벤트를 공통적으로 제어한다.
그만큼 소스가 간결해지고 HTC만 변동해주면 전체의 버튼이 바꿔지게 된다.
width 프로퍼티를 지정하지 않을경우 여백이 많다.
width=140으로 지정했을경우 -> 버튼의 폭을 조절할수있다.
마우스가 롤업 되었을경우
'프로그램 > JavaScript' 카테고리의 다른 글
Javascript 새창 띄우기를 다음과 같이도 한다. (0) 2007.12.03 location.href와 loaction.replace 차이점 (0) 2007.11.29 break 문장과 continue 문장 사용 (0) 2007.11.12 for 문..in (0) 2007.11.12 조건식 ? x : y (0) 2007.11.12 Javascript에서 if 문 내의 continue 문...처음 봐서리... (1) 2007.11.09 Javascript 내장객체 String (0) 2007.11.07