Nueva versión jQuery 1.7.1

28 nov

Aprovechando la celebración en Estados Unidos del día de Thanksgiving, el equipo de desarrolladores de jQuery nos presenta en exclusiva la última versión de esta famosa librería de Javascript.

Las mejoras, corecciones y actualizaciones con respecto a la versión anterior son muchos, entre las que se destacan:

  • Ajax
  • Atributos
  • Build
  • Núcleo (core)
  • Css
  • Datos
  • Efectos
  • Eventos
  • Manipulación
  • Miscelánea
  • Soporte

Podeis descargar esta nueva versión desde la web oficial o desde aquí:

Mostrar capa / tabla oculta con fadeIn, slideDown, show, css en jQuery

3 nov

Ayer os explicábamos las formas posibles de ocultar una capa en jQuery, las distintas funciones posibles.

Hoy vamos a explicar los efectos de los que disponemos en jQuery para mostrar una capa, en vez de el fadeIn como os expliqué anteriormente.

Primero vamos a empezar con la función fadeIn. Esta función se encarga de modificar el nivel de opacidad de la capa / tabla de 0 a 100 en el tiempo que nosotros le indiquemos. Como en el ejemplo con 2 segundos:

$('#div_fadeIn').fadeIn(2000);

La función slideDown se encarga de mostrar la capa / tabla aumentando su altura, en el tiempo que nosotros le indiquemos. En este caso la capa pasa de tener 0 pixeles de alto a tener 450, creando un efecto muy elegante.

$('#div_slideDown').slideDown(2000);

La función show por defecto lo que hace es mostrar la capa / tabla modificando el ancho / alto de esta, comenzando por la esquina superior izquierda, terminando por la esquina inferior derecha. En este caso pasa de tener 0 pixeles de ancho y 0 de alto a tener 600 pixeles de ancho y 450 pixeles de alto. Es bastante parecido a fadeIn.

$('#div_show').show(2000);

Y para terminar la función css. Con esta función cambiamos el display:none a display:block sin efecto ninguno.

$('#div_css').css("display","block");

Aquí tenéis un ejemplo con las 5 funciones.

Ocultar una capa / tabla con fadeOut, slideUp, hide, css en jQuery

2 nov

Esto ya lo explicamos hace tiempo, como ocultar una capa / tabla y como mostrarla con jQuery. El problema está en que a día de hoy el 90% de las visitas viene de Google, y como me han comentado un par de usuarios, no han encontrado el tutorial.

Hoy vamos a explicar los efectos de los que disponemos en jQuery para ocultar una capa, en vez de el fadeOut como os expliqué anteriormente.

Primero vamos a empezar con la función fadeOut. Esta función se encarga de modificar el nivel de opacidad de la capa / tabla de 100 a 0 en el tiempo que nosotros le indiquemos. Como en el ejemplo con 2 segundos:

$('#div_fadeOut').fadeOut(2000);

La función slideUp se encarga de ocultar la capa / tabla reduciendo su altura, en el tiempo que nosotros le indiquemos. En este caso la capa pasa de tener 450 pixeles de alto a tener 0, creando un efecto muy elegante.

$('#div_slideUp').slideUp(2000);

La función hide por defecto lo que hace es ocultar la capa / tabla modificando el ancho / alto de esta, comenzando por la esquina inferior derecha, terminando por la esquina superior izquierda. En este caso pasa de tener 600 pixeles de ancho y 450 de alto a tener 0 pixeles de ancho y 0 pixeles de alto. Es bastante parecido a fadeOut.

$('#div_hide').hide(2000);

Y para terminar la función css. Con esta función cambiamos el display:block a display:none sin efecto ninguno.

$('#div_css').css("display","none");

Aquí tenéis un ejemplo con las 5 funciones.

Empezando con jQuery UI para jQuery

1 nov

jQuery UI es una librería de componentes adicional para jQuery con la que obtenemos nuevos plugins, efectos visuales, widgets para trabajar con jQuery.

Lo primero que haremos será descargarla de su página web oficial con el tema deseado o que mejor se adapte al diseño de nuestro sitio web.

También podéis descargarlo al final de este post, la versión 1.8.5 sin ningún tema.

Una vez que lo tengamos descargado, simplemente tendremos que incluirlo dentro de nuestro código de esta forma:

<script type="text/javascript" src="../js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="../js/jquery-ui-1.8.5/js/jquery-ui-1.8.5.custom.min.js"></script>
<link href="../js/jquery-ui-1.8.5/development-bundle/themes/base/jquery.ui.all.css" rel="stylesheet" type="text/css" />

jQuery Alert Dialogs, substituto del alert(), confirm() y prompt() en jQuery

1 nov

Todos estamos de acuerdo en el que los alert(), confirm() y prompt() de Javascript son muy poco estéticos y dan un aspecto poco profesional a nuestra página web.

Hoy os presentamos jQuery Alert Dialogs, un substituto del típico alert(), confirm() y prompt() de Javascript, con el que podemos darle un toque más estético y profesional a nuestro sitio web.

Para empezar tendremos que añadir jAlert después de incluir jQuery como en el ejemplo:

<script type="text/javascript" src="../js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="../jalert/jquery.alerts.js"></script>
<link href="../jalert/jquery.alerts.css" rel="stylesheet" type="text/css" />

Ahora que ya tenemos incluido el script, vamos a hacer la primera prueba con el el substituto de alert:

jAlert("Actualidad jQuery", "Actualidad jQuery");

En la primera variable le añadiremos el texto que aparecerá dentro de la ventana, y en la segunda variable, el título de la ventana jAlert.

Ahora vamos a probar con confirm, que ahora será jConfirm:

jConfirm("¿Te gusta Actualidad jQuery?", "Actualidad jQuery", function(r) {
	if(r) {
		jAlert("Te gusta Actualidad jQuery", "Actualidad jQuery");
	} else {
		jAlert("No te gusta Actualidad jQuery", "Actualidad jQuery");
	}
});

Dependiendo de si hacemos click en Continuar o Cancelar, nos devolverá la variable r con el valor true o false.

Y para terminar vamos a probar con prompt, que ahora será jPrompt:

jPrompt("Introduce tu nombre", "", "Actualidad jQuery", function(r) {
	if(r) {
		jAlert("Tu nombre es "+r, "Actualidad jQuery");
	}
});

Al igual que en el ejemplo anterior, la variable r nos devolverá el texto que hayamos introducido en la ventana.

A continuación tenéis un ejemplo con alert(), confirm(), prompt(), jAlert(), jConfirm() y jPrompt(), para que veáis sus diferencias.

Página 2 de 612345...Última »