Linea de Codigo

Evitar que se ejecute un evento con jQuery Junio 11, 2010

Publicado por lineadecodigo en : jQuery , 2 comentarios

Una de las funciones que me parece más interesantes de jQuery es:

event.preventDefault()

Mediante la función preventDefault() del objeto Event podemos evitar que se ejecute un evento con jQuery. Esto nos da la posibilidad de alterar el comportamiento por defecto de los eventos. Por ejemplo, cuando pulsamos sobre un enlace en evento click(), este, acaba realizando una navegación.

Pero si usamos la función preventDefault() no se ejecutará la navegación:

$("a").click(function(event) {
  event.preventDefault();
});

Ahora, una vez que hemos evitado la ejecución del click, realizaremos otra cosa. En nuestro caso vamos a volcar la URL del enlace en una capa. Para saber que enlace se ha ido pulsando.

$("a").click(function(event) {
  event.preventDefault();
  $("#accion").append('Has pulsado el enlace ' + event.currentTarget + "<br/>");
});

Utilizamos el método .append() sobre una capa que se llama "accion". La propiedad del objeto Event que nos da la URL es currentTarget.

Un caso de uso en el que nos enseña a evitar que se ejecute un evento es el siguiente artículo, el cual nos enseña como simular una aplicación RIA con jQuery (en inglés).

|- Visualizar el ejemplo
|- Descargar el código
|- Reportar error en el código
|- Foro sobre jQuery

Cambiar el target de los enlaces con jQuery Junio 10, 2010

Publicado por lineadecodigo en : jQuery , Hasta ahora 1 comentario

Una de las cosas más potentes que nos ofrece jQuery es la de poder modificar el contenido del DOM de la página con Javascript que no sea intrusivo. Así, podemos hacer cosas de optimización del código generado. Entre otras cosas, porque hay veces que el código/contenido no es generado por nosotros directamente, si no por terceros.

En este caso, la idea es revisar el código para chequear que los enlaces externos tienen un target blank. Es decir, una estructura del siguiente tipo:

<a href="http://www.manualweb.net" target="_blank">Manual Web</a>

Por cuestiones de accesibilidad os recomiendo que intentéis no utilizar el target blank. Ya que haréis que se pierda el foco de la ventana. Es por ello que este código podemos utilizarlo para los dos casos: poner un blank en los enlaces externos o bien, eliminar todos los blank. Mucho mejor la segunda opción.

Pero pongámonos manos a la obra. Parto de la base de que os habéis leido, o al menos echado un vistazo, al artículo de inicialización en jQuery llamado Hola Mundo con jQuery.

La primera idea es acceder a los elementos HTML que representan el enlace. Es decir, a los anchor (A). Esto lo conseguimos directamente con la función $.

$(a)

Si bien, nos interesan aquellos que empiecen por "http" y que el dominio de inicio no sea el nuestro (en mi caso "lineadecodigo"). Así la expresión de selección sería la siguiente:

$("a[href^='http']")
  .not("a[href^='http:\/\/lineadecodigo']")

Si quieres que sean varios dominios, puedes concatenarlos dentro del selector .not(). El selector ..not() es el que hemos utilizado para eliminar del filtro los enlaces de nuestro dominio.

$("a[href^='http']")
  .not("a[href^='http:\/\/lineadecodigo'],a[href^='http:\/\/www.manualweb']")

Una vez que tenemos el selector que nos localiza los enlaces que nos interesa, ahora lo que tenemos que hacer es utilizar es .attr(), la cual nos permite a añadir un atributo. En nuestro caso target="_blank". Así el código quedaría de la siguiente forma:

$("a[href^='http']")
  .not("a[href^='http:\/\/lineadecodigo'],a[href^='http:\/\/www.manualweb']")
  .attr({target: "_blank"});

Espero que el código os sea de ayuda.

Vía: 10REM

|- Descargar el código
|- Reportar error en el código
|- Foro sobre jQuery

Modificar el contenido de una capa con jQuery Mayo 27, 2010

Publicado por lineadecodigo en : jQuery , Hasta ahora 1 comentario

