Eric @ EricBess WebHome

Jquery resultaten: Schakel stylesheetsjabloon

DEMO

De bekende opening

Vertel jQuery "zo snel mogelijk te vinden dat het object bevat alle 'styleswitch' elementen, en ze waren toen in een muisklik functies."
Ziet er goed uit. Wanneer de muis klikken op voorhand van de gespecificeerde element, switchStylestyle functie zal worden aangeroepen. Van nu af aan, de focus is.

$ ( 'Link [@ rel *= stijl]'). Per stuk (functie (i) (

Wat betekenen deze woorden?
JQuery bij het vinden van de auteur van John aftreden, aan zijn advies. Hij gaf me een directe jQuery website-adres van de pagina, waarop een aantal geavanceerde functies jQuery (XPath), kunnen worden gebruikt voor het vinden en exploiteren van een aantal elementen van de pagina. Als je deze dingen zult kunnen begrijpen de mysterieuze code zinsnede aangehaald, de betekenis ervan te vertellen jQuery "te vinden met alle rel attribuutwaarden en attributen opgenomen in de string 'stijl' link elementen van de band."

Laten we eens een kijkje nemen in de wijze waarop de voorbereiding van een master-style sheet, de twee stand-pagina style sheet:

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

We kunnen allemaal zien dat er elementen van een style sheet met 'stijl' string attribuut rel. Daarom worden de resultaten in een oogopslag jQuery gemakkelijk positioneren van de pagina in de style sheet link.

De volgende stap?

elke ()-functie zoekt in al deze links style sheets, en de uitvoering van de volgende regel code:

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

"Allereerst, schakel alle style sheet link, en open vervolgens de titel aan de eigendommen waarde en functie switchStylestyle overdracht van de snaren van dezelfde style sheet"
Yi Bazhua ah, maar zeer doeltreffend.

Code

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

  . ready ( function ( ) { $ (Document). Ready (function () ( 
	  ) . click ( function ( ) { $ ( '. Styleswitch'). Klik (function () ( 
		  . getAttribute ( "rel" ) ) ; switchStylestyle (this. getAttribute ( "rel")); 
		  ; return false; 
	  )); 
	   readCookie ( 'style' ) ; c = var readCookie ( 'stijl'); 
	  c )  switchStylestyle ( c ) ; if (c) switchStylestyle (c); 
  )); 

  styleName ) { functie switchStylestyle (styleName) ( 
	  ) . each ( function ( i ) { $ ( 'Link [@ rel *= stijl]'). Elke (function (i) ( 
		  = true ; dit. disabled = true; 
		  this . getAttribute ( 'title' ) ==  styleName ) this . disabled = false ; if (this. getAttribute ( 'title') == styleName) dit. disabled = false; 
	  )); 
	  ,  styleName , 365 ) ; createCookie ( "stijl", styleName, 365); 
  ) 

Een deel van de 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 stemmen, gemiddelde: 5 uit 5) Laden ... - Is ingenomen met de rating voor dit artikel

20 juli, 2008 Auteur: eric | Codering, Web ^Technologie | Trackback? | 1 reactie | | 93 views