Botón más/menos

El script Como funciona
<!-- Mas en: http://javascript.espaciolatino.com/ -->
< script language="javascript">

function oBotonCtrl(formul, idcampo, min, max)
{
this.control = "document.forms."+formul+"."+idcampo;
this.min = min; this.max = max;
this.seguir = 0;
this.mas = new Function("this.seguir = 1;
this.cambiar()");
this.menos = new Function("this.seguir = -1;
this.cambiar()");
this.parar = new Function("this.seguir=0");
this.cambiar = cambiar;
function cambiar()
{
var lim = this.seguir>0?this.max:this.min;
//Crea la variable global $boton para el temporizador
if (!window.$boton)
    window.$boton = this;
var ctrl = eval(this.control);
if (ctrl.value == '')
    ctrl.value = 0;
if (ctrl.value != lim)
    {
    ctrl.value = parseInt(ctrl.value)+this.seguir;
    //Llama al método cambiar del objeto actual
    if(this.seguir!=0)
        setTimeout("$boton.cambiar()", 200);
    else
        window.$boton = null;
    }
}//Fin de la función cambiar
}//Fin del objeto botón
< /script>

Este es un objeto usado para construir un botón de control para formularios HTML. Su misión consiste en incrementar o decrementar el contenido de un campo del formulario dependiendo de en que parte del botón pulsemos con el ratón. El objeto se denomina oBotonCtrl, sus propiedades y métodos son
Propiedades  
control El objeto campo del formulario sobre el que actúa
número, Valor máximo del contenido del campo
max número, Valor máximo del contenido del campo
min número, Valor mínimo del contenido del campo
seguir -1, 0, 1. Es el valor en que se incrementa el valor del campo asociado
Métodos  
mas Pone a 1 el valor de seguir y llama a cambiar ()
menos Pone a -1 el valor de seguir y llama a cambiar ()
parar Pone a o el valor de seguir y llama a cambiar()
cambiar Usa el valor de seguir para actualizar el contenido del campo asociado. Si el valor de seguir no es cero inicializa el temporizador para que vuelva a llamar a este método, con lo que el valor continuará modificándose.
   

El objeto se crea como es habitual con el operador new:
         boton1 = new oBotonCtrl(formul, control, -20, 20)
donde formul es un identificador de un formulario y control es el nombre (name) del control sobre el que actuará el botón. El formulario debe existir cuando se cree el objeto botón.

La página Como se usa
 <body>
< form name="form2" method="post" action="">
< input type="text" name="control">
< map name="m_ctrl2">
< area shape="rect" coords="0,0,13,10" href="javascript:void(0)"
onmousedown="boton2.mas()" onmouseup="boton2.parar()">
< area shape="rect" coords="0,11,13,20" href="javascript:void(0)"
onmousedown="boton2.menos()" onmouseup="boton2.parar()">
< /map>
< img name="ctrl2" src="ctrl.gif" width="13" height="20" border="0" usemap="#m_ctrl2" align="absmiddle" hspace="0"
onLoad="window.boton2 = new oBotonCtrl('form2','control', -50, 50)">
< /form>
< /body>

 En el código HTML como puedes observar se utiliza un image map, o sea, una imagen con areas activas que hacen de enlaces. Esta es la imagen usada en el ejemplo, puedes copiarla mediante el botón derecho del ratón:

Cuando la imagen se ha cargado (se dispara el evento onload) crea el objeto boton2 del tipo oBotonCtrl, que está asociado al campo control del formulario form2, siendo -50 y 50 los valores límites para el contenido del campo. El objeto también puede crearse mediante un evento onload del body.

En el image map existen dos areas, una para cada mitad del botón. Al pulsar el área superior se llama al método mas() del boton2 usando un evento onmousedown, cuando soltamos el botón se genera un evento onmouseup que llama al método parar() del boton2.

Como reto queda adaptar este script para que ademas de números pueda manejar listas de valores. ¿Alguien se atreve? Quien lo logre que comparta su trabajo.
   
     
Envía esta página a un amigo. Te lo agradecerá.   Poner esta página como página de inicio