Eric @ EricBess WebHome

Jquery rezultata: stilova prekidač

DEMO

U poznatom otvaranja

Recite jQuery "što je brže moguće pronaći objekt koji sadrži sve 'styleswitch' elementi, a oni su bili u kad mišem kliknete funkcije."
Izgleda dobro. Kada se klikne mišem unaprijed od navedenih elementa, switchStylestyle funkcija će biti pozvan. Od sada, fokus je.

$ ( 'Link [@ rel *= stilu]'). Svakog (funkcija (i) (

Što znače ove riječi?
JQuery pronaći autor John Resig, na njegov savjet. On mi je dao izravnu jQuery web stranice adresu stranice, na kojima je broj jQuery napredne funkcije (xpath), može se koristiti za pronalaženje i djeluju broj elemenata na stranici. Ako ste pročitali ove stvari koje će moći razumjeti tajanstvene kod frazu gore, što znači da je jQuery reći "da biste pronašli sa svim atribut rel vrijednosti i atributa uključeni u niz 'stil' vezu elemente vezu."

Let's pogledajte kako uključiti pripremu master list stila, dva stand-stranicu list stila:

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

Možemo svi vide da postoje elementi, a list stila koji sadrži 'stil' niz atribut rel. Stoga, rezultati na pogled, jQuery lako pozicioniranje stranice u stilu list vezu.

Sljedeći korak?

svaki () funkcija će zaobilaziti sve ove linkove stilu listova i provedbu sljedeći redak koda:

this.disabled = true;
if (this.getAttribute ( 'title') == styleName) this.disabled = false;

"Prije svega, onemogućite sve u stilu list vezu, a zatim otvoriti naslov za bilo koju vrijednost imovine i funkcija switchStylestyle prijenosa od žice u istom stilu list"
Yi Bazhua Ah, ali vrlo učinkovite.

Šifra

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

  . ready ( function ( ) { $ (Dokument). Spremni (funkcija () ( 
	  ) . click ( function ( ) { $ ( '. Styleswitch'). Pritisnite (funkcija () ( 
		  . getAttribute ( "rel" ) ) ; switchStylestyle (this. getAttribute ( "rel")); 
		  ; return false; 
	  )); 
	   readCookie ( 'style' ) ; var c = readCookie ( 'style'); 
	  c )  switchStylestyle ( c ) ; if (c) switchStylestyle (c); 
  )); 

  styleName ) { funkcija switchStylestyle (styleName) ( 
	  ) . each ( function ( i ) { $ ( 'Link [@ rel *= stilu]'). Svaka (funkcija (i) ( 
		  = true ; to. onemogućen = true; 
		  this . getAttribute ( 'title' ) ==  styleName ) this . disabled = false ; if (this. getAttribute ( 'title') == styleName) ovoga. onemogućen = false; 
	  )); 
	  ,  styleName , 365 ) ; createCookie ( 'style', styleName, 365); 
  ) 

Dio 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 glasova, prosjek: 5 od 5) Učitavanje ... - Pozdravio rating za ovaj članak

20. srpanj 2008 Autor: Eric | kodiranju, Web tehnologije ^| Trackback? | 1 komentar | | 410 pregleda