Html & Script

[HTC] 스핀버튼 컨트럴

페이지 정보

본문

쇼핑몰 카트 만들다가 값 증감시키는 버튼을 매번 만들려면 디쟈이너들이 템플릿 작업하기에도 문제가 있을꺼같아 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>

 

관련자료

등록된 댓글이 없습니다.
Today's proverb
가장 깊은 감정은 항상 침묵 속에 있다. (토마스 무어)