Skip navigation

Tag Archives: ejemplo

A la hora de programar en jQuery suelo crear elementos para añadir a la página. Normalmente solía realizar, por ejemplo, los siguientes pasos:

var li = document.createElement(‘li’);
li.id = ‘acerca-de’;
li.innerHTML = ‘Acerca de’;
$(‘#nav’).append(li);

Como veis, estoy creando un nuevo elemento de una lista, asignándole un ID, insertando su html correspondiente y añadiéndolo a una lista que ya tengo con identificador #nav.

Lo bueno que tiene jQuery es que está desarrollado para poder anidar instrucciones, haciendo que cada función devuelva el mismo elemento. De este modo estos pasos quedarían:

var li = $(document.createElement(‘li’)).attr(‘id’,’acerca-de’).html(‘Acerda de’).appendTo(‘#nav’);

Dejando un código mucho más sencillo, limpio y reducido.

La gente de Queness nos proponen un ejemplo de como realizar una validación de un formulario con jQuery.
ajaxform
Si revisamos el código fuente de la página veremos que en el evento click() del botón del formulario se comprueba que todos los campos obligatorios hayan sido cubiertos.
Si esto es correcto se realizará la llamada AJAX al servidor para procesar el pedido y realizar la operación oportuna dependiendo del resultado.

Ir al ejemplo

Una opción muy habitual en blogs y prensa online es la de dar al usuario la posibilidad de aumentar o disminuir el tamaño de la letra de los artículos para su comodidad a la hora de leer la noticia.

Con jQuery es muy sencillo implementar esta opción. Como ejemplo vamos a ver el código necesario para dotar a nuestra web con esta característica. Para ello nos basaremos en el tamaño de la fuente a nivel general de la página (aunque se podría especificar el elemento al que queremos que afecte).

Lo primero será crear tres enlaces que funcionarán como botones para aumentar, disminuir y reiniciar el tamaño de la fuente:

<a class=”aumFuente” href=”#”>Aumentar</a>
<a class=”disFuente” href=”#”>Disminuir</a>
<a class=”reiFuente” href=”#”>Reiniciar</a>

Lo siguiente será aplicarle el código necesario en el evento click de cada uno de los enlaces:

$(document).ready(function(){
// Reiniciar el tamaño de la fuente
var tamOriginal = $(‘html’).css(‘font-size’);
$(“.reiFuente”).click(function(){
$(‘html’).css(‘font-size’, tamOriginal);
});
// Incrementar el tamaño de la fuente
$(“.aumFuente”).click(function(){
var tamActual = $(‘html’).css(‘font-size’);
var tamActualNum = parseFloat(tamActual, 10);
var nuevaFuente = tamActualNum*1.2;
$(‘html’).css(‘font-size’, nuevaFuente);
return false;
});
// Disminuir el tamaño de la fuente
$(“.disFuente”).click(function(){
var tamActual = $(‘html’).css(‘font-size’);
var tamActualNum = parseFloat(currentFontSize, 10);
var nuevaFuente = tamActualNum*0.8;
$(‘html’).css(‘font-size’, nuevaFuente);
return false;
});
});

Con esto tendríamos implementada la funcionalidad. Puedes ver una demostración online.

Vía: ShopDev