Eric @ EricBess WebHome

JQuery efectos: cambiar de estilo

DEMO

Familiarizado con la apertura

JQuery decirle "lo más rápidamente posible para encontrar todos contienen nombre de objeto 'styleswitch" elementos, y pulsar el botón del ratón cuando se la aplicación de una función. "
Se ve bien. Cuando el ratón para hacer clic previamente determinado elemento, switchStylestyle función será llamado. A partir de ahora ser el enfoque.

$ ( "Link [@ rel *= estilo]»). Cada uno (función (i) (

¿Qué significan estas palabras?
JQuery encontrar el autor de Juan dimisión, a su asesoramiento. Si usted lee estas cosas y se puede ver que por encima de la misteriosa frase código sentido es decir a jQuery "para encontrar todas la banda atributo rel y valor del atributo contiene la cadena" estilo "de la relación vincular elementos".

Veamos cómo preparar una hoja de estilo maestro de dos páginas contiene copias de seguridad de hoja de estilos:

 1 
 2 
 3 

  <link rel="stylesheet" type="text/css" href="styles1.css" title="styles1" media="screen" /> 
  <link rel="alternate stylesheet" type="text/css" href="styles2.css" title="styles2" media="screen" /> 
  <link rel="alternate stylesheet" type="text/css" href="styles3.css" title="styles3" media="screen" /> 

Podemos ver toda la hoja de estilos que contiene todas contienen un "estilo" cadena atributo rel. Por lo tanto, los resultados de un vistazo, jQuery localizar fácilmente la hoja de estilo de página enlace.

El siguiente paso?

cada () función recorrerá todas estas hojas de estilo vínculo, y la aplicación de la siguiente línea de código:

this.disabled = true;
if (this.getAttribute ( 'título') == styleName) this.disabled = false;

"En primer lugar, desactivar todas las hojas de estilo vínculo y, a continuación, abra cualquier título valor del atributo switchStylestyle función y pasar la cadena en el mismo estilo de página"
Ah captado, pero muy eficaz.

Código

 1 
 2 
 3 
 4 
 5 
 6 
 7 
 8 
 9 
 10 
 11 
 12 
 13 
 14 
 15 
 16 

  . ready ( function ( ) { $ (Document). Listo (función () ( 
	  ) . click ( function ( ) { $ ( '. Styleswitch'). Haga clic en (función () ( 
		  . getAttribute ( "rel" ) ) ; switchStylestyle (this. getAttribute ( "rel")); 
		  ; return false; 
	  )); 
	   readCookie ( 'style' ) ; var c = readCookie ( 'estilo'); 
	  c )  switchStylestyle ( c ) ; if (c) switchStylestyle (c); 
  )); 

  styleName ) { función switchStylestyle (styleName) ( 
	  ) . each ( function ( i ) { $ ( 'Link [@ rel *= estilo] »). Cada uno (función (i) ( 
		  = true ; este. discapacitados = true; 
		  this . getAttribute ( 'title' ) ==  styleName ) this . disabled = false ; if (this. getAttribute ( 'title') == styleName) esto. discapacitados = false; 
	  )); 
	  ,  styleName , 365 ) ; createCookie ( «estilo», styleName, 365); 
  ) 

HTML parte

 1 
 2 
 3 
 4 
 5 

 <ul> 
	  <li> <a href="serversideSwitch.html?style=style1" rel="styles1" class="styleswitch"> styles1 </ a> </ li> 
	  <li> <a href="serversideSwitch.html?style=style2" rel="styles2" class="styleswitch"> styles2 </ a> </ li> 
	  <li> <a href="serversideSwitch.html?style=style3" rel="styles3" class="styleswitch"> styles3 </ a> </ li> 
  </ Ul> 

(1 votos, promedio: 5 fuera de 5) Cargando ... - Bienvenido de este artículo

20 de julio de 2008 Autor: Eric | Codificación, tecnología Web | ^{Trackback |} 1 comentario | | 609 visitas