5 Trucos en JQuery para Estilos y CSS
Hay un montón de trucos y técnicas de JQuery por ahí, y la poderosa librería jQuery puede satisfacer la mayoria de las necesidades de JavaScript. JQuery hizo mas sencillo javascript para los diseñadores que desean añadir la interacción visual y técnicas sencillas en su diseño sin tener amplios conocimientos de programación, vale la pena dedicarle unos minutos para explorar esta excelente biblioteca.
1. Columnas de igual altura
Columnas con la misma altura siempre han sido un problema para los diseñadores que utilizan divs, aunque ahora, hay algunas soluciones.
Para resolver este problema con jQuery, sólo tiene que añadir esta función a sus páginas si desea tener la misma altura para distintas columnas (o incluirlo como un archivo JavaScript – que es mejor para el mantenimiento).
function equalHeight(group) {
tallest = 0;
group.each(function() {
thisHeight = $(this).height();
if(thisHeight > tallest) {
tallest = thisHeight;
}
});
group.height(tallest);
}
Para conseguir la igualdad en la altura de las columnas, enlace al script que contiene la función, y ponga el siguiente bloque de código en las etiquetas <head> de sus páginas.
<script type="text/javascript">
$(document).ready(function(){
equalHeight($(".col1"));
equalHeight($(".col2"));
equalHeight($(".col3"));
});
</script>
2. Esquinas redondeadas sin HTML
Afortunadamente, CSS3 ha salido con una forma de crear esquinas redondeadas de forma automática sin necesidad de utilizar las imágenes, pero por otra parte, muchos navegadores populares (como Internet Explorer, generalmente funciona para versiones de IE7 o superior) pueden tomar un tiempo antes de soportar total o parcialmente las recomendaciones del W3C para CSS3.
Supongamos que tiene un DIV en su página con la clase rounded. Desea que todas las cuatro esquinas esten redondeadas, con un radio de 1.5 ems. Los siguientes CSS logrará esto:
.rounded {
-moz-border-radius:3ex;
-webkit-border-radius:3ex;
}
.rounded {
-moz-border-radius-topleft:3ex;
-moz-border-radius-bottomright:3ex;
-webkit-border-top-left-radius:3ex;
-webkit-border-bottom-right-radius:3ex;
}
3. Resaltando texto con javascript
Llame a la función highlight con el texto para resaltar. Para poner de highlight a todas las ocurrencias de “Bla” (case sensitive, tiene en cuenta mayúsculas y minúsculas) en todos los elementos li, utilice el siguiente código:
$ ( ‘li’). destacar ( ‘bla’);
4. Cambio de estilos CSS
Intercambiar estilos es una gran manera de variar el tema y el aspecto de una página web. El cambio de hojas de estilo puede ser necesario para dar cabida a diferentes resoluciones de pantalla, o tal vez que los usuarios puedan elegir una alternativa de fondo claro, con un diseño oscuro.
Es muy facil de hacer, solo hay que incluir el siguiente script JQuery en el <head> del HTML:
<script type="text/javascript">
$(".styleswitch").click(function() {
$('link[rel=stylesheet]').attr('href' , $(this).attr('rel'));
});
</script>
Para dar opciones al usuario para cambiar de estilos, simplemente asigne a la clase styleswitch a un elemento HTML, con el atributo rel para hacer referencia a la ubicación de sus hojas de estilo.
<a href="#" class="styleswitch" rel="dark.css">Dark</a> <a href="#" class=" styleswitch " rel="light.css">Light</a>
Por ejemplo al hacer clic en el segundo enlace de arriba, modificaria el DOM de tal manera que el atributo href tomará el valor de light.css.
5. Redimensionando el texto dinamicamente
Este truco se usa comunmente para facilitar a los usuarios controlar que tan grande o pequeño veran el texto de una pagina web sin tener que modificar la configuracion de su navegador
El uso de enlaces para aumentar, disminuir, o restablecer el tamaño del texto de una página web se puede implementar fácilmente usando jQuery.
<script type="text/javascript">
$(document).ready(function(){
var section = new Array('span','.section2');
section = section.join(',');
// Reset Font Size
var originalFontSize = $(section).css('font-size');
$(".resetFont").click(function(){
$(section).css('font-size', originalFontSize);
});
// Increase Font Size
$(".increaseFont").click(function(){
var currentFontSize = $(section).css('font-size');
var currentFontSizeNum = parseFloat(currentFontSize, 10);
var newFontSize = currentFontSizeNum*1.2;
$(section).css('font-size', newFontSize);
return false;
});
// Decrease Font Size
$(".decreaseFont").click(function(){
var currentFontSize = $(section).css('font-size');
var currentFontSizeNum = parseFloat(currentFontSize, 10);
var newFontSize = currentFontSizeNum*0.8;
$(section).css('font-size', newFontSize);
return false;
});
});
</script>
En el código anterior, notará una matriz llamada sección. Esto define los elementos HTML que pueden cambiar de tamaño.
A partir de ahí, se puede usar HTML básico para crear un texto, cambiar el tamaño de los enlaces.
<a class="increaseFont">+</a> | <a class="decreaseFont">-</a> | <a class="resetFont">=</a> <span>Font size can be changed in this section</span> <div class="section1">This won't be affected</div> <div class="section2">This one is adjustable too!</div>
Supongamos que tenemos un DIV en su página con la clase redondeadas. Desea que todas las cuatro esquinas redondeadas, con un radio de un año y medio de EMS. Los siguientes CSS logrará esto:
Entradas Recientes
- Formularios para carga de archivos usando JQuery
- iPad GUI PSD
- BBVA Open Talent
- Buscar más de 13.000 fuentes gratis de alta calidad
- FormToWizard: Formularios largos paso a paso con Jquery
- Gestión de eventos vs Delegación de eventos
- 250 iconos navideños
- Análisis de XML con javascript: jParse
- 9 Texturas de Madera en alta resolucion
- Insertar y personalizar Google Maps en tu sitio web