En el artículo Modificar el contenido de una capa con Prototype nos comentaban si podíamos explicar como hacerlo en jQuery. Así que manos a la obra.

Lo primero, pues una capa. Y en este caso. Lo más importante es darle un ID a la capa:

 
<div id="micapa">Capa con algo de texto</div>
 
<button id="miboton">Cambiar el contenido</button>

Para darle un poco más de interactividad, mediante el elemento button hemos añadido un botón, el cual nos permitirá cambiar el contenido de la capa.

Asumiendo que ya tenemos el jQuery instanciado. Pero por si hay algún despistado:

<script type="text/javascript" src="jquery.js"></script>

Vamos al meollo de la cuestión, modificar el contenido de una capa. Lo primero que hacemos es controlar el evento click del botón. Recuerda que el acceso a los elementos se hace anteponiendo una almohadilla al ID del elemento.

$("#miboton").click(function(){...});

Dentro de la función podremos el código para modificar la capa. Para acceder a la capa, lo mismo, anteponemos la alhomadilla al ID (por eso decía lo de la importancia del ID) y el método que nos permite acceder al contenido es .html()

$("#micapa").html("Nuevo contenido de la capa");

Y todo el código junto, y dentro de la función ready() de jQuery, nos quedaría de la siguiente forma:

$(document).ready(function(){
 $("#miboton").click(function(){
    $("#micapa").html("Nuevo contenido de la capa");
 });
});

Un ejemplo muy limpio para ver como se programa con código script no intrusivo apoyándonos en jQuery.

Por cierto, es mejor Prototype o jQuery. O eres de los que usas Dojo?

|- Visualizar el ejemplo
|- Descargar el código
|- Reportar error en el código
|- Foro sobre jQuery

Cargar contenido con el scroll usando jQuery Mayo 24, 2010

Publicado por lineadecodigo en : jQuery , Hasta ahora 1 comentario

Una cosa bastante atractiva que están implementando muchas webs es la carga de datos utilizando el scroll. El mecanismo consiste en cargar una serie de datos en pantalla. Para ir viendo los datos utilizaremos el scroll. Y cuando el scroll alcance el final de la página, cargaremos nuevos datos, permitiéndonos hacer más scroll. Así, una y otra vez cada vez que lleguemos al final de la página.

Esto lo podemos ver en webs como Facebook y Twitter.

Para realizar nuestro ejemplo nos vamos a basar en el artículo Repaginar con jQuery y AJAX. Lo único que vamos a hacer es sustituir los botones de repaginación por el funcionamiento del scroll.

Lo que hay que tener claro en este ejemplo es conocer como es la estructura del contenido que vamos a solicitar al servidor. Para ello tenemos una capa principal que será la lista de mensajes y dentro de esta N capas dónde estarán los mensajes concretros.

El código HTML sería algo así:

 
<div id="mensajes">
<div class="mensaje"></div>
</div>

Mediante jQuery lo que hacemos es ir cargando mensajes dentro de las capas cada vez que detectemos que la barra de scroll ha llegado al final.

Lo primero con jQuery será cargar el fichero de jQuery que nos ayudará en la realización del código

<script type="text/javascript" src="jquery.js"></script>

Una vez instanciado jQuery vamos a realizar la primera carga de datos. Esto lo haremos nada más terminar la carga de la página. Es decir, controlando el método .ready() de jQuery.

$(document).ready(function() {
  cargardatos();
});

La carga de datos es una petición AJAX con jQuery. Veamos el código:

function cargardatos(){
  $.get("/samples/php/datos.php?pagina="+pagina,
   function(data){
    if (data != "") {
     $(".mensaje:last").after(data);
    }
   });
}

La variable página nos sirve para realizar una petición de una u otra página al servicio AJAX expuesto

La petición AJAX con jQuery la realizamos mediante la función .get(). Lo más importante es que la respuesta de la petición la dejamos detrás del último mensaje de la capa de mensajes mediante la función .after(). El selector que utilizamos es .mensaje:last

$(".mensaje:last").after(data);

Una vez que hemos visto la carga y que la hemos ejecutado al cargar la página. Tenemos que ver como realizar la misma petición cada vez que el scroll llega al final de la página. Para poder acometer esto lo que vamos a capturar es el evento .scroll().

