Ya sabéis que jQuery es una librerÃa de Javascript muy popular que se utilizada en muchas aplicaciones web, como por ejemplo, en el archiconocido CMS, WordPress. Con jQuery, escribimos menos código, codificar funciones es menos complejo y cuenta con un montón de plugins que puedes utilizar sin gastarte ni un duro, en tu aplicación. Los snippets de jQuery que vas a ver a continuación son un buen ejemplo de cómo desarrollar una funcionalidad dinámica y rápida para tu sitio web (o e-commerce).
Sin más dilación, vamos a ver esos snippets tan prácticos:
Completar un select a partir de la selección de otro
Una de las funciones más potentes de jQuery es Ajax. Este ejemplo muestra cómo completar un segundo select en base a la selección designada por el usuario de un primer select. Esta caracterÃstica puede serte muy útil en la página del detalle del producto.
Por ejemplo, tenemos este select con diversas categorÃas (colores):
<form> <label for="category">Choose color: </label> <select id="category" name="category"> <option value="green">Green</option> <option value="blue">Blue</option> <option value="red">Red</option> </select> <span id="subcat"></span> </form>
Si alguien cambia el color en este select, el formulario mostrará las tallas disponibles dentro del elemento SPAN con el ID “subcat”. Para hacer esto, utiliza este snippet de jQuery que realiza una petición AJAX a un fichero PHP llamado “getSubCat.php”. Cuando se haga una selección en el select, se mostrará una imagen de “cargando” (en caso de conexiones a Internet lentas), se llamará al PHP y el sub select de las tallas aparecerá visible.
$(document).ready(function() {
$('#category').change(function() {
var category = $(this).val();
$.ajax({
type: 'GET',
url: 'getSubCat.php',
data: 'category=' + category,
dataType: 'html',
beforeSend: function() {
$('#subcat').html('<img src="loader.gif" alt="loading..." />');
},
success: function(response) {
$('#subcat').html(response);
}
});
});
});
Crea un fichero PHP con el nombre getSubCat.php y copia/pega el siguiente código:
<?php
$data = array(
'green' => array('S', 'M', 'L', 'XL', 'XXL'),
'blue' => array('L', 'XXL'),
'red' => array('M', 'L', 'XL', 'XXL')
);
// Normally you receive this data from the database
if (!empty($_GET['category'])) {
if (array_key_exists($_GET['category'], $data)) {
echo '
<select id="subselect" name="'.$_GET['category'].'">';
foreach ($data[$_GET['category']] as $key => $val) {
echo '
<option value="'.$key.'">'.$val.'</option>';
}
echo '
</select>';
} else {
echo 'Array-key doesn't exist';
}
} else {
echo 'Invalid request';
}
Activa/Desactiva el botón submit de un formulario
En dichas páginas con un formulario de registro o con formularios en el pago del pedido, lo suyo es hacer que el usuario o visitante acepte los términos y condiciones de tu web antes de que envÃe el formulario, ¿verdad? Una función muy simple realiza todo esto, es decir, deshabiluta el botón de submit hasta que el visitante hace clic en un campo checkbox (como el de aceptar los términos y condiciones). El siguiente snippet activará/desactivará el botón submit si el elemento checkbox está marcado o no.
$('#accept').click(function() {
if ($('#buybtn').is(':disabled')) {
$('#buybtn').removeAttr('disabled');
} else {
$('#buybtn').attr('disabled', 'disabled');
}
});
Una vez que tenemos esta función, utilizamos este código HTML para el botón submit.
<input id="accept" name="accept" type="checkbox" value="y" /> I accept the conditions! <input id="buybtn" disabled="disabled" name="Submit" type="submit" value="Send" />
GalerÃa de fotos con miniaturas
Si buscas una función para crear una galerÃa de imágenes liviana, este snippet de jQuery es para ti. El funcionamiento de la función es muy simple: si el visitante hace clic en una miniatura, el valor del atributo href pasa a ser el del atributo src de la imagen grande. Eso es todo, échale un vistazo al código jQuery y por supuesto, también al código HTML.
$('#thumbs a').click( function() {
var changeSrc = $(this).attr('href');
$('#detail').attr('src', changeSrc);
return false;
});
<div class="container"> <img id="detail" src="img/1.jpg" alt="bigger view" /> </div> <div class="thumbs"> <a href="img/1.jpg"><img src="thumbs/1.jpg" alt="thumb 1" /></a> <a href="img/2.jpg"><img src="thumbs/2.jpg" alt="thumb 2" /></a> <a href="img/3.jpg"><img src="thumbs/3.jpg" alt="thumb 3" /></a> </div>
Esconder/mostrar elementos basándose en una selección
jQuery cuenta con funciones excelentes para mostrar y esconder elementos HTML. En este ejemplo vemos cómo mostrar una lista de tipos de tarjetas de crédito cuando el cliente marca la casilla (radio button) “creaditcar”. Este script comprueba que el radio button ha sido seleccionado y, si es asÃ, muestra el select, y si no, no muestra nada.
$('#payments input[type=radio]').click(function() {
if ($(this).val() == 'creditcard') {
$('#cards').show();
} else {
$('#cards').hide();
}
});
El snippet HTML cuenta con un grupo de radio buttons dentro de un contenedor DIV que se hace visible cuando el radio con el valor “creditcar” es pulsado.
<ul id="payments"> <li> <input id="creditcard" name="payment" type="radio" value="creditcard" /> Creditcard <div id="cards"> <label for="cctype">Choose one: </label> <select id="cctype" name="cctype"> <option>...</option> <option value="master">MasterCard</option> <option value="visa">Visa</option> <option value="amex">American Express</option> </select> </div> </li> <li> <input name="payment" type="radio" value="paypal" /> PayPal </li> <li> <input name="payment" type="radio" value="wire" /> Wire/transfer </li> </ul>
Contar clics para Google Analytics
El último snippet es una forma sencilla de contar clics de los enlaces que están dentro de un contenedor DIV especÃfico. Sin necesidad de añadir el código de Google Analytics a todos los enlaces, es posible contar esos links en Google Analytics.
$('#mylinks a[href^="http"]').click(function(){
pageTracker._trackPageview('/outgoing/'+ $(this).attr('href'));
});
Esta pequeña función contará los links dentro de un contenedor DIV con el id “mylinks” tal que asÃ:
<div id="mylinks"> <a href="http://google.com">Google</a> | <a href="http://www.programacion.net">Programacion.net</a> </div>