Las entradas de texto en los formularios también se pueden utilizar para ingresar números. Un uso común, por ejemplo, serÃa una entrada "cuantitativa" en un sitio eCommerce.
Sin embargo, si se desea, se puede escapar de lo tosco y aplicar un poco de diseño para que estas entradas de números sean más amigables con el usuario. En esta nota te mostramos cómo utilizar jQuery para este fin.
HTML limpio
Este es el código formal. Nada extra se añade, sólo HTML limpio. Sin JavaScript, este formulario funcionará a la perfección sin ningún problema.
-
<form method="post">
-
<div><label for="name">French Hens</label>
-
<input id="french-hens" name="french-hens" type="text" value="3" /></div>
-
<div><label for="name">Turtle Doves</label>
-
<input id="turtle-doves" name="turtle-doves" type="text" value="2" /></div>
-
<div><label for="name">Partridges</label>
-
<input id="partridge" name="partridge" type="text" value="1" /></div>
-
<input id="submit" type="submit" value="Submit" />
-
</form>
El CSS
-
/*
-
CSS-Tricks Example
-
by Chris Coyier
-
http://css-tricks.com
-
*/
-
-
* { margin: 0; padding: 0; }
-
body { background: #393939; color: white; font: 14px Helvetica, sans-serif; }
-
a { text-decoration: none; color: #9bf9ff; border-bottom: 1px dotted #9bf9ff; }
-
a:hover { border-bottom-style: solid; }
-
#page-wrap { width: 500px; margin: 25px auto; }
-
h1 { font: 26px Georgia, Serif; margin: 0 0 10px 0; }
-
form { margin: 50px 0 0 0; }
-
label { font: bold 20px Helvetica, sans-serif; display: block; float: left; text-align: right; padding: 5px 10px 0 0; width: 140px; }
-
input[type=text] { float: left; width: 40px; font: bold 20px Helvetica, sans-serif; padding: 3px 0 0 0; text-align: center; }
-
form div { overflow: hidden; margin: 0 0 5px 0; }
-
.button { margin: 0 0 0 5px; text-indent: -9999px; cursor: pointer; width: 29px; height: 29px; float: left; text-align: center; background: url(../images/buttons.png) no-repeat; }
-
.dec { background-position: 0 -29px; }
-
#submit { margin: 15px 0 0 175px; font: 20px Helvetica, sans-serif; padding: 5px 10px 3px 10px; border: 1px solid black; background: #eee; }
-
#submit:hover { background: #ccc; }
Algunas cosas para notar serÃan que todo se encuentra con el float a la izquierda y los divs poseen overflow oculto para limpiar los floats. Las etiquetas poseen display block y text-align para su correcta alineación. Los ajustes de pÃxeles se hacen por aquà y por allá para poner las cosas en orden. Puede que se vean algunas diferencias dependiendo del navegador.
Crea algunos botones
Haz con Photoshop algunos botones, o utiliza algunos previamente creados. En la descarga se incluye el PSD en caso de que quieras usar estos.
Botones de Incremento
Necesitamos anexar estos botones a cada entrada. Notarán en el código que cada par de etiquetas/entradas está envuelto en un div. Ésta es una buena práctica para que las entradas de etiqueta se separen en su propia lÃnea (para un mejor legibilidad) cuando el CSS esté desactivado. Además también se requiere para la validación con algunos tipos de documento.
-
$(function() {
-
$("form div").append('
-
<div class="inc button">+</div>
-
<div class="dec button">-</div>
-
');
-
});
Dos clases cada uno, una clase "button" genérica le dará el 90% del estilo y estará unida al evento click. La otra clase única es para ajustar la posición del fondo y utilizar el sprite.
Hazlos funcionar
En palabras simples:
- Cachea el selector
- Guarda el "antiguo" valor de la entrada (valor del momento en que se cliquea)
- Si se hace clic en el botón "más"...
- ...incrementa en uno el valor
- Si se hace clic en el botón "menos"...
- ...disminuye uno el valor
- Arroja el nuevo valor en la entrada
-
$(".button").click(function() {
-
var $button = $(this);
-
var oldValue = $button.parent().find("input").val();
-
-
if ($button.text() == "+") {
-
var newVal = parseFloat(oldValue) + 1;
-
// AJAX save would go here
-
} else {
-
// Don't allow decrementing below zero
-
if (oldValue>= 1) {
-
var newVal = parseFloat(oldValue) - 1;
-
// AJAX save would go here
-
}
-
}
-
$button.parent().find("input").val(newVal);
-
});
El código de arriba hace lo que hemos descripto pero con una lógica extra. Antes de disminuir el valor, se asegura que el número es, por lo menos, un valor de 1 o superior. Esto previene que el valor se vuelva negativo (por lo menos al usar estos botones).
Hay también algunas lÃneas comentadas con respecto a AJAX. Si tu aplicación es genial y dinámica, puede que quieras guardar el valor de forma automática después de que se presiona un botón, haciéndola sentir como una aplicación de escritorio.
Si quisieras hacer esto, podrÃas poner algo de código como el siguiente:
-
var id = $button.attr("id");
-
$.ajax({
-
type: "GET",
-
url: "dosomething.php?id=" + id + "&newvalue=" + newVal,
-
success: function(){
-
$button.parent().find("input").val(newVal);
-
}
-
});
Probablemente removerÃas la última lÃnea de la función click en dónde se actualiza el valor y dejar que eso se haga en la sub-función "success" de arriba. De esta forma el número no se actualiza visualmente a menos que AJAX haya sido guardado de forma exitosa.
Haz clic aquà para ver una demostración»
Haz clic aquà para descargar los archivos»
Fuente: CSS-Tricks
Comentarios recientes
- diego gutierrez arias: excelente todo le q se publica en esta pagina, es de mucha ayuda, mi pro...
- christian: Hola alguien puede pasarme los archivos ? desde ya gracias quiero probar...
- Iruma: Pues vaya que todos tienen muchas cosas que contar... Yo les puedo decir...
- A2design: Seamos realistas... hay gente que paga por usar un programa... pero yo m...
- A2design: ¿no usar gif??? desde cuando...? la consigna es no usar flash que no se...
- lara: EXELENTEEEEE...
Feed de los comentarios