Eric @ EricBess WebHome

Jquery rezultātus: Stilu pāriet

DEMO

Pazīstami atvēršana

Pastāsti jQuery ", kā ātri vien iespējams, lai atrastu priekšmeta, kas satur visu" styleswitch "elementi, un tie bija tad, kad peles klikšķi funkcijas."
Izskatās labi. Kad peles klikšķus pirms noteiktā elementu, switchStylestyle funkcija būs ". No brīža, uzsvars tiek likts.

$ ( 'Saiti [@ rel *= stilu] "). Katras (funkcija (i) (

Ko šie vārdi nozīmē?
JQuery atrast autors John Resig, viņa konsultācijas. Viņš deva man ir tieša jQuery mājas lapā lapas adresi, par kuru skaits jQuery darbības (xpath), var tikt izmantoti, lai atrastu un darboties vairāki elementi lapu. Ja jūs izlasīt šīs lietas Jums būs iespēja saprast mīklainos kods frāze iepriekš, nozīme ir pateikt jQuery ", lai atrastu ar visām rel atribūtu vērtībām un atribūti, kas ir iekļautas virkni" stils "saite elementi saites."

Pieņemsim, paskatieties uz to, kā arī sagatavošanas kapteinis stilu lapas, divi rezerves lapu stilu lapas:

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

Mēs visi varam redzēt, ka ir elementi, stilu lapas, kas satur "stils" stīgu atribūtu rel. Tādēļ, rezultāti īsumā, jQuery viegli izvietojumu lapu stilu lapas saites.

Nākamais solis?

katrai () funkcija būs traversa visas šīs saites stilu lapas, un īstenošanu, nākamajā rindā kods:

this.disabled = patiesi;
ja (this.getAttribute ( "nosaukums") == styleName) this.disabled = viltus;

"Pirmkārt, atslēgt visu stilu lapas saiti, un pēc tam atveriet nosaukumu, lai jebkurš īpašums, vērtību un funkciju switchStylestyle nodošanu no strings ar tādu pašu stilu lapas"
Yi Bazhua ah, bet ļoti efektīvi.

Kods

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

  . ready ( function ( ) { $ (Dokuments). Ready (funkcija () ( 
	  ) . click ( function ( ) { $ ( ". Styleswitch"). Uzklikšķināt (funkcija () ( 
		  . getAttribute ( "rel" ) ) ; switchStylestyle (this. getAttribute ( "rel")); 
		  ; atgriezties viltus; 
	  )); 
	   readCookie ( 'style' ) ; var c = readCookie ( "Stils"); 
	  c )  switchStylestyle ( c ) ; ja (c) switchStylestyle (c); 
  )); 

  styleName ) { funkciju switchStylestyle (styleName) ( 
	  ) . each ( function ( i ) { $ ( "Link [@ rel *= stilu]"). Katrs (funkcija (i) ( 
		  = true ; to. invalīdu = patiesi; 
		  this . getAttribute ( 'title' ) ==  styleName ) this . disabled = false ; ja (this. getAttribute ( "nosaukums") == styleName) šo. invalīdu = viltus; 
	  )); 
	  ,  styleName , 365 ) ; createCookie ( "stils", styleName, 365); 
  ) 

Daļa no HTML

 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 balsis, vidēji: 5 no 5) Loading ... - Atbalstīja reitingu par šo rakstu

Jūlijs 20, 2008 Autors: Eric | Koda, Web ^{tehnoloģijas} | Trackback? | 1 komentārs | | 335 skatījumi