Jquery para principianes

10,084 views
9,924 views

Published on

Jquery para principianes
JQUERY
AJAX ENVIAR FORMULARIOS SIN RECARGAR
ACTUALIZAR UN ELEMENTO SIN RECARGAR
COMBOS DEPENDIENTES AJAX BASE DE DATOS
STAR RATING JQUERY SIN BASE DE DATOS
STAR RATING JQUERY PLUGIN
DROPDOWN MENU DESPLEGABLE
ENVIA CORREOS SIN RECARGAR
PANEL DE IMAGENES CAROUSEL
INTERCAMBIO DE ELEMENTOS ENTRE 2 LISTAS
RECARGAR TEXTO AUTOMATICAMENTE
AGREGAR GRAFICOS ESTADISTICOS PIE
VALIDAR FORMULARIOS
INCLUIR TOOLTIP EN MAPA DE IMÁGENES
SUBIR MULTIPLES ARCHIVOS
WEB MODULAR PHP
SLIDER CONTENIDO DESTACADO
VENTANA MODAL
AGREGAR BORRAR CAMPOS
MODIFICANDO ATRIBUTOS
JQUERY MUSIC PLAYER
OCULTAR /MOSTRAR SECCIONES DE NUESTRO SITIO

Published in: Technology
3 Comments
3 Likes
Statistics
Notes
  • 240 ejemplos de JQuery :
    http://tueno2010.blogspot.com/2010/10/240-plug-in-de-jquery.html
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Hola Raul siento, que hasta hoy pueda ver tu comentario pero si me facilitas el formulario con mucho gusto tratare de encontrar y solucionar el error puedes buscarme en http://ingeniods.wordpress.com
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Hola, muy bueno y útil el material publicado. Utilizo en un sitio que estoy desarrollando, el plugin para 'subir múltiples archivos'. Todo funciono a la perfección mientras el navegador utilizado era IE 8, pero cuando las pruebas se hicieron en FF dejo de funcionar en dicho navegador. E l tema es así, un formulario con dos input file class multi-es, como debe ingresar por lo menos una imagen en cada input, hice un control en js donde comprobar la cantidad de elementos del array correspondiente al input. Aquí comienza el problema, la primera vez valida correctamente la cantidad de elementos del array como mayor quer cero, ya que se selecciono un archivo como mínimo. Pero si el otro input file del formulario esta vaci, da el error de que debe seleccionarse por lomenos una págia. Cuando selecciono una imagen el el input vacio y boro la seleccionada en el otro no hace el chequeo, es más ni controla ningunode os demas campos del for, texto, selecta, etc. Lo anterior por un lado, pero si selecciono imágenes en los dos input y ejecuto el submit, al controlar la cantidad de elementos del array del input, este está vacio, no tiene elementos
    Si alguien pudiera darme alguna pista, le estaría muy agradecido desde ya
    Cordiales saludos Raúl
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
No Downloads
Views
Total views
10,084
On SlideShare
0
From Embeds
0
Number of Embeds
1,268
Actions
Shares
0
Downloads
461
Comments
3
Likes
3
Embeds 0
No embeds

No notes for slide