Para el cálculo hay que conocer 3 variables:

Alto del documento, es el tamaño del documento: document).height()
Alto de la ventana, es el tamaño de la ventana: $(window).height()
Posición del scroll, es la posición del documento en la que se encuentra el scroll: $(window).scrollTop()

De esta forma, cuando a la posición del scroll le sumemos el tamaño de la ventana y nos dé el tamaño del documento, será que habremos llegado al final del documento y por lo tanto hay que lanzar una nueva carga de datos.

$(window).scrollTop() == $(document).height() - $(window).height()

El código quedaría de la siguiente forma:

$(window).scroll(function(){
 if ($(window).scrollTop() == $(document).height() - $(window).height()){
  pagina++;
  cargardatos()
 }
});

Vía: Anieto2K

|- Visualizar el ejemplo
|- Descargar el código
|- Reportar error en el código
|- Foro sobre jQuery

Repaginar con jQuery y AJAX Febrero 1, 2010

Publicado por lineadecodigo en : jQuery , 2 comentarios

En unas pocas líneas vamos a ver lo sencillo que es repaginar utilizando jQuery y AJAX. El ejemplo que vamos a montar es el típico en el cual un servicio de datos nos devuelve mensajes, mientras que nosotros, en la parte cliente realizaremos repaginaciones mediante peticiones AJAX a ese servicio.

En primer lugar contaremos con un servicio de datos que daremos por construido, al que llamaremos datos.php. Este servicio puede recibir por parámetro el valor de la página de datos a mostrar. Siguiendo la siguiente sintaxis:

datos.php?pagina=1 //Nos devolverá la primera página
datos.php?pagina=5 //Nos devolverá la quinta página

En posteriores artículos entraremos en detalle de como construir esta página con PHP de forma sencilla. Pero de momento nos vamos a centrar en el desarrollo de la parte cliente con jQuery para realizar peticiones AJAX.

Lo primero será la estructura de la página. Esta tendrá una capa donde volcaremos los mensajes, y dos botones que nos permitirán el ir hacía delante y hacía detrás.

 
<div id="mensajes"></div>
 
<button id="anterior">Anterior</button> | <button id="siguiente">Siguiente</button>

Vemos que no tiene nada de código Javascript, y es que este le inyectaremos de forma no intrusiva mediante jQuery.

La inicialización de jQuery, tan sencilla como una línea:

<script type="text/javascript" src="jquery.js"></script>

De forma general vamos a definir una variable llamada página, la cual representa la página de mensajes a visualizar:

var pagina=1;

La inicializamos a un valor de 1 para que esta sea la primera página a visualizar.

Lo siguiente será codificar las acciones de click sobre los botones. El método que nos permite capturar un click sobre un elemento es el método .click() de jQuery. La codificación de los botones será muy sencilla. Los pasos que seguirán serán.

Decrementar el valor de una variable general llamado página
Llamar a una función cargardatos(); la cual implementará las peticiones AJAX

El código quedará de la siguiente manera:

$("#anterior").click(function() {
  pagina--;
  cargardatos();
});
 
$("#siguiente").click(function() {
  pagina++;
  cargardatos();
});

Como nuestras peticiones AJAX no van a ser muy complejas la función cargardatos se apoyará en el método .get() el cual hace peticiones AJAX de tipo GET. Aunque la función .get() tiene varios parámetros (échale un vistazo a los parámetros de la función .get()) nosotros vamos a utilizar 2.

El primer parámetro indicará el origen de datos que nos devuelve el contenido. Es decir, datos.php. Como la URL a montar varía dependiendo del valor de la página en la que estemos, tenemos que apoyarnos en el valor de la variable global página que estabamos utilizando

"datos.php?pagina="+pagina;

El segundo parámetro de la función .get() es un función que recibe un parámetro data con los datos de la respuesta y cuyo contenido es las acciones que vamos a realizar sobre ellos. En nuestro caso el contenido lo vamos a añadir a la capa "mensajes". Apoyándonos en el método .html(), el cual incluirá ese contenido sobre la capa.

