인터넷정보

up down 버튼 만들기 (DOM)

알 수 없는 사용자 2007. 10. 11. 16:39

ex.


<script>
function mk_btn_updown(idname,num_max,num_min){
//num_max이 0(false)이면 max값을 무한대이다.
//min의 기본값은 0이다.
var num_min=parseInt(num_min)?parseInt(num_min):0;
var num_max=parseInt(num_max)?parseInt(num_max):'max';

var ta = document.getElementById(idname);
ta.style.verticalAlign='middle';
ta.readOnly = true;

var span = document.createElement('span')
span.style.margin='0px';
span.style.padding='0px';
span.style.borderStyle='solid';
span.style.borderWidth='0px';
//span.style.height='10px';
//span.style.width='10px';
span.style.top='0px';
span.style.left='0px';
span.style.verticalAlign='middle';
//span.style.position='relative';

var input_up = document.createElement('input')
input_up.type='button';
input_up.value='▲';
input_up.style.backgroundColor='#FFEEEE';
input_up.style.verticalAlign='middle';
input_up.style.fontSize='8px';
input_up.style.borderStyle='none';
input_up.style.width='10px';
input_up.style.height='20px';
input_up.style.margin='0px';
input_up.style.padding='0px';
//input_up.style.top='-5px';
//input_up.style.float='left';
//input_up.style.position='relative';
var input_down = input_up.cloneNode(false);
input_down.style.verticalAlign='middle';
input_down.value='▼';
input_down.style.backgroundColor='#EEEEFF';
//input_down.style.top='5px';
//input_down.style.left='-10px';
span.appendChild(input_up);
span.appendChild(input_down);

 

var handleEvent1 = function(){
temp = input_up.parentNode.previousSibling;
if(num_max=='max'){
temp.value=parseInt(temp.value)+1;
}else if((next=parseInt(temp.value)+1)<=num_max){
temp.value=next;
}
}
if(input_up.attachEvent)
input_up.attachEvent("onclick", handleEvent1 );
else
input_up.addEventListener("click", handleEvent1 , false);

var handleEvent2 = function(){
temp = input_down.parentNode.previousSibling;
if(parseInt(temp.value)-1>= num_min){
temp.value=parseInt(temp.value)-1;
}
}
if(input_down.attachEvent)
input_down.attachEvent("onclick", handleEvent2 );
else
input_down.addEventListener("click", handleEvent2 , false);

if (ta.nextSibling)
ta.parentNode.insertBefore(span,ta.nextSibling);
else ta.parentNode.appendChild(span);
}
</script>
<div>
<input type="text" id="test" size="5" maxlength="10" value="3" style="font-size:12px; ">
</div>
<script>mk_btn_updown('test',10,-4);</script>

반응형