Jquery para principianes

  1. 1. Contenido JQUERY AJAX ENVIAR FORMULARIOS SIN RECARGAR ACTUALIZAR UN ELEMENTO SIN RECARGAR COMBOS DEPENDIENTES AJAX BASE DE DATOS STAR RATING JQUERY SIN BASE DE DATOS STAR RATING JQUERY PLUGIN DROPDOWN MENU DESPLEGABLE ENVIA CORREOS SIN RECARGAR PANEL DE IMAGENES CAROUSEL INTERCAMBIO DE ELEMENTOS ENTRE 2 LISTAS RECARGAR TEXTO AUTOMATICAMENTE AGREGAR GRAFICOS ESTADISTICOS PIE VALIDAR FORMULARIOS INCLUIR TOOLTIP EN MAPA DE IMÁGENES SUBIR MULTIPLES ARCHIVOS WEB MODULAR PHP SLIDER CONTENIDO DESTACADO VENTANA MODAL AGREGAR BORRAR CAMPOS MODIFICANDO ATRIBUTOS JQUERY MUSIC PLAYER OCULTAR /MOSTRAR SECCIONES DE NUESTRO SITIO
  2. 2. JQUERY jQuery es una biblioteca o framework de Javascript, creada inicialmente por John Resig, que permite simplificar la manera de interactuar con los documentos HTML, manipular el arbol DOM, manejar eventos, desarrollar animaciones y agregar interacción con la tecnología AJAX a páginas web. Fue presentada el 14 de enero de 2006 en el BarCamp NYC. jQuery es software libre y de código abierto, posee un doble licenciamiento bajo la licencia MIT y de la GNU General Public License, Versión 2.1 jQuery, al igual que otras bibliotecas, ofrece una serie de funcionalidades basadas en Javascript que de otra manera requerirían de mucho más código. Es decir, con las funciones propias de esta biblioteca se logran grandes resultados en menos tiempo y espacio. Las empresas Microsoft y Nokia anunciaron que incluirán la biblioteca en sus plataformas.2Microsoft la añadirá en su IDE Visual Studio3 y la usará junto con los frameworks ASP.NET AJAX y ASP.NET MVC, mientras que Nokia los integrará con su plataforma Web Run-Time. Características Selección de elementos DOM. Interactividad y modificaciones del árbol DOM, incluyendo soporte para CSS 1-3 y un plugin básico de XPath. Eventos. Manipulación de la hoja de estilos CSS. Efectos y animaciones. AJAX. Soporta extensiones. Utilidades varias como obtener información del navegador, operar con Objetos y Arrays, función trim() (elimina los espacios en blanco del principio y final de una cadena de caracteres), etc. Compatible con los navegadores Firefox 2.0+, Internet Explorer 6+, Safari 2.0.2+, Opera 9+ y Google Chrome. AJAX ENVIAR FORMULARIOS SIN RECARGAR Como verás a continuación el formulario no tiene nada de especial, es igual que cualquier otro, además hay un div con el id “result” que es donde mostraremos el resultado de lo que enviemos. 1 <form method="post" action="envio.php" id="fo3" name="fo3" > 2 <fieldset> 3 <legend>Perfil</legend> 4 <ol> 5 <li><label>Nombres:</label><input type="text" size="30" name="fnombres" /></li> 6 <li><label>Apellidos:</label><input type="text" size="30" name="fapellidos" /></li> 7 <li><label>Correo:</label><input type="text" size="30" name="fcorreo" /></li> 8 </ol> 9 <input type="submit" name="mysubmit" value="Enviar" /> 10 </fieldset> 11 </div> 12 </form> 13 <div id="result"></div>
  3. 3. Implementando AJAX Ahora viene la parte novedosa del script, jquery intercepta el evento submit y envía el formulario sin recargar la página. 1 <script language="javascript" src="jquery-1.3.min.js"></script> 2 <script language="javascript"> 3 $(document).ready(function() { 4 // Esta primera parte crea un loader no es necesaria 5 $().ajaxStart(function() { 6 $('#loading').show(); 7 $('#result').hide(); 8 }).ajaxStop(function() { 9 $('#loading').hide(); 10 $('#result').fadeIn('slow'); 11 }); 12 // Interceptamos el evento submit 13 $('#form, #fat, #fo3').submit(function() { 14 // Enviamos el formulario usando AJAX 15 $.ajax({ 16 type: 'POST', 17 url: $(this).attr('action'), 18 data: $(this).serialize(), 19 // Mostramos un mensaje con la respuesta de PHP 20 success: function(data) { 21 $('#result').html(data); 22 } 23 }) 24 return false; 25 }); 26 }) 27 </script> ACTUALIZAR UN ELEMENTO SIN RECARGAR Ahora que está muy de moda la web, muchos aplicaciones requieren por rapidez y estética se recarguen elementos, que aparezcan mensajes, etc y todo sin recargar la página para eso se puede usar complicados y confusos códigos AJAX o DOM pero es preferible usar un método más simple con Jquery. Actualizar Un Elemento Sin Recargar Usando AJAX Para eso vamos a crear DIV con el id “recargado” donde vamos a llamar el resultado de un archivo PHP, que podría ser la invocación a una base de datos, un mensaje, validación, prácticamente cualquier cosa que haga PHP y por supuesto sin recargar la página 1 <div id="recargado">Mi texto sin recargar</div> 2 <p align="center"> 3 <a href="#" onclick="javascript:recargar();">recargar</a> 4 </p> Implementando JQUERY Luego de incluir la libreria jquery 1 <script language="javascript" src="js/jquery-1.2.6.min.js"></script> Escribimos nuestro código que se ejecutará cuando demos click al link “recargar” 1 <script language="javascript"> 2 function recargar(){ 3 /// Aqui podemos enviarle alguna variable a nuestro script PHP 4 var variable_post="Mi texto recargado"; 5 /// Invocamos a nuestro script PHP
  4. 4. 6 $.post("miscript.php", { variable: variable_post }, function(data){ 7 /// Ponemos la respuesta de nuestro script en el DIV recargado 8 $("#recargado").html(data); 9 }); 10 } 11 </script> COMBOS DEPENDIENTES, AJAX + BASE DE DATOS ¿Cómo Me Conecto A La Base De Datos? Lo primero es conectarnos a la base de datos y buscar el elemento seleccionado en el combo y según eso llenar el otro combo por una cuestión de comodidad voy a usar una clase que se encargue de dicha conexión, puedes descargarla y ver cómo funciona aquí ¿Cómo Busco Los Datos? Para eso hay que usar una consulta sql como esta: “SELECT * FROM ciudad WHERE pais_id LIKE „$_POST[elegido]„” La consulta obviamente varía de acuerdo a nuestra base de datos, para este ejemplo estamos usando una base de datos con las tablas continente, pais y ciudad Combo1.Php Y Combo2.Php El script para ambos similar, lo único que varía es la consulta sql 1 <?php 2 // Incluimos la configuración de la conexión de base de datos 3 include("includes/config.inc.php"); 4 include("includes/mysql.class.php"); 5 // Creamos la conexión 6 $db = new MySQL(); 7 // Abrimos la conexión 8 $db->open(); 9 // Ejecutamos la consulta sql 10 $consulta = $db->consulta("SELECT * FROM pais WHERE continente_id LIKE '$_POST[elegido]'"); 11 // Creamos un array para mostrar los datos del combo 12 if ($row = $db->fetch_array($consulta)) { 13 do { 14 echo 15 '<option value="'.$row['pais_id'].'">'.$row['pais_name'].'</option>'; 16 }while($row = $db->fetch_array($consulta)); 17 } 18 ?> STAR RATING SIN BASE DE DATOS 1 Para la parte del css nos hemos basado en el código de Komodo Media, el cual pueden encontrar aqui Lo interesante de este script es que se usa jquery y se guarda la votación en un archivo de texto y así ya no se requiere una base de datos. El Diseño Las instrucciones detalladas las pueden encontrar en Komodo Media, así que nos limitaremos a copiar el código del formulario.
  5. 5. 1 <form name="frm_rating" method="post" action="index.php"> 2 <ul class='star-rating'> 3 <li class='current-rating' style='width:<?php echo 25 * round($promedio);?>px;'>Currently 3.5</li> 4 <li class="star"><a href='#' title='1' class='one-star'>1</a></li> 5 <li class="star"><a href='#' title='2' class='two-stars'>2</a></li> 6 <li class="star"><a href='#' title='3' class='three-stars'>3</a></li> 7 <li class="star"><a href='#' title='4' class='four-stars'>4</a></li> 8 <li class="star"><a href='#' title='5' class='five-stars'>5</a></li> 9 <li class="star"><a href='#' title='6' class='six-stars'>6</a></li> 10 </ul> 11 <input type="hidden" name="my_vote" value="0" id="my_vote" /> 12 <input type="submit" name="submit" value="Votar" /> 13 </form> La hoja de estilos y el grafico de las estrellas lo encuentran en el archivo zip al final del tutorial. AJAX Ahora necesito que cuando se le de click a una estrella, esta se marque y el valor del campo hiddden “my_vote” se modifique, para eso voy a hacer un simple javascript invocando mi libreria jquery: 1 <script language="javascript" src="jquery-1.2.6.min.js"></script> 2 <script language="javascript"> 3 $(document).ready(function(){ 4 // Detecto la estrella que es presionada 5 $("li.star a").click(function(event){ 6 // Recojo el valor de la estrella 7 valor_actual=$(this).attr("title"); 8 // Cambio el estilo para mostrar la estrella seleccionada 9 $("li.current-rating").css("width", valor_actual*25); 10 // Cambio el valor del campo hidden 11 $("#my_vote").attr("value", valor_actual); 12 }); 13 }); 14 </script> Ya tenemos las estrellas, también se marcan las estrellas, ahora nos falta guardar la votación <h2>Guardar la votación</h2> Para eso debemos crear un archivo llamado datos.txt y deben asegurarnos que sea escribible, el código php requerido es:
  6. 6. 1 // Verificamos si se ha votado 2 if (isset($_POST['my_vote'])) { 3 Abrimos el archivo datos.txt 4 $filename = 'datos.txt'; 5 // Capturamos el valor del voto 6 $somecontent = $_POST['my_vote']."n"; 7 // Verificamos que nuestro archivo sea escribible 8 if (!$handle = fopen($filename, 'a')) { 9 echo "Cannot open file ($filename)"; 10 exit; 11 } 12 // Escribimos $somecontent en nuestro archivo 13 if (fwrite($handle, $somecontent) === FALSE) { 14 // Marcamos error de escritura 15 echo "Cannot write to file ($filename)"; 16 exit; 17 } 18 // El archivo se escribio correctamente y lo cerramos 19 fclose($handle); 20 } 21 //abro el archivo para lectura 22 $archivo = fopen ("datos.txt", "r"); 23 $num_lineas = 0; 24 while (!feof ($archivo)) { 25 // Leo linea por linea las votaciones pasadas 26 if ($linea = fgets($archivo)){ 27 // Guardo la cantidad de votaciones y sus valores 28 $num_lineas++; 29 $valores[$num_lineas]=$linea; 30 } 31 } 32 fclose ($archivo); 33 //print_r($valores); 34 // Calculo el total 35 $total=0; 36 for ($i=1; $i<j;=$num_lineas; $i++) { 37 $total=$total+$valores[$i]; 38 } 39 // Hallo el promedio y lo redondeo 40 $promedio=$total/$num_lineas; 41 echo "total: ".round($promedio); 42 ?>; STAR RATING JQUERY PLUGIN Anteriormente vimos un star rating sin base de datos para sistemas pequeños, pero para sistemas más grandes se recomienda usar este plugin jquery. Basado en el simple star rating plugin jquery modificándolo para agregarle algunas características que le hacían falta como son: que el rating reciba la respuesta usando ajax y que además se pueda enviar como parámetro un id, esto es útil para guardar el voto en una base de datos e identificar por que item estoy votando. El código es muy simple de implementar, en el html pones: 1 <div id="star1" class="rating">&nbsp;</div> Y para el código javascript: 1 <script type="text/javascript"> 2 $(document).ready(function() { 3 $('#star1').rating('votar.php', {maxvalue: 5, curvalue:1, id:20}); 4 }); 5 </script>
  7. 7. ¿Qué Significan Esos Parámetros? votar.php es el nombre del script que va a capturar el voto usando POST maxvalue: es la cantidad de estrellas curvalue: es el valor actual (opcional) id: es el identificador (opcional) ¿Cómo Funciona? El valor seleccionado y el id (si es que lo hemos definido) son enviados al script votar.php (o al que elijamos), en ese script podemos guardar el voto en una base de datos, los parametros son recibidos como $_POST['rating'] y $_POST['id'] DROPDOWN MENU DESPLEGABLE AJAX En esta parte crearemos un menú desplegable de múltiples niveles, es decir el menu, submenu, los submenus de ese submenu y así sucesivamente y todo eso usando jquery. Creando El Menu Primero hay que definir el menu con sus respectivos submenu para eso voy a crear un grupo de ul y li dentro un div contenedor llamado “menu” 1 <div id="menu"> 2 <ul id="nav"> 3 <li><a href="#">Inicio</a></li> 4 <li><a href="#">Servicios</a> 5 <ul class="submenu"> 6 <li><a href="#">Marketing</a> 7 <ul class="subsubmenu"> 8 <li><a href="#">Precios</a></li> 9 <li><a href="#">Consultas</a></li> 10 </ul> 11 </li> 12 <li><a href="#">Mercadotecnia</a></li> 13 <li><a href="#">Encuestas</a></li> 14 </ul> 15 </li> 16 <li><a href="#">Nosotros</a> 17 <ul class="submenu"> 18 <li><a href="#">Vision</a></li> 19 <li><a href="#">Mision</a></li> 20 </ul> 21 </li> 22 <li><a href="#">Otros</a></li> 23 <li><a href="#">Contactanos</a></li> 24 </ul> 25 </div> Jquery Para El Menu Ajax Voy a usar una función muy sencilla que se va a encargar de mostrar los submenus 1 <script type="text/javascript"> 2 function mainmenu(){ 3 // Oculto los submenus 4 $(" #nav ul ").css({display: "none"}); 5 // Defino que submenus deben estar visibles cuando se pasa el mouse por encima 6 $(" #nav li").hover(function(){ 7 $(this).find('ul:first:hidden').css({visibility: "visible",display: "none"}).slideDown(400); 8 },function(){ 9 $(this).find('ul:first').slideUp(400);
  8. 8. 10 }); 11 } 12 $(document).ready(function(){ 13 mainmenu(); 14 }); 15 </script> La Hoja De Estilos Del Dropdown He diseñado una hoja de estilos que puedas modificar fácilmente tanto para el menu, submenu y en segundo submenu pero recuerda que puedes crear cualquier cantidad de submenús 1 * { padding:0px; margin:0px; } 2 body { font-family:Verdana, Arial, Helvetica, sans-serif; font-size:12px; color:#333333; } 3 #menu { 4 background-image:url(nav_bg.png); 5 background-repeat:repeat-x; 6 height:30px; width:500px; 7 margin:auto; padding-left:70px; } 8 #nav { list-style:none; } 9 #nav li { 10 float:left; background-image:url(nav_li_bg.png); 11 background-repeat:no-repeat; 12 background-position:right; } 13 #nav li a { 14 display:block; padding:7px 10px; 15 text-decoration:none; color:#CCCCCC; 16 font-weight:bold; 17 } 18 #nav li a:hover { color:#FFFFFF; } 19 /* Submenu */ 20 #nav ul.submenu { 21 border:1px solid #000000; 22 padding:5px; position:absolute; 23 list-style:none; 24 background-color:#333333; 25 } 26 #nav ul.submenu li { 27 float:none; background-image:none; 28 border-bottom:1px solid #999999; 29 width:200px; 30 } 31 /* Subsubmenu */ 32 #nav ul.subsubmenu { 33 border:1px solid #000000; 34 padding:5px; position:absolute; 35 list-style:none; 36 background-color:#333333; 37 margin-left:150px; 38 margin-top:-30px; 39 } 40 #nav ul.subsubmenu li { 41 float:none; 42 background-image:none; 43 border-bottom:1px solid #999999; 44 min-width:200px; 45 }
  9. 9. ENVIA CORREOS SIN RECARGAR El formulario no tiene nada de especial, sólo debemos asegurarnos que tenga como id “myform”, además necesitamos 2 divs en uno mostraremos el resultado y el otro nos servirá como loader. 1 <form method="post" action="envio.php" id="myform" name="myform" > 2 <fieldset id="form"> 3 <legend>Send Email</legend> 4 <ol> 5 <li><label>Name:</label><input type="text" size="30" name="fname" /></li> 6 <li><label>E-mail:</label><input type="text" size="30" name="femail" /></li> 7 <li><label>Phone:</label><input type="text" size="30" name="fphone" /></li> 8 <li><label>Comments:</label><textarea name="fcomment" rows="5" cols="25"></textarea></li> 9 </ol> 10 <p align="center"> 11 <input type="submit" name="mysubmit" value="Enviar" /> 12 </p> 13 </fieldset> 14 </div> 15 </form> 16 <div id="loading"></div> 17 <div id="result"></div> Ajax Para El Envio Del Formulario En este caso vamos a usar jquery para que envié los datos del formulario a envio.php, el cual a su vez enviará un correo electrónico 1 <script language="javascript" src="jquery-1.3.min.js"></script> 2 <script language="javascript"> 3 $(document).ready(function() { 4 // Mostramos el loader 5 $().ajaxStart(function() { 6 $('#loading').show(); 7 $('#result').hide(); 8 }).ajaxStop(function() { 9 $('#loading').hide(); 10 $('#result').fadeIn('slow'); 11 }); 12 // Enviamos el formulario 13 $('#myform').submit(function() { 14 // Definimos el metodo ajax, los datos 15 $.ajax({ 16 type: 'POST', 17 url: $(this).attr('action'), 18 data: $(this).serialize(), 19 success: function(data) { 20 // Imprimimos la respuesta en el div result 21 $('#result').html(data); 22 23 } 24 }) 25 26 return false; 27 }); 28 }) 29 </script> Envio.php Ahora vamos a hacer el envió de un correo electrónico con los datos del formulario 1 <? 2 // definimos el mensaje
  10. 10. 3 $mensaje=""; 4 $mensaje.="Contact from:". "nn"; 5 $mensaje.="Name: ".$_POST['fname']."n"; 6 $mensaje.="E-mail: ".$_POST['femail']."n"; 7 $mensaje.="Phone: ".$_POST['fphone']."n"; 8 $mensaje.="Comments: ".$_POST['fcomment']."n"; 9 // definimos a quien se lo enviamos 10 $email_destiny="mio@mail.com"; 11 $subject="Message from us"; 12 // verificamos si se envió 13 if (mail($email_destiny,$subject,$mensaje,"From: Contact<".$_POST['femail'].">")) { 14 echo '<p align="center"><b>Thanks for your comments</b></p>'; 15 } else { 16 echo '<p align="center">Error '.$_POST['fname'].'</p>'; 17 } 18 ?> PANEL DE IMAGENES CAROUSEL JQUERY Seguro hemos visto en varias páginas galerías de imagen con un scroll horizontal o vertical, no es complicado diseñarlas usando ajax, y con la ayuda de jquery y un plugin llamado jcarousel. La forma de implementarlo es sencilla, ya que el plugin se encarga de la mayoría de cosas Implementación De La Galería Probemos con el ejemplo más simple para implementar carousel 1 <ul id="mycarousel" class="jcarousel-skin-tango"> 2 <li><img src="http://static.flickr.com/66/199481236_dc98b5abb3_s.jpg" width="75" height="75" alt="" /></li> 3 <li><img src="http://static.flickr.com/75/199481072_b4a0d09597_s.jpg" width="75" height="75" alt="" /></li> 4 <li><img src="http://static.flickr.com/57/199481087_33ae73a8de_s.jpg" width="75" height="75" alt="" /></li> 5 <li><img src="http://static.flickr.com/77/199481108_4359e6b971_s.jpg" width="75" height="75" alt="" /></li> 6 <li><img src="http://static.flickr.com/58/199481143_3c148d9dd3_s.jpg" width="75" height="75" alt="" /></li> 7 <li><img src="http://static.flickr.com/72/199481203_ad4cdcf109_s.jpg" width="75" height="75" alt="" /></li> 8 <li><img src="http://static.flickr.com/58/199481218_264ce20da0_s.jpg" width="75" height="75" alt="" /></li> 9 <li><img src="http://static.flickr.com/69/199481255_fdfe885f87_s.jpg" width="75" height="75" alt="" /></li> 10 <li><img src="http://static.flickr.com/60/199480111_87d4cb3e38_s.jpg" width="75" height="75" alt="" /></li> 11 <li><img src="http://static.flickr.com/70/229228324_08223b70fa_s.jpg" width="75" height="75" alt="" /></li> 12 </ul> Cada elemento del li es la imagen que vamos a mostrar en el carousel, también debemos fijarnos bien en el id del ul y la clase Jquery Ajax Debemos llamar a jquery, el plugin y activarlo 1 <script type="text/javascript" src="../lib/jquery-1.2.3.pack.js"></script> 2 <script type="text/javascript" src="../lib/jquery.jcarousel.pack.js"></script> 3 <script type="text/javascript"> 4 jQuery(document).ready(function() { 5 jQuery('#mycarousel').jcarousel(); 6 }); 7 </script>
  11. 11. Estilos Del Carousel El creador del plugin nos da algunos estilos para aplicarle a carousel que podemos cambiarlos a nuestro gusto 1 <link rel="stylesheet" type="text/css" href="../lib/jquery.jcarousel.css" /> 2 <link rel="stylesheet" type="text/css" href="../skins/tango/skin.css" /> INTERCAMBIO DE ELEMENTOS ENTRE 2 LISTAS Este es un script que fácilmente puede modificarse para crear un carrito de compras, un sistema de widgets como el de wordpress entre otras opciones. Realizaremos uno genérico para que sea de mas fácil modificación. Las Listas El código de las listas no tiene nada especial, sólo debemos asegurarnos que los id sean correctos 1 <div id="demo-frame"> 2 <ul id="lista1" class="gallery"> 3 <li>Item1</li> 4 <li>Item2</li> 5 <li>Item3</li> 6 <li>Item4</li> 7 </ul> 8 <ul id="lista2"> 9 <li>Item5</li> 10 <li>Item6</li> 11 <li>Item7</li> 12 </ul> 13 </div> Estilo De Las Listas Usaremos un estilo simple en las listas, haciéndolas flotar para que este una al lado de la otra además de agregarle una altura mínima para cuando no tenga elementos la lista. 1 body { 2 color: #333333; 3 } 4 #lista1, #lista2 { 5 width:200px; 6 border:1px solid #990000; 7 height:auto; 8 float:left; 9 margin-right:5px; 10 } Jquery Para Las Listas Ahora si vamos a la parte importante del código, básicamente lo que hay que hacer es que ambas listas tengan activo dragable y acepten el drop de la otra lista; además debo hacer que al recibir el drop se agregue el item correspondiente y se borre de la lista de donde proviene. Es posible añadir más opciones como cambiar el estilo entre listas o que el item cambie de forma, etc. Todo es cosa de jugar un poco con el código. 1 <script language="javascript" src="js/jquery-1.3.1.min.js"></script> 2 <script language="javascript" src="js/jquery-ui-personalized-1.6rc6.min.js"></script> 3 <script language="javascript"> 4 $(document).ready(function(){ 5 // para ahorrar un poco de espacio voy a definir a las listas como variables
  12. 12. 6 var $lista1 = $('#lista1'), $lista2 = $('#lista2'); 7 // Activo draggable a la primera lista 8 $('li',$lista1).draggable({ 9 revert: 'invalid', 10 helper: 'clone', 11 cursor: 'move' 12 }); 13 // asigno droppable en la lista1 hacia la lista2 14 $lista1.droppable({ 15 accept: '#lista2 li', 16 drop: function(ev, ui) { 17 // Al hacer drop se borra el elemento 18 deleteLista2(ui.draggable); 19 } 20 }); 21 // Asigno draggable a la lista2 22 $('li',$lista2).draggable({ 23 revert: 'invalid', 24 helper: 'clone', 25 cursor: 'move' 26 }); 27 // Genero droppable para la segunda lista 28 $lista2.droppable({ 29 accept: '#lista1 > li', 30 drop: function(ev, ui) { 31 deleteLista1(ui.draggable); 32 } 33 }); 34 // Genero el borrado de items con el evento drop 35 function deleteLista1($item) { 36 $item.fadeOut(function() { 37 // Agrego el item dropeado y lo hago aparecer 38 $($item).appendTo($lista2).fadeIn(); 39 }); 40 $item.fadeIn(); 41 } 42 function deleteLista2($item) { 43 $item.fadeOut(function() { 44 /// Agrego el item dropeado y lo hago aparecer 45 $item.appendTo($lista1).fadeIn(); 46 }); 47 } 48 }); 49 </script> Y eso es todo el código para la forma más simple de intercambiar items entre listas, se le pueden añadir muchas más opciones como nos muestra la documentación del Jquery UI Sobre Jquery UI Para el ejemplo he usado Jquery 1.3.1 y JqueryUI 1.6rc6, si deseas usar una versión de Jquery 1.6.x, debes usar Jquery UI 1.5 de lo contrario no funcionará, la programación funciona en ambas versiones sin ningún cambio eso por un cambio que hizo jquery en el manejo de eventos drag and drop. RECARGAR TEXTO AUTOMATICAMENTE Con la ayuda de jquery es muy fácil recargar un texto ya sea que lo invoquemos de una base de datos o de un array, para este ejemplo voy a usar un array generado por un archivo PHP; y voy a usar un set_interval de javascript para que se recargue automaticamente cada cierto tiempo. El Html Para Recargar Mi codigo html se limita a crear un div donde recargar el texto
  13. 13. 1 <body> 2 <div id="recargado">Mi texto sin recargar</div> 3 </body> El Javascript Para Recargar 1 <script language="javascript" src="js/jquery-1.2.6.min.js"></script> 2 <script language="javascript"> 3 function recargar(){ 4 // Limita el contador a solo 5 elementos 5 if ($actual<=5) { 6 $actual=$actual+1; 7 } else { 8 $actual=1; 9 } 10 // Setea la variable que vamos a enviar a php 11 var variable_post=$actual; 12 // Enviamos los valores a miscript.php 13 $.post("miscript.php", { variable: variable_post }, function(data){ 14 /// Actualizamos el div recargado 15 $("#recargado").html(data); 16 }); 17 } 18 $actual=0; 19 // Establecemos el temporizador a 2 segundos 20 timer = setInterval("recargar()", 2000); 21 </script> Miscript.Php Este script puedes cambiarlo por una conexion de base de datos, para el ejemplo yo uso un simple array con los mensaje <?php 1 // Creo el array 2 $mensajes=array("0", "Mi primer mensaje", "2do mensaje", "un tercer mensaje", "cuarto Mensaje", "5to 3 mensaje"); 4 // Busco el elemento seleccionado 5 $nro=$_POST['variable']; 6 // Muestro el mensaje 7 echo $mensajes[$nro]; 8 ?> AGREGAR GRAFICOS ESTADISTICOS PIE Existe un plugin para jquery que nos permite hacer gráficos de barras usando CANVAS, puedes descargar el plugin de aqui recuerda que canvas aun no es soportado por IE, por lo que para hacerlo compatible deberás usar una script.js que te permita usar Explorer Canvas para hacerlo compatible. El funcionamiento del script es muy sencillo, solo debes tener todos tus datos en una tabla y el plugin se encarga del resto con una sola linea, además es posible elegir multiples estilos de gráficos pie, bar, área, line, stacked bar. Codigo Html De Los Graficos Estadisticos Como ya dije solo debes ingresar tus datos mediante una tabla simple 1 <table id="dataTable" summary="Member Data from 2000 to 2006"> 2 <caption>Member Data from 2000 to 2006</caption> 3 <thead> 4 <tr> 5 <td></td> 6 <th id="2000">2000</th>
  14. 14. 7 <th id="2001">2001</th> 8 <th id="2002">2002</th> 9 <th id="2003">2003</th> 10 <th id="2004">2004</th> 11 </tr> 12 </thead> 13 <tfoot> 14 15 </tfoot> 16 <tbody> 17 <tr> 18 <th headers="members">Mary</th> 19 <td headers="2000">150</td> 20 <td headers="2001">160</td> 21 <td headers="2002">40</td> 22 <td headers="2003">120</td> 23 <td headers="2004">30</td> 24 </tr> 25 <tr> 26 <th headers="members">Tom</th> 27 <td headers="2000">3</td> 28 <td headers="2001">40</td> 29 <td headers="2002">30</td> 30 <td headers="2003">45</td> 31 <td headers="2004">35</td> 32 </tr> 33 <tr> 34 <th headers="members">Brad</th> 35 <td headers="2000">10</td> 36 <td headers="2001">00</td> 37 <td headers="2002">10</td> 38 <td headers="2003">85</td> 39 <td headers="2004">25</td> 40 </tr> 41 <tr> 42 <th headers="members">Kate</th> 43 <td headers="2000">40</td> 44 <td headers="2001">80</td> 45 <td headers="2002">90</td> 46 <td headers="2003">25</td> 47 <td headers="2004">15</td> 48 </tr> 49 </tbody> 50 </table> Luego debes definir el espacio donde estará ubicado el canvas 1 <canvas id="chart1" class="fgCharting_src-dataTable_type-pie" width="400" height="400"></canvas> Fijate bien en la clase ya que esta te permitirá elegir el tipo de grafico a representar, en los estilos también asegurate de usar un tamaño de letra pequeño para el body ya que de lo contrario podría deformarse el grafico. AJAX – Jquery Finalmente dibujamos el grafico estadistico con una sola linea de codigo 1 $.fgCharting();
  15. 15. VALIDAR FORMULARIOS Siempre que hacemos un formulario, necesitamos un script de validación, el problema es siempre tener un script que sea fácil de usar, lo suficientemente flexible para que funcione en cualquier formulario y que sea personalizable, encuentralo justamente eso. HTML De Formulario Para Validar Solo debemos fijarnos bien en el id del formulario y para los campos que deseamos validar agregar una clase required, email, etc 1 <form name="comentariosFrm" id="comentariosFrm" method="post" action=""> 2 <ol> 3 <li> 4 <label>Nombre: (requerido al menos dos caracteres)</label> 5 <input id="cname" name="name" class="required" minlength="2" /> 6 </li> 7 <li> 8 <label>E-mail: (requerido)</label> 9 <input id="cemail" name="email" class="required email" minlength="2" /> 10 </li> 11 <li> 12 <label>Tu página web: (opcional)</label> 13 <input id="curl" name="url" class="url" value="" /> 14 </li> 15 <li> 16 <label>Comentarios: (requerido)</label> 17 <textarea id="ccomentario" name="comentario" class="required"></textarea> 18 </li> 19 <p align="center"><input type="submit" name="submit" value="Enviar" /></p> 20 </ol> 21 </form> Agregar El Validador Primero debemos incluir la libreria jquery, el validador y con una sola línea de texto le decimos que formulario validar 1 <script src="js/jquery-1.3.1.min.js" type="text/javascript"></script> 2 <script src="js/jquery.validate.min.js" type="text/javascript"></script> 3 <script type="text/javascript"> 4 $(document).ready(function() { 5 $("#comentariosFrm").validate(); 6 }); 7 </script> FLASHVARS ENVIARLE DATOS HTML A PELICULA FLASH Hay veces que nos gustaría enviarle variables GET a nuestro flash, o enviarle datos desde html, esto se logra usando flashvars las cuales se agregan en el embed de la pelicula flash, algo así como: 1 <object width="300" height="200"> 2 <param name="movie" value="mipelicula.swf" /> 3 <param name="FlashVars" value="var1=valor1&var2=valor2" /> 4 <embed src="mipelicula.swf" width="300" height="200 5 FlashVars="var1=valor1&var2=valor2"/> 6 </object> Usando Un Plugin Jquery Existe una forma mucho más simple de insertar flash en nuestra página web, usando un plugin para jquery basta crear un div y luego decirle, mete ahi nuestra película de este tamaño ¿Hay algo más simple? Su código html sería únicamente el div donde va a ir nuestra película
  16. 16. 1 <div id="test-flash"></div> El codigo javascript consiste en incluir nuestra libreria jquery, el plugin y un pequeño código para insertar la película, adicionalmente le estoy enviando también flashvars 1 <script language="javascript" type="text/javascript" src="js/jquery-1.3.1.min.js"></script> 2 <script language="javascript" type="text/javascript" src="js/jquery.flash.js"></script> 3 <script language="javascript" type="text/javascript"> 4 $(document).ready(function(){ 5 $('#test-flash').flash({ 6 src: 'test.swf', 7 width: 300, 8 height: 200, 9 flashvars: { var1: 'Mi variable var1', var2: 'Aqui la segunda' } // opcional 10 }); 11 }); 12 </script> Puedes bajar el plugin de la página de su creador Action Script Flash Para capturar las variables que estamos enviando usamos el siguiente código en Action Script 2 1 mivariable1=_root.var1; // imprime "valor1" 2 mivariable2=_root.var2; // imprime "valor2" INCLUIR TOOLTIP EN MAPA DE IMAGENES Usando un plugin para jquery voy a explicar cómo colocar tooltips en un mapa de imagen. HTML Del Mapa De Imagenes Es prácticamente igual que cualquier mapa de imágenes, title es la descripción 1 <p align="center"> 2 <img src="mapa.gif" border="0" usemap="#mimapa" id="map" width="480" height="269" /> 3 <map name="mimapa" id="mimapa"> 4 <area shape="circle" coords="199,51,9" href="http://www.koblenz.de/" alt="" title="Toboganes" /> 5 <area shape="circle" coords="169,53,9" href="http://www.wiesbaden.de/" alt="" title="Mamut" /> 6 <area shape="circle" coords="137,28,9" href="http://www.mainz.de/" alt="" title="Pistas Blandas" /> 7 <area shape="circle" coords="123,60,9" href="http://www.frankfurt.de/" alt="" title=" Tobogan Gigante" /> 8 <area shape="circle" coords="88,24,9" href="http://www.mannheim.de/" alt="" title="Black Hole" /> 9 <area shape="circle" coords="89,76,9" href="http://www.heidelberg.de/" alt="Heidelberg" title=" Cadetes" /> 10 <area shape="circle" coords="83,97,9" href="http://www.stuttgart.de/" alt="" title=" Infantes" /> 11 </map> 12 </p> Agregar El Plugin Para agregar jquery y el plugin bastan un par de líneas de código 1 <script language="javascript" src="jquery-1.3.2.min.js" type="text/javascript"></script> 2 <script language="javascript" src="jquery.tooltip.min.js" type="text/javascript"></script> Al plugin lo podemos configurar con una sola línea de código, pero yo voy a agregarle algunos detalles adicionales 1 <script language="javascript" type="text/javascript"> 2 $(function() { 3 $("map *").tooltip({ 4 positionLeft: true, 5 delay: 0, 6 fade: 250, 7 extraClass: "pretty", 8 fixPNG: true, 9 opacity: 0.95,
  17. 17. 10 }); 11 }); 12 </script> Estilos Para El Tooltip Estos varían según lo que queramos hacer, lo más importante es la position absolute y el z-index 1 #tooltip { 2 position: absolute; 3 z-index: 3000; 4 border: 1px solid #111; 5 background-color: #eee; 6 padding: 5px; 7 opacity: 0.85; 8 } 9 #tooltip h3, #tooltip div { margin: 0; } 10 #tooltip.pretty { 11 border: none; 12 width: 210px; 13 padding:20px; 14 height: 135px; 15 opacity: 0.8; 16 background: url('shadow.png'); 17 } SUBIR MULTIPLES ARCHIVOS Siempre recordemos que no se puede subir archivos usando AJAX, porque el objeto ajax no soporta el enctype requerido para subir archivos así que se usa un iframe para emular el proceso. El Formulario Para Subir Archivos 12 <form action="upload.php" id="frm_uploader" name="frm_uploader" method="post" enctype="multipart/form-data"> 3 <ol> 4 <li><label>Name:</label><input type="text" id="cfname" name="fname" size="30" class="required" /></li> 5 <li><label>E-mail:</label><input type="text" id="cfemail" name="femail" size="30" class="required email" /></li> 6 <li><label>Select Files</label> 7 <input name="ffoto[]" type="file" class="multi" accept="gif|jpg|jpeg|png|pdf|zip|rar|ai|eps|mp3|avi|wmv|mpg|mpeg|cdr" /> 8 </li> 9 <li><p align="center"><input type="submit" name="submit" value="Upload Now" class="btn" /></p></li> 10 </ol> 11 </fieldset> 12 </form> AJAX Jquery Incluimos las librerias javascript, el script automáticamente buscará el campo con la clase multi 1 <script language="javascript" src="js/jquery-1.31.js"></script> 2 <script language="javascript" src="js/jquery.MultiFile.pack.js"></script> PHP Para Recibir Los Archivos Este script permite subir múltiples archivos como un array, así que empecemos por ahí 1 <?php 2 $cuales=""; 3 /// Vemos cuantos archivos hemos subido 4 $nro=count($_FILES["ffoto"]["name"]); 5 /// Empezamos el array 6 for ($i=1; $i<$nro; $i++) { 7 $file_name=$_FILES["ffoto"]["name"][$i]; 8 $file_size=$_FILES["ffoto"]["size"][$i]; 9 $file_type=$_FILES["ffoto"]["type"][$i]; 10 if($file_name!=""){
  18. 18. 11 // verifica carpeta 12 $nombre_archivo=$_POST['femail']; 13 if (!file_exists('userfiles'.$nombre_archivo)) { 14 mkdir('userfiles/'.$nombre_archivo,0777); 15 } 16 $path="userfiles/".$nombre_archivo; 17 // sube archivo 18 copy($_FILES["ffoto"]['tmp_name'][$i], $path.'/'.$file_name) ; 19 echo '<p align="center">Your file <b>'.$file_name.'</b> was successfully uploaded</p>'; 20 $cuales.=$file_name." "; 21 } else { 22 echo '<br><br><p align="center"><b>Error with '.$file_name.'</b></p>'; 23 } Puedes decargar este plugin jquery y ver mas ejemplos desde la pagina de su creador WEB MODULAR PHP Cosas tan simples como tener un flash con música en la página web y que esta no se corte cuando cambie de página para lograr esto hay que evitar que se recargue la pagina, lo que se puede lograr usando iframes sin embargo esta solución implica utilizar una tecnología antigua, y lo inconveniente que es usar frames para el diseño. En vista de esto, existe esta opción AJAX, para ser más preciso jquery. Web Modular La web modular se basa en varios pedazos de código que se juntan (encabezado, menu, contenido, pie de pagina), eso ya lo expliqué en un post anterior. Cargar Los Contenidos Sin Recargar Aqui va la parte interesante, hay que hacer que los links llamen contenidos via ajax (jquery), lo que se logra primero agregando a cada link la clase ajaxmenu 1 <a href="pages/homepage.php" class="ajaxmenu">Homepage</a>&nbsp;&nbsp;|&nbsp;&nbsp; 2 <a href="pages/aboutus.php" class="ajaxmenu" >About Us</a>&nbsp;&nbsp;|&nbsp;&nbsp; 3 <a href="pages/services.php" class="ajaxmenu" >Services</a>&nbsp;&nbsp;|&nbsp;&nbsp; 4 <a href="pages/contactus.php" class="ajaxmenu" >Contact Us</a> y agregando este código al top_page.php dentro del header y entre etiquetas script 1 $(document).ready(function(){ 2 $.ajaxSetup ({ 3 cache: false 4 }); 5 //// Imagen mientras carga el contenido 6 var ajax_load = "<img src='img/load.gif' alt='loading...' />"; 7 8 // Interceptar el link de los menus 9 $(".ajaxmenu").click(function(){ 10 /// Extraemos el nombre de la pagina que esta en el link 11 var loadUrl = $(this).attr('href'); 12 /// Llamamos el contenido 13 $("#contenido").html(ajax_load).load(loadUrl); 14 return false; 15 }); 16 }); Hacer Funcionar Ajax En Links Internos Ese código funciona con el menú pero para que funcione incluso en links de páginas cargadas usando AJAX debemos usar el evento LIVE de jquery para ello basta modificar una línea de código. 1 $('.ajaxmenu').livequery('click',function(){ 2 var loadUrl = $(this).attr('href'); 3 $("#contenido").html(ajax_load).load(loadUrl);
  19. 19. 4 return false; 5 }); ¿Cómo Hago Funcionar El Código Si Uso Anclas? Esto es más complicado ya que hay que calcular la ubicación de las anclas y generar un scroll 1 <script language="javascript"> 2 $(document).ready(function(){ 3 $.ajaxSetup ({ 4 cache: false 5 }); 6 var ajax_load = "<img src='img/load.gif' alt='loading...' />"; 7 $(".ajaxmenu").live("click", function(){ 8 myUrl= $(this).attr('href'); 9 if (myUrl.match('#')) { 10 var myAnchor = myUrl.split('#')[1]; 11 /*Ahora arreglamos el URL - para evitar problemas en ie6*/ 12 var loadUrl = myUrl.split('#')[0]; 13 }else{ 14 var loadUrl = $(this).attr('href'); 15 } 16 $("#contenido").html(ajax_load).load(loadUrl,function(){ 17 if (myUrl.match('#')) { 18 /*Calculamos la distancia entre el anchor y la pagina y animamos*/ 19 var targetOffset = $("a[name='"+myAnchor+"']").offset().top; 20 $('html').animate({scrollTop: targetOffset}, 400); 21 } 22 } 23 ); 24 return false; 25 }); 26 }); 27 </script> SLIDER CONTENIDO DESTACADO He visto varios sliders en jquery con/sin easing, con muchos efectos y otras cosas pero siempre me han gustado mas esos sliders flash que hay en ciertos blogs de noticias u otros donde se muestra un banner con contenido último o destacado incluyendo un texto y algún link, muy util para resaltar algún post. Este script jquery justamente permite mostrar contenido destacado en un slider incluyendo una descripción con su respectivo link featured-content-jquery Podemos ver como implementarlo desde su web
  20. 20. VENTANA MODAL Podríamos programar una ventana modal desde cero pero es mucho más fácil si usamos algún plugin de jquery, para eso vamos a usar Simple Modal Primero incluimos jquery y el plugin simple modal en nuestra cabecera 1 <script type="text/javascript" src="jquery.js"></script> 2 <script type="text/javascript" src="jquery.simplemodal-1.3.min.js "></script> Luego debemos elegir que elementos deben ser afectados por simplemodal usando los selectores de jquery, con lo que podría quedar asi: 1 $("#sample").modal(); O podriamos incluir algunos parámetros adicionales como por ejemplo cambiar el color de fondo y la opacidad 1 $("#sample").modal({ 2 overlay:80, 3 overlayCss: {backgroundColor:"#fff"} 4 }); Existen opciones más avanzadas como animaciones uso de iframes entre otras su pagina web AGREGAR BORRAR CAMPOS Seguro hemos visto algunas páginas ajax en las que piden por ejemplo correo luego podemos apretar un botón “añadir” y se agrega un campo más para insertar un nuevo correo y así cuantos deseemos; también hay algunos más complicados en los que puedes añadir por ejemplo detalles de tu experiencia laboral en un curriculum. La idea es los casos mencionados es exactamente la misma (campos más, campos menos) veremos cómo funciona la más sencilla, para ello debemos tener claros algunos conceptos previos. Arrays De Controles HTML Como no sabemos cuantos campos quiera añadir el usuario, debemos estar preparados para recibir cualquier cantidad de datos por lo cual vamos a usar un array de controles como este: 1 <input type="text" size="20" name="email[]"> Lo único distinto con cualquier otro control es que al final del nombre uso unos corchetes. Manejando Arrays De Controles Con PHP Normalmente en PHP los campos recibidos llegan con POST o GET según corresponda y podemos manejarlo directamente pero con los arrays se manejan un poco distinto, algo así: 1 <?php 2 $emails=$_POST['email']; 3 for ($i=0; $i<=count($emails); $i++) { 4 echo $emails[$i].'<br>'; 5 } 6 ?> ¿Cómo Agregar Campos? Para esto voy a usar un link que invoque a una función javascript que agrega el campo adicional 1 <a href="#" onclick="agregar();">Agregar</a> La función usando jquery es muy sencilla basta usar “attend” para que al final agregue un campo adicional 1 <script type="text/javascript"> 2 function agregar() { 3 campo = '<li><label>Email:</label><input type="text" size="20" name="email[]" /></li>'; 4 $("#emails").append(campo); 5 } 6 </script>
  21. 21. El tema de la presentación o de usar alguna imagen ya depende de nuestra hoja de estilos aunque en este ejemplo he usado un sólo campo es posible usando el mismo código para añadir bloques completos de campos. para borrar un campo específico, pues es muy simple en realidad, veamos: Agregando Campos Necesitamos hacer que se agreguen campos pero además que estos aparezcan con un link que nos permita borrarlos, además para poder identificarlos vamos a ponerle un contador. emails=0; 1 function agregar() { 2 emails=emails+1; 3 $("#campos").append('<li class="email'+emails+'"><input type="text" name="email[]" size="25" 4 />&nbsp;&nbsp;<a href="#" onclick="javascript:borrar('+emails+');">Borrar</a></li>'); 5 } De esta forma se creará un li con una clase email1, email2, email3, etc. y un link con un javascript que invoca a la función borrar(1), borrar(2), etc. Borrando Los Campos La función que borra los campos que ya no requerimos es muy simple, únicamente un selector jquery que busca la clase email1, email2… o la que corresponda y con remove se elimina, ese return false evita que “salte” la página cuando le damos click al link borrar. 1 function borrar(cual) { 2 $("li.email"+cual).remove(); 3 return false; 4 } Como ven con sólo un par de líneas ya está funcionando. MODIFICANDO ATRIBUTOS Veamos ahora como modificar atributos de algún elemento de nuestra página web, primero a modo de introducción veremos cómo funcionan los selectores en jquery y luego veamos como capturar y/o modificar atributos. Selectores En Jquery Los selectores de jquery funcionan igual que los selectores de javascrip para elegir objetos (div, p, input…), clases(.miclase) o id(#miid), por ejemplo para seleccionar un DIV 1 <div id="midiv"></div> Para elegirlo usaríamos en javascript 1 var midiv1 = $("#midiv"); Tomando Los Valores De Un Atributo Ahora que sabemos cómo elegir un objeto veamos como recoger el valor de cualquiera de sus atributos 1 var titulo = $("a.milink").attr("title"); 2 var alt = $("img").attr("alt"); 3 var valor = $("#mitexto").attr("value"); Modificando Atributos De Un Elemento Hay 2 formas de hacerlo, la primera es mejor cuando se trata de modificar un solo atributo mientras que la segunda sirve para recoger múltiples atributos
  22. 22. Deshabilita un boton 1 $("#miboton").attr("disabled","disabled"); Cambia la imagen a miimagen.gif además cambia el titulo y el texto alternativo (ALT) 1 $("img").attr({ 2 src: "/images/miimagen.gif", 3 title: "jQuery", 4 alt: "jQuery Logo" 5 }); Como ven es muy fácil modificar los atributos de cualquier elemento, esto combinado con eventos podríamos hacer que aparezcan o desaparezcan opciones, se habiliten botones, se oculten DIV completos, se muestren mensajes de alerta y un largo etc. JQUERY MUSIC PLAYER Este es un muy interesante plugin para jquery que nos permite reproducir música usando HTML y Flash muy fácil de implementar y lo más importante es que es muy liviano además de personalizable usando CSS. Veamos algunas de sus características Permite reproducir y controlar archivos de música (incluso listas de reproducción) 100% personalizable usando HTML y CSS Rápido stream Soporta MP3 y OGG Pueden descargarlo AQUI OCULTAR /MOSTRAR SECCIONES DE NUESTRO SITIO Como hacer aparecer secciones de un formulario o cualquier otro elemento de nuestro sitio usando jquery, perfecto para cuando tenemos un formulario de búsqueda y deseamos mostrar opciones de búsqueda avanzada por ejemplo o también es posible usarlo a modo de acordeón. Ocultar Un Elemento Si bien es cierto que podemos ocultar un elemento cualquiera lo mejor es colocar un div que agrupe el elemento o elementos que deseamos ocultar si es un formulario y estas basado en una estructura de OL/UL y LI le asignamos u ID a es LI que deseamos ocultar, nuestro código sería algo así: 1 <div id="paraocultar"> 2 <p>Aqui el texto o elementos del formulario que se ocultarán</p> 3 </div> 4 <p>Para ocultar podemos usar link o un boton</p> 5 <a id="oculta">Click para ocultarlo</a> Nuestro código jquery para detectar que se ha hecho click sería: 1 $(document).ready(function(){ 2 estado=0; 3 $("#oculta").click(function () { 4 if(estado==0) { 5 $('#paraocultar').slideUp('fast'); 6 estado=1; 7 } else { 8 $('#paraocultar').slideDown('fast'); 9 estado=0; 10 } 11 }); 12 });

×