feed twitter facebook LinkedIn facebook

jQuery » Lista circular con jQuery appendTo

marzo 5, 2013 por Carmen Rodrigo . 4607 visitas Sin Comentarios Imprimir Imprimir

Hoy vamos a hacer otro ejemplo sencillísimo con listas en jQuery. Esta vez practicaremos la función de utilidad jQuery appendTo. Si seleccionamos el primer elemento de una lista con first y lo añadimos a los elementos de dicha lista con JQuery appendTo haremos que funcione de forma circular.

Nuestro HTML contiene únicamente una lista y un botón.

  2. Lista origen: <br>
  3. <ol id="listaOrigen">
  4. <li> Elemento ordenado 1</li>
  5. <li> Elemento ordenado 2</li>
  6. <li> Elemento ordenado 3</li>
  7. <li> Elemento ordenado 4</li>
  8. </ol>
  9. <button id="miBoton">Ejecutar </button>
  10. </body>

Primero vincularemos un evento al botón para que cada vez que se haga click en él se ejecute la función deseada. Podemos usar la función jQuery on que recibe como argumento el nombre del evento ante el cual reaccionará, en este caso 'click,' o usar la función reducida jQuery click. Hay que decir que la función 'on' vincula eventos y reemplaza a la antigua función jQuery 'bind' que se utilizaba antes de la versión 1.7 de jQuery.

  1. $(document).on('ready', function(){
  2.   $('#miBoton').on('click', function() {
  3.     // Código sobre el click
  4.   });
  5. });

O bien en formato reducido:

  1. $(document).on('ready', function(){
  2.   $('#miBoton').click(function() {
  3.     // Código sobre el click
  4.   });
  5. });

Cuando se produzca ese evento ejecutaremos nuestro sencillo código. Veremos que es tan simple que se programa con una sola línea gracias a JQuery appendTo que permite mover elementos en el DOM.  El método JQuery appendTo se aplica sobre un elemento a otro elemento como parámetro. Es decir, añade el elemento seleccionado al elemento argumento de la función.

En nuestro caso:

  1. $(document).on('ready', function(){
  2.   $('#miBoton').on('click', function() { 
  3.     $('ol li:first').appendTo('ol');  
  4.     });
  5. });

Lo que hacemos es obtener la referencia al primer elemento de la lista "ol li:first" y moverlo con el JQuery appendTo al final de la lista.

Otra forma de codificar este movimiento, ajustando al nombre de la lista, sería:

  1. $('#listaOrigen li:first').appendTo('#listaOrigen');

Y con este sencillo ejemplo hemos practicado selecciones básicas de jQuery, vinculación de eventos y práctica de la función de utilidad JQuery appendTo.

jQuery » Utilizar jQuery each para recorrer una lista o array

febrero 24, 2013 por Carmen Rodrigo . 7201 visitas Sin Comentarios Imprimir Imprimir

Vamos a ver un ejemplo de la función jQuery each para recorrer una lista de elementos o un array Javascript. Es algo que se puede hacer de forma muy sencilla mediante este método que nos proporciona la librería.

Lo primero de todo no olvides incluir la librería jQuery:

  1. <script src="jquery-1.8.3.js"></script>

Si tenemos la siguiente lista ordenada en HTML:

  2. <li>Elemento 1</li>
  3. <li>Elemento 2</li>
  4. <li>Elemento 3</li>
  5. <li>Elemento 4</li>
  6. </ol>
  7.  

Haremos los siguientes pasos:

  1. Primero vamos a seleccionar la lista.
  2. Una vez seleccionada llamamos a la función jQuery each que nos recorre los elementos de la selección.
  3. Por cada elemento que seleccione jQuery each ejecuta la función que le pasamos como argumento. Dicha función tiene dos parámetros para dar acceso tanto al índice como al elemento seleccionado y realizamos su escritura por consola.

Veamos el código:

  1. $('ol li').each(function(indice, elemento) {

  2.   console.log('El elemento con el índice '+indice+' contiene '+$(elemento).text());

  3. });