function(data){
  if (data != "") {
    $("#mensajes").html(data);
}

Así, el código completo de la función cargardatos() quedará de la siguiente forma:

function cargardatos(){
  $.get("datos.php?pagina="+pagina,
   function(data){
    if (data != "") {
     $("#mensajes").html(data);
    }
    }
  );
}

Unas pocas líneas y algo que parece tan complejo como repaginar con jQuery y AJAX... resuelto.

|- Visualizar el ejemplo
|- Descargar el código
|- Reportar error en el código
|- Foro sobre jQuery

Peticiones AJAX con jQuery Enero 6, 2010

Publicado por lineadecodigo en : jQuery , Hasta ahora 1 comentario

Las bondades del patrón AJAX son más que conocidas... La posibilidad de hacer peticiones de forma asíncrona que actualicen una parte de la página es una realidad de muchas webs. jQuery, como framework de JavaScript nos permite realizar esta tarea de forma sencilla, evitando codificar directamente la petición AJAX en JavaScript.

En este caso vamos a realizar una petición a una página para que nos devuelva un contenido, el cual incluiremos en una capa de nuestra página.

Así, lo primero será montar nuestra página HTML. Con su button y su div.

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
title"><title>Petición AJAX con jQuery</title>
</head>
<body>
<h1>Petición AJAX con jQuery</h1>
<div id="mensaje"></div>
 
<button id="cargar">Cargar</button>
 
</body>
</html>

Lo siguiente será inicializar jQuery y empezar a generar el código no intrusivo. Cargamos la librería jQuery mediante la etiqueta SCRIPT.

<script type="text/javascript" src="jquery.js"></script>

Una vez configurado todo... vamos a resolver el tema en cuestión. Lo primero será capturar el onClick sobre el botón. Para ello, sobre el ID cargar asociamos la función click().

<script type="text/javascript">
$(document).ready(function(){
 $("#cargar").click(function(){
    // Petición AJAX 
 });
 
});
</script>

Para hacer la petición AJAX nos apoyaremos en la función .get(url,[data],[callback],[type]). Esta función es muy sencilla y sus parámetros se descomponen en:

url, es la URL que contendrá el fichero que nos devuelva los datos.
data, son los datos a enviar a la URl de petición
callback, es el método que se ejecutará cuando se realice la petición
type, tipo de datos que se devolverán desde el servidor: text, xml, html, json,...

Así la petición AJAX será:

$.get("http://lineadecodigo.com/samples/datos.php", function(data){
  $("#mensaje").html(data);
});

En ella se puede apreciar varias cosas. La primera que datos.php es el fichero que devuelve los datos (no entraremos en detalle de como se compone, pero básicamente devuelve código HTML). La segunda es que la función de callback recibe como parámetro los datos devueltos por el servidor... dentro de esta función lo que estamos haciendo es añadir estos datos a la capa mediante el método .html()

Ahora solo nos queda el explotar las posibilidades del método .get() para dar potencia a nuestra web mediante peticiones AJAX con jQuery.

|- Visualizar el ejemplo
|- Descargar el código
|- Reportar error en el código
|- Foro sobre jQuery

Usando cookies con jQuery Diciembre 28, 2009

Publicado por lineadecodigo en : jQuery , Añadir un comenario

En este ejemplo vamos a ver como crear cookies con jQuery. Para ello almacenaremos información sobre una acción del usuario, que será si le gusta el texto oculto o no. De esta manera, cuando vuelva a visitarnos ya sabremos como le tenemos que mostrar el texto.

Lo primero que tenemos que saber es que jQuery no nos ofrece un API directo para el manejo de cookies. Es por ello que nos tendremos que apoyar en un plugin. En este caso será el plugin Cookie.

Nos podemos descargar el plugin Cookie desde http://plugins.jquery.com/files/jquery.cookie.js.txt

En la parte inicial de nuestra página tenemos que cargar jQuery como el plugin. Para ello utilizaremos las siguientes líneas de código:

<script type="text/javascript" src="jquery-1.2.6.js"></script>
<script type="text/javascript" src="jquery.cookie.js"></script>

Como hemos comentado que la actividad que trazaremos a la cookie va a ser la ocultación o no de texto, crearemos el código necesario para esta actividad. Puedes ver la explicación de este código en Ocultar y mostrar elementos con jQuery. Pero básicamente consistirá en el manejo de las funciones de jQuery: .hide() y .show().

El texto...

 
<div id="msgid1">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus a nunc. Ut ac purus. Mauris tempor, arcu aliquam pulvinar</div>

El código para mostrar y ocultar...

$("#ocultar").click(function(){$("#msgid1").hide("slow")});
$("#mostrar").click(function(){$("#msgid1").show("slow")});

Ahora nos ponemos con la cookie. La variable de la cookie en la que guardaremos la información se llamará "texto" y le asignaremos los valores show o hide. Así, lo primero que haremos es cargar la cookie y ver el valor de la misma. Ya que si el usuario ya ha visitado la página dejaremos el contenido de la misma tal cual lo dejó la última vez.

<script type="text/javascript">
// Recuperamos el valor de la cookie
var texto = $.cookie('texto');
if (texto=='hide')
	$("#msgid1").hide();
</script>

Esta parte del código habrá que ponerla al final de la página, ya que lo que hace es recuperar el valor de la cookie y en el caso de que el valor sea "hide" ocultar el contenido del texto. Y es por ello por lo que necesita que el texto ya se haya cargado en la página.

Vemos que el acceso a la cookie es muy sencillo. Simplemente utilizamos la estructura:

var texto = $.cookie('nombre_cookie');

Para asignar un valor a la cookie simplemente tendremos que utilizar un segundo parámetro con el valor a asignar a la cookie.

$.cookie('nombre_cookie','valor');

La modificación del contenido de la cookie lo haremos cada vez que el usuario modifique la visualización u ocultación del texto. Así ese código quedará de la siguiente forma:

<script type="text/javascript">
$(document).ready(function(){
 $("#ocultar").click(function(){
  $("#msgid1").hide("slow");
  $.cookie('texto','hide');
 });
 
$("#mostrar").click(function(){
  $("#msgid1").show("slow");
  $.cookie('texto','show');
 });
}); 
</script>

Vemos que a la cookie 'texto' le asignamos los valores 'hide' o 'show'.

|- Visualizar el ejemplo
|- Descargar el código
|- Reportar error en el código
|- Foro sobre jQuery

Añadir una fila a una tabla con jQuery Mayo 18, 2009

Publicado por lineadecodigo en : jQuery , 5 comentarios

La idea de este ejemplo es posibilitar el añadir filas a una tabla mediante un botón. Para ello lo primero que hacemos es cargar el framework jQuery

 
<script type="text/javascript" src="jquery.js"></script>

Eso sí, asumiendo que tenemos una tabla en nuestro documento web:

 
<table border="1" id="mitabla">
<tr>
<td>Dato 1.1</td>
<td>Dato 1.2</td>
<td>Dato 1.3</td>
</tr>
<tr>
<td>Dato 2.1</td>
<td>Dato 2.2</td>
<td>Dato 2.3</td>
</tr>
<tr>
<td>Dato 3.1</td>
<td>Dato 3.2</td>
<td>Dato 3.3</td>
</tr>
</table>

Y el botón, claro está:

 
<button id="add">Añadir Fila</button>

Es importante el ID que le demos al botón ya que, será a este ID al que le asignemos la función de añadir la fila a la tabla.

Para poder añadirle la funcionalidad de añadir una fila al botón "add" solamente tenemos que gestionar el evento click.

 
$("#add").click(function() {...}

Ahora vamos a lo verdaderamente interesante del ejemplo. Añadir la funcionalidad que añada la fila a la tabla dentro del evento click.

Lo primero que vamos a recuperar es el número de celdas de la tabla. Ya que añadiremos una fila con el número de celdas que tenga la tabla. Utilizaremos un selector que nos posicione en la última fila de la tabla (tr:last) y en el elemento td, el cual representa la celda. Sobre estos elementos aplicamos el método length para saber el número de celdas

 
var n = $('tr:last td', $("#mitabla")).length;

Ahora que sabemos el número de celdas, creamos una fila de una tabla. Puro HTML:

 
var tds = '
<tr>';
for(var i = 0; i < n; i++){
  tds += '
<td>nuevo</td>
 
';
}
tds += '</tr>
 
';

Solo nos quedará añadir la fila que hemos creado al final de la tabla. Para ello utilizamos el método append(), sobre la tabla:

 
$("#mitabla").append(tds);

Vía: jQuery HowTo

|- Visualizar el ejemplo
|- Descargar el código
|- Reportar error en el código
|- Foro sobre jQuery

Marcar enlaces externos con jQuery Febrero 19, 2009

Publicado por lineadecodigo en : jQuery , Hasta ahora 1 comentario

Cuando creamos una página web tendremos diferentes tipos de enlaces: sobre la misma página, sobre páginas externas, que se abran en el mismo marco, en un marco nuevo,...

Como ayuda visual podemos adjuntar una imagen que denote que el enlace es externo o que se abre en una nueva ventana. Por ejemplo:

Manual Web

Posiblemente, lo más fácil sea crear una clase CSS que nos permita demarcar con un estilo estos tipos de enlaces. Si bien, en ese caso estaremos dejando en manos del desarrollador el acto de marcar con el estilo CSS en enlace.

Por otro lado podemos marcar enlaces externos con jQuery de forma dinámica. Para ello lo primero que vamos a hacer es poner los enlaces en la página:

 
<h1>Marcar enlaces externos</h1>
 
<a href="http://www.google.com" title="Google" target="_blank">Google</a><br/>
<a href="http://lineadecodigo.com" title="Linea de Código">Linea de Código</a><br/>
<a href="http://www.manualweb.net" title="Manual Web" target="_blank">Manual Web</a><br/>
<a href="http://www.w3api.com" title="W3Api" target="_blank">W3Api.com</a>

Es importante que trataremos aquellos que tengan el atributo target con el valor "_blank". Ahora incluiremos el código jQuery que nos detecte estos tipos de enlaces para incorporarles el icono.

Como siempre, incluiremos la función ready() para saber que se ha cargado todo el documento y empezar a manipular la página.

$(document).ready(function(){
 // Código jQuery
});

Lo importante del ejemplo es saber que selector tenemos que utilizar para acceder a los elementos anchor - A con un atributo target igual a "_blank". Para ello indicaremos el nombre del elemento (A) y pondremos el atributo y su valor dentro de un corchete. Quedándonos el siguiente selector:

$("A[target=_blank]")

El método que nos permite insertar código HTML detrás de un elemento con jQuery es .after(). Este método recibe como parámetro el código HTML a insertar. En nuestro caso la carga de una imagen.

Por lo tanto nos quedaría el siguiente código jQuery:

$("a[target=_blank]").after("<img src='new_window.gif' title='new window'/>");

Todo el código jQuery sería el siguiente...

$(document).ready(function(){
  $("a[target=_blank]").after("<img src='new_window.gif' title='new window'/>");
});

... como se puede apreciar, poco código para un gran efecto.

|- Visualizar el ejemplo
|- Descargar el código
|- Reportar error en el código
|- Foro sobre jQuery

Ocultar y mostrar elementos con jQuery Febrero 5, 2009

Publicado por lineadecodigo en : jQuery , 14 comentarios

Ocultar y mostrar elementos nos permitirá un gran dinamismo dentro de nuestras páginas web. Esto lo podremos hacer modificando las propiedades CSS de los elementos dinámicamente con JavaScript. jQuery nos ayudará a realizar esta tarea de una forma más sencilla. Si queremos ocultar y mostrar elementos con jQuery podemos apoyarnos en las funciones show y hide.

En nuestro ejemplo la página se compondrá de una capa con el texto y dos botones, a los que asignaremos la propiedades de ocultar y mostrar elementos. Nuestro código HTML es el siguiente:

<button id="ocultar">Ocultar Texto</button>
<button id="mostrar">Mostrar Texto</button>
<div id="msgid1">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus a nunc. Ut ac purus. Mauris tempor, arcu aliquam pulvinar elementum, sapien pede consequat lectus, id lobortis justo mi nec eros. Integer condimentum leo at risus. Aenean vel mauris eget lectus condimentum laoreet. Duis dictum. Etiam mattis pretium metus. Vestibulum diam lectus, egestas in, semper consectetur, iaculis et, arcu. Integer ut lacus. Curabitur tempus nibh. Vivamus consectetur velit eget nulla. Sed at libero sit amet nulla commodo suscipit. Nunc elementum. Mauris magna lorem, tristique et, semper a, feugiat pulvinar, eros. Mauris lacus velit, vehicula ut, faucibus porttitor, ultrices id, ipsum. Vivamus ligula sem, interdum et, porttitor nec, commodo eu, odio. Nullam id lacus. Donec feugiat adipiscing dui. Nullam lobortis mi ac sem.</div>

Ahora vamos con el código jQuery. Lo que haremos será gestionar el evento click de los botones y asignarles la función que nos permite ocultar y mostrar elementos con jQuery.

$("#ocultar").click();
$("#mostrar").click();

Accedemos a los botones mediante su id y anteponiéndolos la almohadilla (#).

Como hemos comentado antes las funciones para ocultar y mostrar elementos con jQuery son hide y show, las cuales asignaremos a los botones #ocultar y #mostrar respectivamente. Ambas funciones tienen la siguiente sintaxis:

hide (velocidad, funcion_callback);
show (velocidad, funcion_callback);

La velocidad tendrá el valor de la velocidad con la que queremos que se muestren u oculten las cosas. Los valores posibles son: slow, normal y fast o bien los milisegundos que queremos que se tarde. Por otro lado la funcion_callback será la función a la cual queremos llamar al acabar de ejecutar la función show o hide. El parámetro de funcion_callback es opcional.

De esta manera nuestro código para ocultar y mostrar elementos con jQuery sería de la siguiente forma:

$("#ocultar").click(function(){$("#msgid1").hide("slow")});
$("#mostrar").click(function(){$("#msgid1").show("slow")});

Solo nos quedará ponerlo dentro de la función ready(), básica para jQuery.

$(document).ready(function(){
 $("#ocultar").click(function(){$("#msgid1").hide("slow")});
 $("#mostrar").click(function(){$("#msgid1").show("slow")});
});

|- Descargar el código
|- Reportar error en el código
|- Foro sobre jQuery

Linea de Codigo

Categorías

Línea de Código en las Redes Sociales

Entradas Recientes

Enlaces

Java

Programacion

Ultimas preguntas de los foros

Y que contamos en aulambra.com

Archivo

Meta

Feeds

Evitar que se ejecute un evento con jQuery Junio 11, 2010

Cambiar el target de los enlaces con jQuery Junio 10, 2010

Modificar el contenido de una capa con jQuery Mayo 27, 2010

Cargar contenido con el scroll usando jQuery Mayo 24, 2010

Repaginar con jQuery y AJAX Febrero 1, 2010

Peticiones AJAX con jQuery Enero 6, 2010

Usando cookies con jQuery Diciembre 28, 2009

Añadir una fila a una tabla con jQuery Mayo 18, 2009

Marcar enlaces externos con jQuery Febrero 19, 2009

Ocultar y mostrar elementos con jQuery Febrero 5, 2009

Linea de Codigo

Categorías

Línea de Código en las Redes Sociales

Entradas Recientes

Etiquetas

Enlaces

Java

Programacion

Ultimas preguntas de los foros

Y que contamos en aulambra.com

Archivo

Meta

Feeds

Evitar que se ejecute un evento con jQuery Junio 11, 2010

Cambiar el target de los enlaces con jQuery Junio 10, 2010

Modificar el contenido de una capa con jQuery Mayo 27, 2010

Cargar contenido con el scroll usando jQuery Mayo 24, 2010

Repaginar con jQuery y AJAX Febrero 1, 2010

Peticiones AJAX con jQuery Enero 6, 2010

Usando cookies con jQuery Diciembre 28, 2009

Añadir una fila a una tabla con jQuery Mayo 18, 2009

Marcar enlaces externos con jQuery Febrero 19, 2009

Ocultar y mostrar elementos con jQuery Febrero 5, 2009