[HTC] 스핀버튼 컨트럴
컨텐츠 정보
- 19,649 조회
- 8 추천
- 목록
본문
쇼핑몰 카트 만들다가 값 증감시키는 버튼을 매번 만들려면 디쟈이너들이 템플릿 작업하기에도 문제가 있을꺼같아 htc로 하나 만들어봤습니다.
htc를 사용하는 여러 방법중에 css를 이용하는 방법을 선택했습니다.
<style>
.spinbtn {
behavior:url(/js/spinbtn.htc);
}
</style>
사용하기 전에 위와같이 정의하시면 로드와함께 클래스이름에 행동자(behavior)가 달라붙습니다.
그다음 스핀버튼을 사용하고자 하는 input 태그에 spinbtn 이라는 클래스 이름을 주면 끝입니다.
<input type="text" size="2" class="spinbtn">
그 외에 사용할 수 있는 속성에는
maxvalue와 step 이 있습니다.
잘 아실꺼라 믿고, 예제 보시면 이해 갈껍니다.
-----------------------------------------------
<pre>
<!doctype html public "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>스핀버튼</title>
</head>
<body>
<style>
.spinbtn {
behavior:url(/js/spinbtn.htc);
}
</style>
<form>
기본 스핀버튼: <input type="text" size="2" class="spinbtn"><br>
값이 미리정해짐: <input type="text" size="2" value="10" class="spinbtn"><br>
3씩 증감: <input type="text" size="2" class="spinbtn" step="3"><br>
최대값 5: <input type="text" size="2" class="spinbtn" maxvalue="5"><br>
</form>
</body>
</html>
</pre>
htc를 사용하는 여러 방법중에 css를 이용하는 방법을 선택했습니다.
<style>
.spinbtn {
behavior:url(/js/spinbtn.htc);
}
</style>
사용하기 전에 위와같이 정의하시면 로드와함께 클래스이름에 행동자(behavior)가 달라붙습니다.
그다음 스핀버튼을 사용하고자 하는 input 태그에 spinbtn 이라는 클래스 이름을 주면 끝입니다.
<input type="text" size="2" class="spinbtn">
그 외에 사용할 수 있는 속성에는
maxvalue와 step 이 있습니다.
잘 아실꺼라 믿고, 예제 보시면 이해 갈껍니다.
-----------------------------------------------
<pre>
<!doctype html public "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>스핀버튼</title>
</head>
<body>
<style>
.spinbtn {
behavior:url(/js/spinbtn.htc);
}
</style>
<form>
기본 스핀버튼: <input type="text" size="2" class="spinbtn"><br>
값이 미리정해짐: <input type="text" size="2" value="10" class="spinbtn"><br>
3씩 증감: <input type="text" size="2" class="spinbtn" step="3"><br>
최대값 5: <input type="text" size="2" class="spinbtn" maxvalue="5"><br>
</form>
</body>
</html>
</pre>
관련자료
-
링크
-
첨부등록일 2003.08.13 11:54
댓글 0
등록된 댓글이 없습니다.