Como ves:

  • Hemos seleccionado la lista con $('ol li').
  • Llamamos a jQuery each.
  • Por cada selección ejecuta la función que tiene acceso al índice y al elemento y lo imprimimos por consola.
  • Date cuenta de que hemos aplicado a element la función text() para sacar su contenido.

Lo interesante es que la función jQuery each puede usarse directamente sobre $. En ese caso habrá que pasarle también como parámetro lista correspondiente de elementos seguida de la función tal como hacíamos en el ejemplo anterior. En el siguiente ejemplo lo vamos a usar para recorrer un vector de Javascript de personas y saludarlas. Veamos cómo quedaría:

  1. var vectorPersonas = ['Elena', 'Isabel', 'Ana']; 

  2.  
  3. $.each(vector, function (ind, elem) { 

  4.   console.log('¡Hola :'+elem+'!'); 

  5. });

Ahora ya sabemos recorrer listas con jQuery gracias a la función each.

jQuery » Implementando un Twitter Follow Box

septiembre 14, 2012 por Emmanuel Sio . 10701 visitas Sin Comentarios Imprimir Imprimir

Twitter Follow Box es un plugin realizado en JQuery que nos permite agregar al mejor estilo Facebook, nuestros seguidores de Twitter. No requiere grandes conocimientos para incorporarlo a nuestra web y nos llevará muy poco tiempo realizarlo. Para llevar a cabo la implementación de este plugin debemos realizar los siguientes pasos:

  1. Descargar el plugin de la web del autor.
  2. Incorporar en el header los links a la librería de JQuery, al arhivo de CSS y a la librería del plugin.
  3. Escribir el div donde vamos a alojar el contenido del twitter follow box.
  4. Escribir el script de llamada al código del plugin.

Descarga del plugin

Primero debemos descargar el fichero zip desde la página de sus creadores haciendo click aquí. Una vez que lo descargamos debemos acomodar los archivos que encontramos:

  • JS: jquery.followbox.min.js es la versión que podemos usar en producción y jquery.followbox.js es la versión que podemos utilizar para debbuguear. Estos archivos son el core del plugin.
  • CSS: followbox.css. Es el archivo de CSS. En este archivo hay dos themes: el principal y el dark. Lo pueden modificar a su manera.
  • Imagen: icon_twitter.png. Este archivo es un loguito de Twitter que se encuentra al lado del link que apunta a la página del desarrollador. Tengan en cuenta que esta imagen está enlazada a una ruta específica dentro de los archivos JS antes mencionados. Para cambiar la ruta de donde lo alojen tienen que editar el archivo y buscar: var d="followbox/icon_twitter.png"

Código dentro del head

  1. <!— incorporamos el link al css -->
  2. <link href="css/followbox.css" rel="stylesheet" type="text/css"/>
  3.  
  4. <!— incorporamos el script de JQuery -->
  5. <script type='text/javascript' src='http://code.jquery.com/jquery-1.8.0.js'></script>
  6.  
  7. <!— incorporamos el script del plugin -->
  8. <script src="js/jquery.followbox.min.js" type="text/javascript"></script>

Código del div

Escribimos un div vacio donde queremos que aparezca el box

  1. <div id="twitterBox">
  2. </div>

Código de llamada del script

Escribimos el código para llamar al constructor del plugin

  1. $('# twitterBox).followbox({
  2. 'user' : 'nuestro nombre de usuario en twitter sin @',
  3. 'width' : '1240',
  4. 'theme' : 'dark'});

Dentro de las variables que podemos inicializar opcionalmente para acomodar el box de acuerdo a nuestras necesidades encontramos las siguientes. La variable user es obligatoria.

  • user: nombre del usuario de twitter sin @
  • width: ancho en pixeles
  • height: alto en pixeles
  • border_color: color del borde
  • bg_color: color del fondo
  • bg_image: imagen de fondo optativa
  • title_color: color del texto del título
  • total_count_color: color indicando la cantidad de seguidores
  • follower_name_color: color de los enlaces a los seguidores
  • theme: permite seleccionar un estilo global; puede ser light, dark o custom

Como síntesis de nuestro artículo podemos concluir que tenemos una implementación realmente sencilla, ultra customizable que nos va a permitir mostrar nuestros seguidores de twitter en nuestro sitio Web.

jQuery » Animar elementos con jQuery

mayo 3, 2012 por Víctor Cuervo . 11455 visitas 1 Comentario Imprimir Imprimir

Una cosa que podemos hacer de forma muy sencilla con jQuery es ejecutar animaciones de elementos. Y es que jQuery nos proporciona una función para animar elementos. Esta función es .animate().

Pero vamos por pasos. Lo primero será insertar el elemento que queremos animar. Por ejemplo, una imagen. Así que colocamos la imagen en la página.

  1. <img src="contenido.png" alt="logo" id="logo" height="50px"/>

Lo siguiente será decidir en qué momento queremos realizar la animación. En nuestro caso la secuencia será la siguiente. Cuando pasemos el ratón sobre la imagen agrandaremos dicha imagen. Y cuando salgamos de la imagen con el ratón, devolveremos la imagen al tamaño original.

Así que vamos a utilizar la gestión de eventos que nos proporcionan los métodos .mouseover() y .mouseout(). Será desde estos eventos dónde lancemos la animación.

  1. $(document).ready(function(){
  2.   $("#logo").mouseover(function(){...});
  3.   $("#logo").mouseout(function(){...}); 
  4. });

Vemos que los métodos se lanzan sobre el elemento al que hemos dado el id "logo".

Ahora ya pasamos a realizar la animación de la imagen. Y como habíamos comentado al principio del artículo utilizaremos el método .animate().

El método .animate() recibe como parámetros diferentes de cosas. Pero el primer parámetro, que es el más importante, recoge las propiedades que queremos modificar en el elemento para la animación. Pero vemos el resto.

.animate( properties [, duration] [, easing] [, complete] )

Vemos que además de los parámetros CSS a modificar podemos establecer: la duración, que indica en milisegundos cuánto tiempo durará la animación. La función que podemos ejecutar durante la animación es la que se referencia en el parámetro easing y con el parámetro complete podemos indicar qué función queremos ejecutar al finalizar la animación.

Pero volviendo a nuestro ejemplo, lo haremos de la forma más sencilla. Es decir, solo modificando las propiedades de la imagen. Como indicamos que al entrar con el ratón sobre la imagen la haríamos más grande, lo que vamos a realizar es incrementar su tamaño, es decir, su atributo height. Y justamente lo contrario cuando salgamos de la imagen.

Así nuestro código jQuery quedará de la siguiente forma:

  1. $(document).ready(function(){
  2.   $("#logo").mouseover(function(){
  3.      $(this).animate({height:'150px'});
  4.   });
  5.   $("#logo").mouseout(function(){
  6.      $(this).animate({height:'50px'});
  7.   }); 
  8. });

Puedes probar el resto de propiedades del método animate, por ejemplo, si queremos hacer más lento cuando la imagen se haga grande.

  1. $("#logo").mouseover(function(){
  2.   $(this).animate({height:'150px'},2000);
  3. });

¿Qué se te ocurre hacer con la función .animate() de jQuery?

jQuery » Aplicar opacidad con jQuery

abril 2, 2012 por Víctor Cuervo . 11434 visitas 4 Comentarios Imprimir Imprimir

jQuery nos permite modificar la opacidad de los elementos con una gran facilidad. Ya lo vimos haciendo un efecto de Fade.

Pero ahora vamos a algo más sencillo, simplemente vamos a aplicar un cambio de opacidad de una imagen con jQuery. La idea será partir de una imagen y un enlace que nos permita aplicar la opacidad.

  1. <img src="contenido.png" alt="logo" id="logo"/><br/>
  2. <a href="#" id="opacidad">Opacidad</a>

