Micaela 22 de septiembre de 2009 a las 09.02
   Imprimir artículo
elWebmaster.com

Crea botones de suma y resta en tus formularios con jQuery


jquery3Las 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.

  1. <form method="post">
  2. <div><label for="name">French Hens</label>
  3. <input id="french-hens" name="french-hens" type="text" value="3" /></div>
  4. <div><label for="name">Turtle Doves</label>
  5. <input id="turtle-doves" name="turtle-doves" type="text" value="2" /></div>
  6. <div><label for="name">Partridges</label>
  7. <input id="partridge" name="partridge" type="text" value="1" /></div>
  8. <input id="submit" type="submit" value="Submit" />
  9. </form>

El CSS

  1. /*
  2. CSS-Tricks Example
  3. by Chris Coyier
  4. http://css-tricks.com
  5. */
  6.  
  7. *                                   { margin: 0; padding: 0; }
  8. body                                { background: #393939; color: white; font: 14px Helvetica, sans-serif; }
  9. a                                   { text-decoration: none; color: #9bf9ff; border-bottom: 1px dotted #9bf9ff; }
  10. a:hover                             { border-bottom-style: solid; }
  11. #page-wrap                          { width: 500px; margin: 25px auto; }
  12. h1                                  { font: 26px Georgia, Serif; margin: 0 0 10px 0; }
  13. form                                { margin: 50px 0 0 0; }
  14. label                               { font: bold 20px Helvetica, sans-serif; display: block; float: left; text-align: right; padding: 5px 10px 0 0; width: 140px; }
  15. input[type=text]                    { float: left; width: 40px; font: bold 20px Helvetica, sans-serif; padding: 3px 0 0 0; text-align: center; }
  16. form div                            { overflow: hidden; margin: 0 0 5px 0; }
  17. .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; }
  18. .dec                                { background-position: 0 -29px; }
  19. #submit                             { margin: 15px 0 0 175px; font: 20px Helvetica, sans-serif; padding: 5px 10px 3px 10px; border: 1px solid black; background: #eee; }
  20. #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

buttons-photoshop

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.

  1. $(function() {
  2. $("form div").append('
  3. <div class="inc button">+</div>
  4. <div class="dec button">-</div>
  5. ');
  6. });

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:

  1. Cachea el selector
  2. Guarda el “antiguo” valor de la entrada (valor del momento en que se cliquea)
  3. Si se hace clic en el botón “más”…
  4. …incrementa en uno el valor
  5. Si se hace clic en el botón “menos”…
  6. …disminuye uno el valor
  7. Arroja el nuevo valor en la entrada
  1. $(".button").click(function() {
  2. var $button = $(this);
  3. var oldValue = $button.parent().find("input").val();
  4.  
  5. if ($button.text() == "+") {
  6. var newVal = parseFloat(oldValue) + 1;
  7. // AJAX save would go here
  8. } else {
  9. // Don't allow decrementing below zero
  10. if (oldValue &gt;= 1) {
  11. var newVal = parseFloat(oldValue) - 1;
  12. // AJAX save would go here
  13. }
  14. }
  15. $button.parent().find("input").val(newVal);
  16. });

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:

  1. var id = $button.attr("id");
  2. $.ajax({
  3. type: "GET",
  4. url: "dosomething.php?id=" + id + "&amp;newvalue=" + newVal,
  5. success: function(){
  6. $button.parent().find("input").val(newVal);
  7. }
  8. });

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


Enviar a Del.icio.us Enviar a Meneame Enviar a Digg Enviar a Fresqui Enviar a Enchilame

Deja tu opinión

© 2007 - 2008 elWebmaster.com | Powered by Wordpress | Diseño CSS y XHTML válido. | Algunos íconos basados en FamFamFam Mini
Acceder