Eric @ EricBess WebHome

JQuery efectes: canviar d'estil

DEMO

Familiaritzat amb l'obertura

JQuery dir "el més ràpidament possible per trobar tots contenen nom d'objecte 'styleswitch" elements, i prémer el botó del ratolí quan es l'aplicació d'una funció. "
Es veu bé. Quan el ratolí per fer clic prèviament determinat element, switchStylestyle funció serà anomenat. A partir d'ara ser l'enfocament.

$ ( "Link [@ rel *= estil]»). Cadascun (funció (i) (

Què signifiquen aquestes paraules?
JQuery trobar l'autor de Juan dimissió, al seu assessorament. Si vostè llegeix aquestes coses i es pot veure que per sobre de la misteriosa frase codi sentit és a dir a jQuery "per trobar totes la banda atribut rel i valor de l'atribut conté la cadena" estil "de la relació vincular elements".

Vegem com preparar un full d'estil mestre de dues pàgines conté còpies de seguretat de full d'estils:

 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" /> 

Podem veure tota la fulla d'estils que conté totes contenen un "estil" cadena atribut rel. Per tant, els resultats d'un cop d'ull, jQuery localitzar fàcilment el full d'estil de pàgina enllaç.

El següent pas?

cada () funció recorrerà totes aquestes fulles d'estil vincle, i l'aplicació de la següent línia de codi:

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

"En primer lloc, desactivar totes les fulles d'estil vincle i, a continuació, obriu qualsevol títol valor de l'atribut switchStylestyle funció i passar la cadena en el mateix estil de pàgina"
Ah captat, però molt eficaç.

Codi

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

  . ready ( function ( ) { $ (Document). Llest (funció () ( 
	  ) . click ( function ( ) { $ ( '. Styleswitch'). Feu clic a (funció () ( 
		  . getAttribute ( "rel" ) ) ; switchStylestyle (this. getAttribute ( "rel")); 
		  ; return false; 
	  )); 
	   readCookie ( 'style' ) ; var c = readCookie ( 'estil'); 
	  c )  switchStylestyle ( c ) ; if (c) switchStylestyle (c); 
  )); 

  styleName ) { funció switchStylestyle (styleName) ( 
	  ) . each ( function ( i ) { $ ( 'Link [@ rel *= estil] »). Cadascun (funció (i) ( 
		  = true ; aquest. discapacitats = true; 
		  this . getAttribute ( 'title' ) ==  styleName ) this . disabled = false ; if (this. getAttribute ( 'title') == styleName) això. discapacitats = false; 
	  )); 
	  ,  styleName , 365 ) ; createCookie ( «estil», styleName, 365); 
  ) 

HTML part

 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 vots, promig: 5 fora de 5) Carregant ... - Benvingut d'aquest article

20 de juliol de 2008 Autor: Eric | Codificació, tecnologia Web | ^{Trackback |} 1 comentari | | 594 visites