Lo siguiente será capturar el evento click sobre ese enlace:

  1. $(document).ready(function(){
  2. 	$("#opacidad").click(function(e){				
  3. 		//Código de cambio de opacidad		
  4. 	});	
  5. });

Y es que será en el evento click dónde aplicaremos el cambio de opacidad. El cambio de opacidad se consigue modificando la propiedad opacity de CSS. Para ello vamos a utilizar el método .css de jQuery.

  1. $("#logo").css("opacity", 0.2);

Es importante saber que los valores de la opacidad varian entre 0.0 y 1.0.

Ahora cuando pulsemos sobre el enlace aplicaremos la opacidad sobre la imagen habiendo utilizado jQuery.

jQuery » Efecto Fade en jQuery

marzo 30, 2012 por Víctor Cuervo . 15281 visitas 5 Comentarios Imprimir Imprimir

Utilizando jQuery podemos crear de una forma muy sencilla efectos de Fade, es decir, ocultar o mostrar un elemento de forma gradual. Para poder realizar un efecto de Fade en jQuery utilizaremos los métodos .FadeOut() y .FadeIn().

Pero lo primero será poner un elemento sobre el que aplicar el efecto Fade. En nuestro caso utilizaremos una imagen.

  1. <img src="contenido.png" alt="logo" id="logo"/>

Ahora ponemos los enlaces para ocultar y mostrar:

  1. <a href="#" id="ocultar">Ocultar</a> | <a href="#" id="mostrar">Mostrar</a>

Lo que haremos ahora será poner el código jQuery que controle el evento onclick sobre estos enlaces. Para poder hacer esto necesitamos el método click sobre los enlaces.

  1. $("#mostrar").click(function(e){				
  2.   // Efecto Fade
  3. });

Ya solo nos quedará el ejecutar los efecto con los métodos .FadeOut() y .FadeIn().

  1. $("#ocultar").click(function(e){				
  2.   $("#logo").fadeOut();		
  3. });
  4. $("#mostrar").click(function(e){				
  5.   $("#logo").fadeIn();		
  6. });

Si queremos podemos configurar el tiempo en el cual realizamos el efecto del face. Para ello pasaremos el tiempo, en milisegundos, a las funciones .FadeOut() y .FadeIn().

  1. $("#ocultar").click(function(e){				
  2.   $("#logo").fadeOut(2000);		
  3. });
  4. $("#mostrar").click(function(e){				
  5.   $("#logo").fadeIn(2000);		
  6. });

Algo sencillo realizar un efecto de fade en jQuery.

jQuery » Crear un slider con jQuery

febrero 19, 2012 por Víctor Cuervo . 11172 visitas 5 Comentarios Imprimir Imprimir

Ahora que hemos publicado un artículo sobre cómo montar un slider en HTML5 muchas de las preguntas que nos están llegando son relativas al no soporte del slider HTML5 en ciertos navegadores y consultas sobre cómo montar una alternativa.

Lo que vamos a ver en este artículo es como crear un slider con jQuery. Y no es que jQuery nos de un slider como elemento base de su lenguaje, si no que vamos a utilizar un plugin de jQuery para poder crear un slider.

En concreto utilizamos el plugin fd-slider. Además vamos a utilizar la técnica de polyfills que vimos el otro día con el ejemplo sobre un placeholder.

Lo bueno del plugin fd-slider es que al ser un polyfill nos permite construir nuestra página con HTML5 y solo se ejecutará en aquellos navegadores que lo necesiten y durante el tiempo que lo necesiten.

Lo primero que tenemos que saber del plugin es que lo componen dos ficheros:

fd-slider.js
fd-slider.css

Utilizando el loader de Modernizr veremos que quedaría de la siguiente forma:

  1. Modernizr.load({
  2. 	test:Modernizr.inputtypes.range,
  3. 	nope:['fd-slider.js','fd-slider.css']
  4. });

Vemos que la capacidad que validamos del HTML5 es Modernizr.inputtypes.range.

Una vez cargados los ficheros del plugin fd-slider tenemos que lanzar el siguiente código para inicializar el plugin:

  1. fdSlider.onDomReady();

Así que insertaremos dicho código dentro del polyfill.

  1. Modernizr.load({
  2.   test:Modernizr.inputtypes.range,
  3.   nope:['fd-slider.js','fd-slider.css'],
  4.   complete:function(){if(fdSlider)fdSlider.onDomReady();}
  5. });

Ya tendremos cargado nuestro slider con jQueryfuncionando en la página.

Os podéis descargar el plugin fd-slider desde https://github.com/freqdec/fd-slider

jQuery » Utilizar Placeholder con jQuery

febrero 16, 2012 por Víctor Cuervo . 12344 visitas 3 Comentarios Imprimir Imprimir

Seguro que alguno de vosotros ha leido nuestro artículo que cuenta como utilizar un placeholder con HTML5. Esto nos posibilita el poner un texto dentro de un campo de un formulario para orientar al usuario sobre que contenido insertar en dicho campo.

Si bien, uno de los problemas que nos plantea el uso de ciertas propiedades HTML5 es la falta de implementación por parte de ciertos navegadores. Es por ello que la experiencia del usuario de esos navegadores puede ser diferente a la del resto.

Si queremos utilizar placeholders sin HTML5 podemos recurrir a un plugin de jQuery. Mediante el uso de jQuery y este plugin será muy sencillo poder utilizar un placeholders. Además es que la forma en la que utilicemos el placeholders será la misma forma en la que lo utilizábamos en HTML5.

Es decir, si queremos crear un placeholders pondremos lo siguiente:

  1. <label for="texto">Nombre: </label>
  2. <input type="text" id="texto" placeholder="Inserte su nombre" size="40" />

Para poder utilizar el placeholders con jQuery tendremos que hacer varias cosas. La primera será instanciar jQuery e instanciar el plugin de jQuery.

  1. <script src="jquery.js"></script>
  2. <script src="jquery.placeholder.min.js"></script>

Y el siguiente paso inicializar el plugin de jQuery. En este caso el código de incialización es:

  1. $('input, textarea').placeholder();

Si bien, deberemos de esperar a tener cargada la página. Por ello recurriremos al método ready() de jQuery.

  1. <script>
  2. $(document).ready(function(){
  3. 	$('input, textarea').placeholder();
  4. });
  5. </script>

Con un plugin de jQuery y unas pocas líneas de código tenemos la capacidad de dar soporte a los placeholders de HTML5.

Te puedes descargar el plugin jQuery desde https://github.com/mathiasbynens/jquery-placeholder.

jQuery » Efecto leer más texto simplificado con jQuery

enero 6, 2012 por Víctor Cuervo . 10578 visitas 8 Comentarios Imprimir Imprimir

El otro día veíamos como poder generar un efecto leer más texto con jQuery sobre un texto que no tenía estructura predefinida y que se encontraba dentro de un DIV.

Hoy vamos a ver como simplificar este ejemplo si tenemos la estructura del texto predefinida. Con lo que nos quedará un efecto leer más texto simplificado.

Y es que si podemos estructurar el texto sobre el que queremos realizar el efecto sería bueno que lo insertásemos en capas SPAN. En concreto en tres capas SPAN.

  • summary, con el texto de resumen.
  • complete, con el resto del texto.
  • more, con el texto "leer más".

Es importante que utilicemos elementos SPAN ya que estos son inline y se mostrarán todos seguidos, si saltos y darán uniformidad al texto.

