emenia.es » JQuery

Creando un menú vertical desplegable con jQuery (2)

Juan Diaz-Bustamante — Thu, 15 Apr 2010 06:10:07 +0000

Tras una pregunta de Saúl sobre el artículo Creando un menú vertical desplegable con jQuery en la que me preguntaba cómo lograr que al abrir una opción del menú se cerrara cualquier otra que estuviera abierta (podéis ver la pregunta en la zona de comentarios del artículo anterior) he actualizado (bueno, básicamente cambiado) el código para que pueda hacerse lo que pide Saúl. Aunque lo he puesto en los comentarios respondiéndole me he animado a crear una nueva entrada por si a alguien le fuera de interés.

Lo que queremos conseguir es esto: Ejemplo de menú vertical desplegable con jQuery con efecto acordeón

Como veréis en el ejemplo, el código HTML completo del navegador es:


  Venta
    
      Viviendas
      Aparcamientos
    
  
  Alquiler
    
       Viviendas
    
  
  Oficinas
  Ofertas
  Oficina de Ventas

Y el código jQuery que lo hace posible:

<script type="text/javascript">
  $(document).ready(function(){ // Script del Navegador
    $("ul.subnavegador").not('.selected').hide();
    $("a.desplegable").click(function(e){
      var desplegable = $(this).parent().find("ul.subnavegador");
      $('.desplegable').parent().find("ul.subnavegador").not(desplegable).slideUp('slow');
      desplegable.slideToggle('slow');
      e.preventDefault();
    })
 });
script>

Si tenéis alguna pregunta no dudéis en preguntar.

Elegir una fecha en un formulario con un calendario y jQuery

Juan Diaz-Bustamante — Thu, 18 Feb 2010 21:56:56 +0000

En ocasiones necesitamos crear un formulario donde alguno de los campos requieren la selección de una fecha por parte del usuario, por ejemplo para la reserva de la habitación de un hotel, la compra de un billete de tren, etc..

La mejor manera de solicitar una fecha al usuario es a través de un calendario que se despliegue a la hora de introducir la fecha. Es lo que vamos a hacer en este ejemplo.

Para ello vamos a utilizar el plugin jQuery UI Datepicker.

Lo que vamos a conseguir es esto:

Para utilizarlo necesitamos:

1) jQuery, por supuesto:

1	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js">script>

2) jQuery UI:

1	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js">script>

3) En cuanto a estilos, utilizaremos el jQuery UI CSS Framework (esta línea debería ir antes de las dos anteriores en nuestro código):

Y sus iconos:

Si seguimos las instrucciones del plugin, vemos que utilizar el calendario para seleccionar una fecha es realmente sencillo. Sólo hay que escribir, en su forma más básica:

<script type="text/javascript">
$(document).ready(function() {
   $("#datepicker").datepicker();
});
script>

Siendo en este caso “#datapicker” el id del input del formulario al que aplicamos el calendario:

Como veréis le hemos añadido el atributo readonly para que no pueda ser modificado el contenido del input por el usuario, es decir, que se quede la fecha elegida sin poder alterarla manualmente. Aunque algunos autores lo incluyen, es probable que sea mejor no incluirlo, ya que si Javascript está desactivado no podríamos escribir nada en el input.

Si unís todo el código anterior veréis que el calendario sale en inglés. Para ponerlo en Castellano (también se puede poner en Catalán o en Euskera) tenemos los archivos de localización.

En concreto, para que esté en Castellano:

jQuery(function($){
	$.datepicker.regional['es'] = {
		closeText: 'Cerrar',
		prevText: '<Ant',
		nextText: 'Sig>',
		currentText: 'Hoy',
		monthNames: ['Enero','Febrero','Marzo','Abril','Mayo','Junio',
		'Julio','Agosto','Septiembre','Octubre','Noviembre','Diciembre'],
		monthNamesShort: ['Ene','Feb','Mar','Abr','May','Jun',
		'Jul','Ago','Sep','Oct','Nov','Dic'],
		dayNames: ['Domingo','Lunes','Martes','Miércoles','Jueves','Viernes','Sábado'],
		dayNamesShort: ['Dom','Lun','Mar','Mié','Juv','Vie','Sáb'],
		dayNamesMin: ['Do','Lu','Ma','Mi','Ju','Vi','Sá'],
		weekHeader: 'Sm',
		dateFormat: 'dd/mm/yy',
		firstDay: 1,
		isRTL: false,
		showMonthAfterYear: false,
		yearSuffix: ''};
	$.datepicker.setDefaults($.datepicker.regional['es']);
});

Vamos a unir ya todo el código antes de ver posibles modificaciones. Podéis ver este código funcionando en esta demostración y podéis bajar el código aquí.




Emenia Demo - Uso de jQuery Data Picker






Uso de jQuery Data Picker

   Seleccionar Fecha:

Ahora vamos a ver algunas formas de personalizar el calendario. Muchas de las opciones las hemos utilizado ya en el código de localización. La lista completa está en http://docs.jquery.com/UI/Datepicker

- altField y altFormat nos permiten guardar la fecha elegida en otro campo con un formato diferente, por ejemplo si lo queremos mostrar al usuario con un formato pero que nos llegue a nosotros con otro diferente.

- appendText, si queremos que se muestre un texto al lado del input, para una mejor comprensión para el usuario:

1
2
3

    $(document).ready(function() {
           $("#datepicker").datepicker({ appendText: ' Haga click para introducir una fecha' });
        });

Ver una demo con appendText

-autoSize, si lo ponemos en true se ajustará el input para dar cabida a la fecha introducida.

- numberOfMonths, para elegir el número de meses que van a salir. Si ponemos numberOfMonths:2, por ejemplo, saldrán dos meses. Esto lo aconsejan algunos expertos en usabilidad ya que hay más opción donde elegir de un solo vistazo. Veamos un ejemplo de numberOfMonths , donde se añade al anterior de appendText para ver cómo se unen dos opciones.

- Si queremos que el calendario se despliegue no al hacer click sobre el input sino sobre un botón adjunto (por ejemplo, una imagen de un calendario pequeño, como tienen muchas webs que habréis visto), utilizaremos las opciones buttonImage, buttonImageOnly y showOn:

$("#datepicker").datepicker({ 
   showOn: 'button', 
   buttonImageOnly: true, 
   buttonImage: 'images/datepicker.png' 
});

donde datapicker.png es un icono de un calendario. Al hacer click sobre él, se despliega el calendario. Veamos un ejemplo.

- dateformat, para cambiar el formato en el que se pega la fecha al input. En la demo está en dateformat: ‘dd/mm/yy’. Otra opción es por ejemplo ‘DD, MM, d, yy’ . Lista completa de formatos de fecha.

- maxDate y minDate, para poner una fecha máxima y otra mínima (supongamos que queremos que sólo salgan los meses de Junio a Octubre):

$(document).ready(function() {
   $("#datepicker").datepicker({
       minDate: new Date(2010, 5, 1),
       maxDate: new Date(2010, 9, 30),
       dateFormat: 'dd/mm/yy',
       constrainInput: true,
	});
});