La estructura quedará de la siguiente forma:

  1. <span class="summary">
  2. 	<p>Lorem ipsum dolor sit amet, vis alterum feugiat sanctus ea. Affert facete eu cum, ut dicta vitae quo. Cum id aeque option epicuri, nec oblique suscipit ad. Et sea odio adhuc altera. Verterem nominati an mel, his diam consetetur ei. Eligendi principes sed no, ubique patrioque vix cu, soluta veritus percipit vim ex.</p>
  3. </span>
  4. <span class="complete">
  5. 	<p>Pro populo dolorem eu. Justo conclusionemque sea ne. At dicat putent eum. Reprimique delicatissimi vel et.</p>
  6. 	<p>Posse constituam pro eu. Sit graecis appetere at, id his quas possit platonem, ius at nobis decore ullamcorper. Vix ne latine iudicabit constituto, justo fastidii eleifend et pro, ei sit solet dicant mediocrem. Te sit cibo percipit persecuti. Debet convenire suavitate ei vis. Pri utinam labitur temporibus ex.</p>
  7. </span>			
  8. <span class="more">Leer mas...</span>

El código jQuery se quedará simplificado ya que solo tendremos que controlar el .toggle() sobre el elemento "more". Es decir, el cambio de estado de este elemento.

  1. $(document).ready(function(){		

  2. 	$(".more").toggle(function() {

  3. 	    $(this).text("Leer menos...").siblings(".complete").show();

  4. 	}, function() {

  5. 	    $(this).text("Leer mas...").siblings(".complete").hide();

  6. 	});	

  7. });

En cada uno de los cambios de texto realizamos las tres acciones apoyadas en los métodos .text() para cambiar el texto del elemento "more", .siblings() para ir a por el elemento hermano "complete" y .show()/.hide() para ocultar o mostrar el texto.

Vemos que con la estructuración predefinida de la página se nos simplifica mucho el código jQuery ya que nos evitamos la reestructuración del contenido "al vuelo" con jQuery.

jQuery » Efecto slide con jQuery

enero 5, 2012 por Víctor Cuervo . 11950 visitas 2 Comentarios Imprimir Imprimir

El efecto slide es el que nos permite realizar un desplazamiento de un elemento en alguna dirección (izquierda, derecha, arriba o abajo). En las siguientes líneas veremos lo sencillo que es hacerlo con jQuery.

En nuestro ejemplo vamos a desplazar una capa que tengamos en la página, para ocultarla. De esta manera aplicaremos el efecto slide en ese momento.

Lo primero que tenemos que saber es que la función que oculta un elemento en jQuery es .hide(). Pero si vemos la sintaxis (la más común) de esta función:

  1. .hide(velocidad, [funcion_callback])

Nos damos cuenta que solo podemos aplicar una velocidad de ocultación y una función de callback para ejecutar cuando se termine la ocultación. Entonces, ¿dónde ejecuto el efecto?

Para ello tenemos la librería jQuery UI, que es una extensión al core de jQuery, dotándole de capacidades gráficas como la de los efectos.

Así en jQuery UI encontraremos una extensión de la función .hide() para que podamos aplicar efectos. Lo mismo sucede con las funciones .show() y .toggle(). De esta manera la función .hide() podrá recibir un efecto como parámetro.

El efecto se compondrá de dos partes:

  • Nombre del efecto
  • Parámetros del efecto

En el caso del efecto slide podemos indicar como parámetros la dirección (izquierda, arriba,...), distancia (punto del elemento en el que se aplicará el efecto) y el modo (si es show o hide).

De esa manera nuestro efecto saliendo hacía la izquierda sería algo así:

  1. $(this).hide("slide", { direction: "left" }, 5000);

Dónde this será el elemento sobre el que aplicamos el efecto. Por ejemplo, si queremos desplazar una capa:

  1. <div id="micapa" style="background-color:red;width:100px;height:100px"></div>

El código jQuery nos quedará de la siguiente forma:

  1. $(document).ready(function(){

  2.   $("#micapa").click(function(){		

  3.     $(this).hide("slide", { direction: "left" }, 5000);

  4.   });

  5. });

Hemos utilizado el método .click() para lanzar el efecto cuando se pulse sobre la capa.

Con esos sencillos pasos tenemos completado el efecto slide con jQuery.