Veamos un ejemplo de maxDate y minDate.

- buttonText, Si queremos que se abra el calendario al hacer click sobre un botón al que le ponemos nosotros el texto:

$(document).ready(function(){
  $("#datepicker").datepicker({ 
       showOn: 'button', 
       buttonText: "Seleccionar" });
 });

Veamos una demo del uso de buttonText.

- showAnim, si queremos cambiar el efecto con el que se muestra el calendario

$(document).ready(function(){
   $("#datepicker").datepicker({
    showAnim: 'fadeIn'
    });
});

Veamos una demo del uso de showAnim. Podemos usar como efecto ’show’ (por defecto), ’slideDown’, ‘fadeIn’, o cualquiera de los efectos para mostrar/ocultar de jQuery UI.

- changeMonth permite mostrar una lista desplegable de meses para poder ir con mayor rapidez al mes deseado:

$(document).ready(function(){
   $("#datepicker").datepicker({
    changeMonth: true 
    });
});

Veamos una demo del uso de changeMonth

Id probando todas las opciones de la página del plugin para ver las distintas opciones.

Por último, destacar una variación aportada por David Walsh en su artículo jQuery UI DatePicker: Disable Specified Days, para desactivar días concretos (por ejemplo, días que hayan sido ya reservados de un hotel y por lo tanto no puedan ser ya escogidos). También en su ejemplo se ve como desactivar los fines de semana y días de fiesta.

Lista desplegable y plegable con jQuery

Juan Diaz-Bustamante — Sat, 30 Jan 2010 10:40:16 +0000

Supongamos que tenemos una lista de elementos, en el que cada elemento está compuesto por un titular y una descripción. Por ejemplo:

18 Wheels Extreme Trucker
Ya está aquí el último simulación de camiones dentro de la conocida serie 18 Wheels.
Simulación – PC CD-ROM

A Stroke of Fate: Operation Valkyrie
Basada en hechos históricos reales. El último atentado contra Adolf Hitler.
Aventura Gráfica – PC DVD-ROM

A Vampire Story
Una aventura gráfica tradicional creada por Bill Tiller, famoso por aventuras como The Dig, The Curse of Monkey Island e Indiana Jones.
Aventura Gráfica – PC DVD-ROM

Aion
Descubre un espectacular mundo online lleno de historias y leyendas.
On-Line - PC DVD-ROM

Airbus Fleet para FSX
Airbus Fleet te ofrece la oportunidad de pilotar la mayoría de la flota de aviones de Airbus. Add-On de Microsoft Flight Simulator
Add-on – PC CD-ROM

American Civil War
Juego de gran estrategia histórica creado por Philippe Thibaut, autor de Europa Universalis. El juego se desarrolla mediante turnos simultáneos y sitúa a los jugadores al frente de los bandos combatientes de la Guerra Civil Americana (1861- 1865).
Estrategia -PC CD-ROM

Around the World in 80 Flights
Circunnavega el globo, en rumbo este, desde el histórico aeródromo de Farnborough, en el Reino Unido, en un épico viaje de 80 etapas alrededor del mundo en este add-on para Microsoft FSX y FS2004.
Add-on – PC CD-ROM

Battle of Britain 2: Wings of Victory
Battle of Britain 2 “Wings of Victory” es un simulador de vuelo que recrea las famosas batallas aéreas que tuvieron lugar en el sur de Inglaterra en 1.940
Simulación – PC CD-ROM

Supongamos igualmente que sólo queremos que se vean los títulos y que la descripción se vea únicamente cuando hacemos click sobre el título correspondiente. Además, si hay alguna descripción ya abierta queremos que se cierre si hacemos click sobre otro título diferente o sobre el mismo título (un segundo click sobre el mismo).

¿Cómo lo hacemos? Con jQuery es muy sencillo.

Pero primero vamos a ver cómo escribimos el código de la lista. Lo más lógico es hacer una lista de definición o definition list:

18 Wheels Extreme Trucker
Ya está aquí el último simulación de camiones dentro de la conocida serie 18 Wheels. Simulación - PC CD-ROM
A Stroke of Fate: Operation Valkyrie
Basada en hechos históricos reales. El último atentado contra Adolf Hitler.
Aventura Gráfica - PC DVD-ROM
A Vampire Story
Una aventura gráfica tradicional creada por Bill Tiller, famoso por aventuras como The Dig, The Curse of Monkey Island e Indiana Jones.
Aventura Gráfica - PC DVD-ROM
Aion
Descubre un espectacular mundo online lleno de historias y leyendas.
On-Line - PC DVD-ROM
Airbus Fleet para FSX
Airbus Fleet te ofrece la oportunidad de pilotar la mayoría de la flota de aviones de Airbus. Add-On de Microsoft Flight Simulator
Add-on - PC CD-ROM
American Civil War
Juego de gran estrategia histórica creado por Philippe Thibaut, autor de Europa Universalis. El juego se desarrolla mediante turnos simultáneos y sitúa a los jugadores al frente de los bandos combatientes de la Guerra Civil Americana (1861- 1865).
Estrategia -PC CD-ROM
Around the World in 80 Flights
Circunnavega el globo, en rumbo este, desde el histórico aeródromo de Farnborough, en el Reino Unido, en un épico viaje de 80 etapas alrededor del mundo en este add-on para Microsoft FSX y FS2004.
Add-on - PC CD-ROM
Battle of Britain 2: Wings of Victory
Battle of Britain 2 “Wings of Victory” es un simulador de vuelo que recrea las famosas batallas aéreas que tuvieron lugar en el sur de Inglaterra en 1.940
Simulación - PC CD-ROM

A continuación cargamos jQuery. Podéis ver como hacerlo en este artículo: Curso de jQuery – Introducción.

Y a continuación escribimos el siguiente código dentro del header:

<script type="text/javascript">
    $(document).ready(function(){
      	$("dd").hide();
	$("dt").click(function(event){
             var desplegable = $(this).next();
             $('dd').not(desplegable).slideUp('fast');
              desplegable.slideToggle('fast');
              event.preventDefault();
              })
        });
script>

Como veis es muy sencillo. Primero ocultamos todos los elementos dd con

1	$("dd").hide();

Luego decimos que al hacer click sobre un elemento dt se ejecute una función:

1	$("dt").click(function(event){

Como vemos a esta función le pasamos el evento como parámetro. El objeto evento da información sobre el evento que se invoca sobre cada elemento en cuestión y nos ofrece métodos que afectan a la progresión del evento, como veremos al final de la función.

A continuación asignamos a una variable que hemos denominado “despleglable” el elemento “dd” que sigue al elemento “dt” concreto sobre el que hemos hecho click:

1	var desplegable = $(this).next();

Como vemos eso lo conseguimos con $(this) que es como decir “este”, de todos los “dt” sólo este, sobre el que hemos hecho click.

A continuación buscamos cualquier “dd” que esté desplegado pero que no sea el recogido en la variable “desplegable”, y lo plegamos:

1
2
3

<script type="text/javascript">
 $('dd').not(desplegable).slideUp('fast');
script>

Y a continuación desplegamos el “dd” concreto que almacenamos en la variable “desplegable” y lo plegamos si estaba desplegado:

1	desplegable.slideToggle('fast');

Por último, cancelamos el evento si es cancelable para evitar que el efecto se propague:

1	event.preventDefault();

De esta manera se detiene el efecto cuando hacemos click sobre un titulo y acabamos de hacer click sobre otro juntándose a la vez varios efectos de pliegue y despliegue.

Podemos ver la Demo en http://www.emenia.es/demos-blog/lista-desplegable/

Creando un menú vertical desplegable con jQuery

Juan Diaz-Bustamante — Sun, 15 Nov 2009 10:37:31 +0000

Aprovechando el final del tutorial sobre selectores de jQuery vamos a ver cómo hacer un sencillo menú vertical desplegable con jQuery. Hay veces que un menú tiene varios submenús que por simplicidad visual no queremos que aparezcan hasta que no se pulse sobre la opción de cabecera del submenú. Gracias a jQuery podemos lograrlo con facilidad. Esta es la demo de lo que vamos a hacer.

Empezaremos con una simple lista de enlaces:


  Opción 1
  Opción 2
  Opción 3
       
	  Sub-Opción 3-1
	  Sub-Opción 3-2			
	  Sub-Opción 3-3
	  Sub-Opción 3-4
      
  	
  Opción 4			
      
	  Sub-Opción 3-1
	  Sub-Opción 3-2			
	  Sub-Opción 3-3
	  Sub-Opción 3-4

Como veis he añadido tres clases, una que he llamado navegador para el ul principal de la lista, otra que he llamado subnavegador para cada ul secundario y otra que he llamado desplegable para los enlaces principales de cada subnavegador.

Si ahora viéramos el menú nos saldrían todas las opciones a la vez, lo que sería un poco lío visual para el usuario. Lo que queremos es ocultar los submenús y no mostrarlos hasta que el usuario no quiera verlos. Para ello vamos a empezar por cargar jQuery. Dentro del head de nuestro código html escribiríamos:


   <script type="text/javascript">		
      $(document).ready(function(){ 
         // Aquí irá el código de jQuery.
       });
   script>

En la primera línea hemos cargado jQuery desde la librería de Google. Tened en cuenta que si estáis usando Wordpress no hará falta esta línea ya que Wordpress incorpora jQuery por defecto. Aunque si queréis que Wordpress no utilice su versión de jQuery y preferís que la cargue desde Google lo único que hay que hacer es añadir estas líneas al archivo functions.php de vuestro tema:

if( !is_admin()){
   wp_deregister_script('jquery'); 
   wp_register_script('jquery', ("http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"), false, '1.3.2'); 
   wp_enqueue_script('jquery');
}

Bueno, seguimos. La línea tres lo que dice es que cuando el documento esté listo se ejecute la función que sigue a continuación, que es donde vamos a crear el código para desplegar los submenús. Para una mayor explicación de esta línea podéis ver la Introducción al Curso de jQuery.

Vamos a empezar con las líneas de código de jQuery. Lo primero que queremos hacer es ocultar todos los subnavegadores. Como los hemos identificado a todos ellos con la misma clase haremos:

1	$("ul.subnavegador").hide();

Es decir, primero hemos seleccionado todos los ul con la clase subnavegador. Y luego, a la selección resultante, le hemos aplicado el método de jQuery .hide() que símplemente oculta la selección tal y como si hubiéramos hecho display: none en CSS.

Como habréis visto en el ejemplo, los enlaces que se despliegan llevan una flecha roja que apunta hacia abajo con la finalidad de indicar que son desplegables. Mediante CSS aplico esta flecha roja a los enlaces con la clase desplegable (ver código fuente del ejemplo).

Seguimos con nuestras líneas de jQuery. Ahora lo siguiente que queremos es que cuando se pulse sobre el enlace desplegable se despliegue la lista de opciones del submenu correspondiente. Es decir, queremos que pase esto:

Para ello vamos a utilizar el método .toggle() de jQuery que captura los clicks que hacemos sobre el elemento seleccionado y con cada click ejecuta una acción. El método .toggle() toma dos o más argumentos, cada uno de los cuales es una función. El primer click sobre el elemento hace que se ejecute la primera función, el segundo click hace que se ejecute la segunda función, y así sucesivamente. Vamos a añadir el método a nuestro código, aplicando toggle() sobre cualquier enlace que tenga la clase ‘desplegable’:

$("a.desplegable").toggle(
	function() { 
		// Primera función, que se ejecuta con el primer click 
	},
	function() { 
		// Segunda función, que se ejecuta con el segundo click  
	}				
);

Ahora vamos a ver qué ponemos dentro de cada función. Vamos con la primera. ¿Qué queremos que ocurra con el primer click? Que se despliegue la lista de submenús, pero sólo la de la opción sobre la que se ha hecho click, es decir, sólo el submenú perteneciente al enlace con class=”desplegable” sobre el que se ha hecho click.

Para saber sobre qué elemento específico se ha hecho click utilizamos $this(), que es como decir este, el elemento único sobre el que se ha hecho click de entre los de la selección anterior. Pero no es este elemento el que nos interesa, sino todo el submenú que está oculto y que queremos mostrar, es decir, el ul class=”submenu” que corresponde al enlace cliqueado. ¿Cómo lo seleccionamos? Para ello he seleccionado al padre del elemento a cliqueado (es decir, el “li” padre del “a class=”desplegable” y una vez me he situado ahí he aplicado el método .find() para seleccionar el “ul.submenu” que se encuentra dentro del mismo. A la selección resultante le he aplicado el método de jQuery .slideDown() (es decir deslizar hacia abajo) que hace que cualquier elemento seleccionado que esté oculto se muestre gradualmente incrementándose su tamaño vertical:

1	$(this).parent().find("ul.subnavegador").slideDown('fast');

El método .slideDown puede tener como parámetro opcional la velocidad con la que se va a mostrar el elemento oculto. Puede ser slow (lento), normal o fast (rápido). Si no ponemos nada será normal.

Vamos ahora con la segunda función, la que se ejecutará la segunda vez que hagamos click sobre el mismo elemento:

1	$(this).parent().find("ul.subnavegador").slideUp('fast');

Al igual que antes con $this() seleccionamos el elemento único sobre el que se ha cliqueado (un elemento a class=”desplegable”). Luego seleccionamos a su padre (el li correspondiente) y luego encontramos dentro de este el “ul class=”subnavegador” que vamos a ocultar de manera gradual con el método .slideUp(), que es el contrario de .SlideDown(). El método .slideUp() hace que el elemento o elementos seleccionados no ocultos se oculten gradualmente disminuyendo su altura vertical. Soporta también los parámetros slow, normal y fast.

Con lo cual ya tenemos todo nuestro código de jQuery listo:


<script type="text/javascript">		
  $(document).ready(function(){ // Script del Navegador
    $("ul.subnavegador").hide();				
    $("a.desplegable").toggle(
      function() { 
        $(this).parent().find("ul.subnavegador").slideDown('fast'); 
      },
      function() { 
        $(this).parent().find("ul.subnavegador").slideUp('fast'); 
      }				
    );	
});
script>

Vamos a verlo dentro de todo el código HTML de la página:




  Emenia Demo - Menú vertical desplegable con jQuery
  
  



  	
   Menú vertical desplegable con jQuery
 
   
    Opción 1
    Opción 2
    Opción 3
      
        Sub-Opción 3-1
        Sub-Opción 3-2			
        Sub-Opción 3-3
        Sub-Opción 3-4
      
    	
    Opción 4			
      
        Sub-Opción 3-1
        Sub-Opción 3-2			
        Sub-Opción 3-3
        Sub-Opción 3-4

Os podéis descargar todo el código e imágenes aquí.

Otras lecturas recomendadas

Sobre .toggle(), en la web oficial de jQuery.
Sobre .slideDown() en la web oficial de jQuery.
Sobre .sliceUp() en la web oficial de jQuery.

Curso de jQuery (4): Selectores, Tercera Parte

Juan Diaz-Bustamante — Fri, 13 Nov 2009 13:05:40 +0000

Selectores utilizados para encontrar un elemento

Estos selectores encuentran otros elementos que guardan relación con los elementos previamente seleccionados (como los que encuentran descendientes, antecesores o hermanos de una selección anterior, por ejemplo)

.next(), .nextAll(), .prev(), .prevAll()
Estos métodos son bastante sencillos. Por ejemplo, si quisiéramos seleccionar sólo el elemento único siguiente hermano de cada elemento previamente seleccionado, utilizaríamos .next().

Vamos a ver un ejemplo (tomado de la web oficial de jQuery):

  $(document).ready(function(){
    $("button[disabled]").next().text("Este botón está desactivado");
  });
  script>
  <style>
  span { color:blue; font-weight:bold; }
  button { width:100px; }
  style>
head>
<body>
  <div><button disabled="disabled">Primerobutton> - <span>span>div>
  <div><button>Segundobutton> - <span>span>div>
  <div><button disabled="disabled">Tercerobutton> - <span>span>div>
body>
html>

Lo que hace es encontrar el hermano inmediatamente posterior de cada button con atributo disabled (el span) y cambiar su texto por “Este botón está desactivado”:

Si quisiéramos seleccionar todos los hermanos que siguen al elemento seleccionado utilizaríamos .nextAll(). Por ejemplo, localizar todos los divs que siguen al primero y aplicarles una clase que llamaremos “rojo” y que implica un borde rojo alrededor del DIV (fuente: web oficial de jQuery):





   



  Primer DIV
  DIV hermanoDIV hijo
  DIV hermano
  DIV hermano

El resultado es:

Como vemos, en esta ocasión se ha cargado jQuery desde su web oficial. Esto nos permite (como vimos en la primera parte del curso) cargar siempre la última versión disponible. ¿Es esto recomendable? Depende, ya que hay veces que algún plugin o código que tengamos de jQuery en nuestra web no soporte la última versión de jQuery.

Sus contrarios son .prev() y .prevAll(), que nos sirven para seleccionar a los anteriores en vez de a los siguientes.

.parent(), .parents(), .children(), .siblings()
.parent() obtiene el padre directo de un elemento. Si la selección es de un grupo de elementos, obtiene un grupo de sus padres directos únicos.

Por ejemplo, supongamos el ejemplo anterior cuando veíamos los botones dentro de un Div. En este caso, seleccionaríamos el Div padre de cada botón y le aplicamos la clase rojo (que tendríamos definida en nuestra hoja de estilos como borde rojo) :

1	$("button").parent().addClass("rojo");

.parents() obtiene un grupo de elementos que contienen los antecedentes únicos de el grupo de elementos previamente seleccionados (excepto el elemento raíz).

.children() Obtiene un grupo de elementos que contienen todos los hijos inmediatos únicos de cada grupo de elementos reviamente seleccionados. Mientras .parents() devuelve todos los antecesores, .children() sólo considera los elementos hijo inmediatos.

.siblings() obtiene un grupo de elementos que contienen todos los hermanos únicos del grupo de elementos seleccionados previamente.
Por ejemplo, supongamos que queremos aplicar un fondo blanco a todos los elementos hermanos de “p” que tengan la clase “nombredeclase”:

1	$("p").siblings(".nombredeclase").css("background", "white");

.contents()
Encuentra todos los nodos hijos de los elementos previamente seleccionados (incluyendo textos), o el contenido del documento si el elemento es un iframe.
Por ejemplo, si queremos seleccionar el texto que se encuentra en el interior de los elementos “p” (por ejemplo, para añadirle posteriormente más texto, etc..):

1	$("p").contents();

.add()
Añade más elementos -que cumplan con la selección que se encuentre dentro de los paréntesis de .add()- a la selección de elementos previamente seleccionados.

Por ejemplo, si habíamos seleccionado ya todos los elementos “p” de un documento y queremos añadir también los elementos “span”:

1	$("p").add("span")

.closest()
Este selector se ha introducido por primera vez con jQuery 1.3 Obtiene un grupo de elementos que contenga el elemento padre más cercano que cumpla con el selector especificado, incluyendo al elemento inicial. Comienza comprobando primero si el elemento actual cumple con la selección especificada. Si es así devuelve ese elemento. En caso contrario continúa buscando en el elemento, padre a padre, hasta que encuentra un elemento que cumpla la condición dada. Si no lo encuentra, no devuelve nada. Podéis ver un ejemplo muy interesante en la web oficial de jQuery.

.find()
Devuelve una nueva selección que contiene aquellos elementos descendientes de la selección previa que cumplen la condición dada dentro de los paréntesis de find(). Por ejemplo, si queremos seleccionar todos los span descendientes de elementos p haríamos:

1	$('p').find('span')

Encadenamientos

.not()
Es posible con jQuery seleccionar múltiples grupos de elementos y hacer múltiples cosas con ellos, todo en una única línea de código. Hemos visto que podemos partir de una selección inicial e ir reduciéndola o ampliándola. La nueva selección será la que estará activa para realizar sobre ella cualquier acción. Pero ¿qué pasa con la selección inicial? Podemos volver a ella en cualquier momento gracias al selector .end() Vamos a ver un ejemplo. Supongamos que tenemos:

1	$('div').add('a').css('background','black');

Hemos seleccionado todos los div del documento. Luego hemos creado un nuevo grupo que también contiene los elementos a. Cuando apliquemos el método css() lo haremos sobre el nuevo grupo creado. Pero ¿qué pasa si hacemos esto?:

1	$('div').add('a').css('background','black').end().css('color','red')

Después de aplicar el primer método .css() que crea un fondo negro hemos aplicado el método .end() devolviéndonos a la primera selección de los div sobre los que se aplicará el segundo método .css() que pone el color en rojo.

.andSelf()
Otro método útil para afectar las cadenas de jQuery es el método .andSelf(), que crea un nuevo grupo de elementos a partir de los dos últimos grupos de elementos seleccionados. Por ejemplo:

1	$('div').css('background,'black').children('img').css('border', '5px solid red').andSelf().css('padding','10px');

Hemos seleccionado todos los elementos div y les hemos dado un fondo negro. Después hemos seleccionado todos los elementos img hijos de los div anteriores y a estos les hemos aplicado un borde rojo de 5 píxeles. Y a continuación hemos unido las dos selecciones gracias a .andSelf() y les hemos aplicado a ambas un padding de 10px.

Accediendo directamente a los elementos del DOM: el método get()

Hay ocasiones en las que necesitamos acceder directamente a un elemento del DOM. Para estas ocasiones jQuery ofrece el método .get()

Por ejemplo, para seleccionar todos los elementos div:

1	$('div').get()

O para obtener el primer div( empezamos a contar desde cero):

1	$('div').get(0)

Hasta aquí hemos visto los selectores de jQuery. Ahora la pregunta es: Vale, ya tengo unos elementos de mi web seleccionados. Ahora ¿Qué puedo hacer con ellos? Hemos visto pequeños avances en métodos como .css() para aplicar estilos CSS de manera directa o .addClass() para añadir el nombre de una clase, pero queda mucho por ver.
¡Es en lo que entraremos en futuras entregas!

Mientras tanto, os recomiendo que utilicéis está página para practicar con selectores y ver los resultados que lo que escribimos en tiempo real.

Otros capítulos del curso

Curso de jQuery (1): Introducción
Curso de jQuery (2): Selectores, Primera Parte
Curso de jQuery (3): Selectores, Segunda Parte

Otras lecturas de interés

Web oficial de jQuery
designersmantra.com: jQuery for Absolute Beginners: The Complete Series
Woorkup: jQuery Lesson Series: Introduction to Selectors
Woorkup: jQuery Visual Cheat Sheet
Cherrysave.com: jQuery for Beginners: Selectors, Hierarchies and Attributes, Oh My!
Mariuzzo.com: Capítulo 2, Selectores en jQuery
VTOnline Enseñanza libre (video en Castellano), 01.- Curso de jQuery
VTOnline Enseñanza libre (video en Castellano), 02-Curso-de-jQuery
VTOnline Enseñanza libre (video en Castellano), 03-Curso-de-jQuery

Cómo pre-cargar imágenes con jQuery

Juan Diaz-Bustamante — Sat, 07 Nov 2009 20:11:45 +0000

Hay veces que utilizamos imágenes con javascript (por ejemplo una galería de imágenes) y queremos que se carguen antes de que vayan a ser utilizadas para evitar que luego se perciba el feo efecto de esperar a que la imagen cargue. En la página de inicio de la web de Emenia al situar el cursor del ratón sobre las opciones del menú cambia la imagen de fondo. Para que aparezca la imagen sin esperas utilicé este código:

jQuery.preloadImages = function(){
  for(var i = 0; i<arguments.length; i++){
    jQuery("").attr("src", arguments[i]);
  }
}
// Para utilizar el script y cargar tus imágenes:
$.preloadImages("images/logo.png", "images/logo-face.png", "images/mission.png");

Es aconsejable que lo situéis al final del código, justo antes de cerrar body para que no se demore la carga de toda la página.

Como es lógico necesitamos haber cargado antes jQuery:

1	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js?ver=1.3.2">script>

Si estamos en Wordpress jQuery viene ya incorporado. Sí hay que tener en cuenta que jQuery se inserta donde se encuentre wp_head(), dentro de head.php.

Fuente: Trip Magazine, More jQuery and General Javascript Tips to Improve Your Code

Curso de jQuery (3): Selectores, Segunda Parte

Juan Diaz-Bustamante — Wed, 04 Nov 2009 11:43:37 +0000

Vamos a seguir viendo selectores de jQuery. La mayor parte de los selectores que hemos visto hasta ahora nos permitían ir a través y hacia abajo del DOM (Document Object Model) o árbol de nuestro HTML (por ser más gráficos). Hay ocasiones en las que necesitamos acceder de manera más directa a un elemento. En este caso tenemos a nuestra disposición los métodos transversales, que nos permiten ir hacia arriba, hacia abajo y por todo el DOM sin problemas. En este artículo vamos a ver uno de ellos, los filtros:

Filtros

Son aquellos que concretan una selección de elementos ya realizada aplicando una selección adicional que limita la selección anterior (por ejemplo, hemos seleccionado previamente todos los elementos div y ahora queremos sólo el cuarto div de esa selección). Los filtros se distinguen así de los selectores que encuentran otros elementos que guardan relación con los elementos ya seleccionados (como los que encuentran descendientes, antecesores o hermanos de una selección anterior, por ejemplo, y que veremos en el artículo siguiente). Vamos a ver los filtros más importantes:

El filtro .not()
.not() lo utilizaremos siempre que queramos seleccionar aquellos elementos que no cumplen con un determinado filtro situado dentro de los paréntesis del .not(). Por ejemplo, si queremos añadir un borde a aquellos divs que no tengan un fondo verde o azul (este ejemplo y los siguientes los he tomado de la web oficial de jQuery):

1	$("div").not(".verde, #azul").css("border-color", "red");

Primero selecciona todos los div del documento y luego selecciona aquellos que no tengan la clase ‘verde’ ni el div ‘azul’ y les aplica el estilo correspondiente de CSS.

El filtro .filter()
Otra manera de filtrar una selección de elementos es reducirla a aquellos que sí cumplen con un filtro adicional, y lo hacemos a través de .filter()

Por ejemplo, si queremos cambiar el color de fondo de todos los divs y después poner un borde alrededor de sólo los que tienen la clase ‘centro’

1
2
3

$("div").css("background", "#c8ebcc")
            .filter(".centro")
            .css("border-color", "red");

Y viendo un ejemplo algo más complejo, vamos a aplicar la clase ‘imagen’ a todas las imágenes de un documento, luego vamos a filtrar sólo las que tienen un alt que contenga la palabra ‘importante’ y sólo a esas les vamos a aplicar la clase ‘borde’ (para poder luego aplicarlas un borde a través de CSS o de jQuery, por ejemplo):

1	$('img').addClass('imagen').filter('[alt*=importante]').addClass('borde');

Pero lo que hace a filter() realmente potente es que podemos incluir una función como parámetro del mismo, por ejemplo (obtenido de la web oficial de jQuery):

$("div").css("background", "#b4b0da")
            .filter(function (index) {
                  return index == 1 || $(this).attr("id") == "cuatro";
                })
            .css("border", "3px double red");

lo que hace es aplicar un color de fondo a todos los div del documento y luego filtra con una función (si ponemos como parámetro de la función index tendremos un índice que nos valdrá como contador y que empieza a contar desde cero) el segundo div (el que tiene índice 1) y el div con el id “cuatro” para aplicarles luego un borde rojo de 3px. A través de la función iremos div a div en un bucle devolviendo los que cumplen la condición:

No os preocupéis si no entendéis mucho de lo que se hace, lo importante es ver cómo funciona el selector. Sí destacar que dentro de la función aparece un término nuevo, $(this). Veremos en próximos artículos del curso que $(this) se usa dentro de las funciones y hace referencia al elemento exacto al que afecta la función en ese momento, en este caso el div con id=”cuatro” (en vez de escribir $(div).atrr(‘id’)).

El filtro .slice(comienzo, final)
Hay ocasiones en las que queremos obtener una porción de una determinada selección de elementos basada en la posición de estos elementos dentro de la selección realizada. Entonces utilizamos .slice(), que creará una nueva selección. Admite dos parámetros, un número que indica el inicio (empezando por cero) donde vamos a realizar el corte y otro que indica el final no incluído. Este último valor es opcional. Vamos a ver un ejemplo:

Si seleccionamos todos los elementos p del documento y luego sólo queremos el tercer elemento haríamos:

1	$('p').slice(2,3);

El primer número (donde se empieza a cortar la selección inicial) es un dos porque se empieza a contar desde cero: 0, 1, 2 es decir, empezamos a contar por el tercer elemento. Para el final no incluído pone 3, es decir el cuarto elemento (0,1,2,3) por lo que de todos los p del documento solo se selecciona el tercero.

El filtro .eq()
Reduce el grupo de elementos seleccionados a un elemento único. Su argumento (lo que va entre los paréntesis) es la posición del elemento dentro del grupo de elementos previamente seleccionados (que puede ser un número entre 0 y la longitud completa del número de elementos menos uno, al haber empezado en cero).

Por ejemplo (tomado de la web oficial de jQuery), vamos a cambiar el color de fondo del div con índice 2 (es decir, el tercer div) añadiendo la clase apropiada:

1	$("div").eq(2).addClass("azul");

Y esto es todo. Tenéis algún filtro más en la web oficial de jQuery. El próximo artículo será el último con selectores antes de pasar a la acción con Eventos.

Otros capítulos del curso

Curso de jQuery (1): Introducción
Curso de jQuery (2): Selectores, Primera Parte
Curso de jQuery (4): Selectores, Tercera Parte

Curso de jQuery (2): Selectores, Primera Parte

Juan Diaz-Bustamante — Wed, 28 Oct 2009 07:23:02 +0000

Por un selector entendemos en jQuery lo mismo que en CSS: una forma de permitirnos elegir un elemento (o varios) entre todos los que tenemos en nuestro documento HTML. ¿Para qué? Para luego poder aplicar sobre los elementos seleccionados diversas funciones.

Es decir, jQuery utiliza el poder de los selectores para acceder de una manera rápida y sencilla a un elemento o grupo de elementos del DOM (Document Object Model) y luego poder aplicar sobre los mismos cualquier tipo de instrucción, evento, animación, etc…. Por ejemplo, para aplicar la clase “enlace” a todos los elementos “a” que se encuentren dentro de un elemento “p”. Haríamos:

1	$('p a').addClass('enlace');

Pero vamos a empezar desde el principio. En este artículo vamos a ver cómo crear los selectores más importantes de jQuery.

Antes de nada es importante saber que el DOM (Document Object Model, el esqueleto de nuestra página web) utiliza una estructura de árbol para definir las relaciones entre sus elementos, en la que tenemos padres, hijos, etc… Por ejemplo:

$(’selector’)

No importa qué tipo de selector usemos en jQuery: siempre comenzaremos con $(). Prácticamente todo lo que se pueda usar en CSS se puede también incluir entre esos paréntesis de esta forma $(’selectores’). De tal manera que por ejemplo podríamos hacer:

Selectores CSS

jQuery soporta prácticamente todos los selectores de CSS, con la ventaja de que podemos utilizar selectores de CSS3 que funcionen con Internet Explorer 6 gracias a jQuery. Lo vemos mejor con estos ejemplos:

Selectores propios de jQuery

A la amplia variedad de selectores propios de CSS jQuery añade sus propios selectores. Como característica que les distingue decir que siempre comienzan por dos puntos (:)

Vamos a distinguir entre ellos:

Selectores Posicionales
Estos selectores están basados en las relaciones posicionales entre elementos (como veíamos antes en ejemplo de la estructura del DOM). Como antes, los vamos a ver a través de ejemplos:

Selectores de Formularios
Cuando trabajemos con formularios jQuery nos ofrece una serie de selectores propios que nos permiten seleccionar de manera sencilla el elemento preciso. Vamos a verlos con ejemplos:

En el próximo artículo veremos selectores más avanzados así como combinaciones en cadena de selectores.

Otros capítulos del curso

Curso de jQuery (1): Introducción
Curso de jQuery (3): Selectores, Segunda Parte
Curso de jQuery (4): Selectores, Tercera Parte

Lecturas Recomendadas:

Blog de Andrés Nieto, Selectores CSS que deberías conocer.
Nosolocodigo: Tutorial de iniciación a jQuery : los selectores.
WoorkUp: jQuery Lesson Series: Introduction to Selectors

Curso de jQuery (1): Introducción

Juan Diaz-Bustamante — Wed, 21 Oct 2009 06:22:32 +0000

Voy a comenzar con este artículo un curso básico sobre jQuery, la librería de Javascript probablemente más utilizada en la actualidad.

jQuery fue creada inicialmente por John Resig y nos permite de una manera sencilla y eficiente:
- Acceder a elementos en un documento.
- Modificar la apariencia de una web.
- Alterar el contenido de un documento.
- Responder a una interacción del usuario.
- Animar cambios en un documento.
- Recoger información del servidor sin refrescar la página.
- Tareas diversas de Javascript.

Además nos permite hacerlo sin tener que preocuparnos más por las diferencias entre navegadores, como pasa en muchas ocasiones si utilizamos directamente Javascript.

¿Cómo se añade jQuery a nuestra web?

En primer lugar tenemos que bajarnos la versión más actual de jQuery. Esto lo podemos hacer desde la propia web de jQuery haciendo click sobre el botón Download (jQuery). La versión en el momento de escribir este artículo es la 1.3.2

Una vez tengamos el archivo lo podemos poner en la carpeta donde guardemos los archivos de Javascript del proyecto (por ejemplo js). Luego en la cabecera del código de nuestra web añadimos jQuery como lo haríamos con cualquier archivo de Javascript:




	TITULO DE LA WEB
	
	
	


 // Contenido de la Web

Otra forma alternativa de incluir jQuery, preferida por muchos autores, es descargarla directamente de Google. Se haría así:




	TITULO DE LA WEB
	
	
	


 
  // Contenido de la Web

Si estáis usando Wordpress y queréis que no se utilice la versión que incorpora de jQuery y preferís que la cargue desde Google lo único que hay que hacer es añadir estas líneas al archivo functions.php de vuestro tema:

if( !is_admin()){
   wp_deregister_script('jquery'); 
   wp_register_script('jquery', ("http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"), false, '1.3.2'); 
   wp_enqueue_script('jquery');
}

Y una tercera manera de cargar jQuery, siempre la última versión disponible, es descargarlo de su web oficial:

1	<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js">script>

Bueno, ya tenemos la librería jQuery en nuestra web. Pero esto por sí solo no hace nada. Pero ya podemos incluir cualquier código o funciones de jQuery con vistas a realizar cualquiera de las tareas que antes veíamos que se pueden hacer gracias a jQuery.

¿Cómo se añade código de jQuery?

Para explicar cómo se introduce código de jQuery vamos a comenzar con un ejemplo básico. Vamos a añadir la clase “fondo-destacado” a un Div que tiene un id llamado “contenido”.

Tenemos:




	TITULO DE LA WEB
	
	
	


Esta es una prueba de jQuery

Esta es una prueba de jQuery en la que vamos a añadir la clase "fondo-destacado" al Div con el id="contenido"

Supongamos también que nuestra hoja de estilo default.css tiene la siguiente clase definida:

1	.fondo-destacado { background-color: red; }

Para añadir un código de jQuery que se ejecute en cuanto se cargue el documento de nuestra web (y por lo tanto está ya disponible el div con el id “contenido” de nuestro ejemplo) añadimos las siguientes líneas:

Es decir, cuando el documento (document) esté listo (ready) ejecutar la función que sigue a continuación.

Este comienzo es típico de JQuery y lo que dice es que cuando el documento (document) esté listo (ready) se ejecute la función que sigue a continuación. El documento es el DOM (Document Object Model). Merece la pena distinguir esto de la manera tradicional utilizada en Javascript:

1 2	<script type="text/javascript"> window.onload = function() {

Con window.onload lo que hacíamos es que la función no se iba a ejecutar hasta que no se cargara la web completa (no sólo el DOM), es decir, todas las imágenes y recursos externos. Esto implicaba que si había alguna imagen de carga muy lenta cualquier evento gestionado con Javascript no iba a funcionar hasta que no se cargara esa imagen. Este impedimento lo evitamos con el $(document).ready de JQuery.

En nuestro caso las líneas de código necesarias serán estas:




	TITULO DE LA WEB
	
	
	
        


Esta es una prueba de jQuery

Esta es una prueba de jQuery en la que vamos a añadir la clase "fondo-destacado" al Div con el id="contenido"

La operación fundamental en jQuery es seleccionar la parte del documento sobre la que se va a actuar. Esto se hace con el constructor$(). Normalmente su parámetro, lo que incluimos entre los paréntesis, es una línea de texto que puede incluir cualquier selector de CSS. En este caso queremos encontrar en el documento un Div con un id llamado “contenido”, es decir: $(‘#contenido’). Esto es lo que se llama un selector.

A continuación gracias al método de jQuery .addClass() añadimos una clase de CSS a la parte de la página que hemos seleccionado anteriormente, es decir al Div con id=”contenido”. Su único parámetro es el nombre de la clase, escrito entre comillas: .addClass(‘fondo-destacado’);

Este simple ejemplo muestra cómo funciona jQuery. No es un ejemplo muy útil para situaciones reales, pero nos sirve para introducirnos en el lenguaje. En el siguiente artículo veremos cómo incluir selectores más complejos que el que hemos creado en ejemplo.

Otros capítulos del curso

Curso de jQuery (2): Selectores, Primera Parte
Curso de jQuery (3): Selectores, Segunda Parte
Curso de jQuery (4): Selectores, Tercera Parte

Lecturas recomendadas

netnuts+: jQuery for Absolute Beginners: The Complete Series
CSSTricks: Intro to jQuery 2
SohTanaka: New to jQuery? Don’t be Scurred…
jQuery.com: Página oficial de jQuery

Resaltar un texto importante con jQuery

Juan Diaz-Bustamante — Sat, 03 Oct 2009 08:55:26 +0000

Muchas páginas webs enfatizan algún texto importante situándolo en un cuadro aparte con un estilo diferente, por ejemplo con un tamaño de fuente mayor. Esto lo vemos con mucha frecuencia en periódicos y revistas impresas. Veamos un ejemplo de una revista:

Es lo que llaman en inglés “pull quotes“. Esto lo podemos realizar de una manera sencilla con jQuery utilizando el método .clone()

Vamos a ver en detalle como funciona .clone() mientras creamos nuestro ejemplo. Gracias a jQuery y su método .clone() podemos copiar elementos ya existentes en una web y situar la parte copiada en otra ubicación de la misma web. Una aplicación podría ser copiar nuestra navegación de la cabecera de la página al pie de la misma. Otra sería el objeto de este artículo, copiar un trozo de texto y pegarlo con un estilo diferente que lo enfatice. El método .clone() toma cualquier grupo de elementos seleccionados y crea una copia de los mismos para su uso posterior. Por ejemplo:


Hubo samba masiva sobre la arena de Copacabana para celebrar la elección de Brasil como sede de los Juegos Olímpicos de 2016, sí. 
Pero, al final, caló el convencimiento de que su jefe de Estado, Lula, a 12.000 kilómetros de allí, tenía toda la razón en recetar a su pueblo, una vez recobrada la voz, "trabajo, trabajo y trabajo desde mañana, no desde pasado mañana". 
El inmenso país que dirige el ex sindicalista tiene la responsabilidad de reconstruirse y liderar el crecimiento suramericano alimentado por el maná olímpico.
"Hay que dormir menos y trabajar más", ordenó el presidente-milagro de Brasil.

He copiado un texto de un periódico on-line. El texto que vamos a resaltar es “Hay que dormir menos y trabajar más”, ordenó el presidente-milagro de Brasil.

Este es el texto sin hacer nada aún:

Hubo samba masiva sobre la arena de Copacabana para celebrar la elección de Brasil como sede de los Juegos Olímpicos de 2016, sí.

Pero, al final, caló el convencimiento de que su jefe de Estado, Lula, a 12.000 kilómetros de allí, tenía toda la razón en recetar a su pueblo, una vez recobrada la voz, “trabajo, trabajo y trabajo desde mañana, no desde pasado mañana”.

El inmenso país que dirige el ex sindicalista tiene la responsabilidad de reconstruirse y liderar el crecimiento suramericano alimentado por el maná olímpico.

“Hay que dormir menos y trabajar más”, ordenó el presidente-milagro de Brasil.

Como vemos lo que queremos copiar es el cuarto párrafo del texto. Para seleccionarlo y copiarlo hacemos:

Lo que hemos hecho es:
Línea 1: Cargamos jQuery desde la librería de Google
Línea 3: Mediante jQuery decimos que cuando esté cargado el DOM de la web se ejecute la función que sigue a continuación.
Línea 4: Creamos la selección sobre la que vamos a aplicar .clone(). Será el cuarto elemento p situado dentro del div con la clase contenido-artículo. Como vemos sigue la misma lógica que un selector CSS. ¿Por qué si es el cuarto elemento pone 3? Porque el contador comienza con 0.

Ya tenemos la copia. Pero aún no hemos hecho nada con ella. Es como si la tuviéramos en el portapapeles. Ahora hay que pegarla en la ubicación que elijamos. Vamos a situarla después del segundo párrafo para que esté más o menos en medio. Para ello usamos en método de jQuery .insertAfter():


<script type="text/javascript">
  $(document).ready(function() {
     $('div.contenido-articulo p:eq(3)').clone().insertAfter('div.contenido-articulo p:eq(1)');
  });
script>

Ahora en la línea 4 hemos añadido que el elemento copiado se inserte después (after) del segundo párrafo (eq(1), recordemos que se empieza a contar desde 0) que se encuentre dentro del div con la clase contenido-articulo.

Si lo aplicamos al texto:

Hubo samba masiva sobre la arena de Copacabana para celebrar la elección de Brasil como sede de los Juegos Olímpicos de 2016, sí.

El inmenso país que dirige el ex sindicalista tiene la responsabilidad de reconstruirse y liderar el crecimiento suramericano alimentado por el maná olímpico.

“Hay que dormir menos y trabajar más”, ordenó el presidente-milagro de Brasil.

Vamos que ya tenemos el párrafo copiado y pegado donde queríamos, sin afectar al párrafo original. Ahora vamos a dar un estilo único al nuevo párrafo copiado para diferenciarlo del resto del texto. Para ello utilizaremos el método de jQuery .css(). Este método aplica estilos CSS de la siguiente manera:

.css({
 propiedad1 : 'valor1',
 propiedad2 : 'valor2',
 propiedad3 : 'valor3'
});

Vamos a incluirlo en nuestro código:


<script type="text/javascript">
  $(document).ready(function() {
     $('div.contenido-articulo p:eq(3)').clone()
       .insertAfter('div.contenido-articulo p:eq(1)')
       .css({
         'background': '#e3e3e3',
         'float': 'right',
         'width': '145px',
         'padding': '15px',
         'font': 'italic 1.4em Times, serif'
 });
});
script>

Vamos a ver qué pasa:

Hubo samba masiva sobre la arena de Copacabana para celebrar la elección de Brasil como sede de los Juegos Olímpicos de 2016, sí.

El inmenso país que dirige el ex sindicalista tiene la responsabilidad de reconstruirse y liderar el crecimiento suramericano alimentado por el maná olímpico.

“Hay que dormir menos y trabajar más”, ordenó el presidente-milagro de Brasil.

Vemos nuestro párrafo copiado y pegado a la derecha con un fondo y un tipo de letra diferentes. Es un estilo muy sencillo, pero nos sirve para comprender lo que hemos hecho. Por último indicar que si el elemento a copiar tiene algún evento asignado al mismo habría que utilizar .clone(true) en vez de .clone() a secas para que se copiara también el evento.

Ahora vamos a ver una manera de seleccionar el texto que queremos resaltar de una manera más avanzada. Supongamos que son varios los textos a resaltar en diversos documentos, siendo estos a su vez bastante largos. Evidentemente no podemos estar contando párrafos en cada documento ni creando un código específico de jQuery para cada uno. Lo que haremos será crear una función que nos busque dentro de cada artículo todos los elementos que cumplan con una característica determinada. Por ejemplo, supongamos que cada texto a resaltar lo incluimos dentro de un span al que le asignamos una clase a la que llamaremos “texto-importante” :

Hubo samba masiva sobre la arena de Copacabana para celebrar la elección de Brasil como sede de los Juegos Olímpicos de 2016, sí. Pero, al final, caló el convencimiento de que su jefe de Estado, Lula, a 12.000 kilómetros de allí, tenía toda la razón en recetar a su pueblo, una vez recobrada la voz, “trabajo, trabajo y trabajo desde mañana, no desde pasado mañana”. El inmenso país que dirige el ex sindicalista tiene la responsabilidad de reconstruirse y liderar el crecimiento suramericano alimentado por el maná olímpico. “Hay que dormir menos y trabajar más”, ordenó el presidente-milagro de Brasil.

Ahora el código de jQuery quedaría así:


<script type="text/javascript">
  $(document).ready(function() {
     $('span.texto-importante').each(function() {
      $textoImportante = $(this);
      $parrafoAntecesor = $textoImportante.parent('p');
      $textoImportante.clone()
       .prependTo($parrafoAntecesor)
       .css({
         'background': '#e3e3e3',
         'float': 'right',
         'width': '145px',
         'padding': '15px',
         'font': 'italic 1.4em Times, serif'
   });
 });
});
script>

Vamos a ver los cambios línea a línea:

Línea 4: Buscamos todos los span con la clase texto-importante. Con el método .each() de jQuery lo que conseguimos es crear un ciclo en el que iremos asignando a cada span class=’texto-importante’ la función que sigue a continuación.
Línea 5: Asignamos a la variable $textoImportante el span class=”texto-importante” concreto en el que estemos en nuestro cliclo.
Línea 6: Asignamos a la variable $parrafoAntecesor el elemento p padre o antecesor del span. Lo vamos a usar como referencia para situar ahí nuestro elemento copiado.
Línea8: Con el método de jQuery .prependTo() situamos el elemento copiado dentro de su elemento p antecesor.

Otras lecturas recomendadas:

CSSTricks, Better Pull Quotes: Don’t Repeat Markup
Smashing Magazine, Block Quotes and Pull Quotes: Examples and Good Practices
Elements of Design, Pull Quotes (28 examples)
Pluging para WordPress, Javascript Pull-Quotes
Documentación de jQuery, sobre .clone()

emenia.es » JQuery

Creando un menú vertical desplegable con jQuery (2)

Artículos relacionados:

Elegir una fecha en un formulario con un calendario y jQuery

Uso de jQuery Data Picker

Artículos relacionados:

Lista desplegable y plegable con jQuery

Artículos relacionados:

Creando un menú vertical desplegable con jQuery

Menú vertical desplegable con jQuery

Otras lecturas recomendadas

Artículos relacionados:

Curso de jQuery (4): Selectores, Tercera Parte

Selectores utilizados para encontrar un elemento

Encadenamientos

Accediendo directamente a los elementos del DOM: el método get()

Otros capítulos del curso

Otras lecturas de interés

Artículos relacionados:

Cómo pre-cargar imágenes con jQuery

Artículos relacionados:

Curso de jQuery (3): Selectores, Segunda Parte

Filtros

Otros capítulos del curso

Artículos relacionados:

Curso de jQuery (2): Selectores, Primera Parte

$(’selector’)

Selectores CSS

Selectores propios de jQuery

Otros capítulos del curso

Lecturas Recomendadas:

Artículos relacionados:

Curso de jQuery (1): Introducción

Esta es una prueba de jQuery

Esta es una prueba de jQuery

Otros capítulos del curso

Lecturas recomendadas

Artículos relacionados:

Resaltar un texto importante con jQuery

Otras lecturas recomendadas:

Artículos relacionados: