Eric @ EricBess WebHome

Jquery risultati: passare foglio di stile

DEMO

La familiarità apertura

JQuery raccontare "il più rapidamente possibile per trovare l'oggetto che contiene tutte 'styleswitch' elementi, e nel momento in cui un clic del mouse funzioni".
Guarda bene. Quando il clic del mouse in anticipo di elemento specificato, switchStylestyle funzione sarà chiamato. Da ora in poi, l'attenzione è rivolta.

$ ( 'Link [@ rel *= stile]'). Ciascuno (function (i) (

Che cosa significano queste parole?
JQuery a trovare l'autore di John Resig, per i suoi consigli. Egli mi ha dato una diretta jQuery indirizzo web della pagina, in cui un certo numero di caratteristiche avanzate jQuery (XPath), può essere utilizzato per trovare e gestire un certo numero di elementi della pagina. Se leggete queste cose vi saranno in grado di capire il misterioso codice frase di cui sopra, il significato è quello di raccontare jQuery "per trovare con tutti i valori di attributo rel e gli attributi inclusi nella stringa di 'stile' link elementi del collegamento."

Diamo un'occhiata a come comprendere la preparazione di un master foglio di stile, i due stand-pagina foglio di stile:

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

Possiamo vedere tutti che vi sono elementi di un foglio di stile che contiene 'stile' stringa attributo rel. Pertanto, i risultati in un colpo d'occhio, jQuery facile posizionamento della pagina nel foglio di stile link.

Il prossimo passo?

ogni () funzione di attraversare tutti questi link fogli di stile, e l'attuazione della prossima riga di codice:

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

"Prima di tutto, disattivare tutti i fogli di stile link, e quindi aprire il titolo di qualsiasi valore della proprietà switchStylestyle e la funzione di trasferimento da corde dello stesso foglio di stile"
Yi Bazhua ah, ma molto efficace.

Codice

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

  . ready ( function ( ) { $ (Documento). Ready (function () ( 
	  ) . click ( function ( ) { $ ( '. Styleswitch'). Fare clic sul pulsante (funzione () ( 
		  . getAttribute ( "rel" ) ) ; switchStylestyle (this. getAttribute ( "rel")); 
		  ; return false; 
	  )); 
	   readCookie ( 'style' ) ; var c = readCookie ( 'style'); 
	  c )  switchStylestyle ( c ) ; if (c) switchStylestyle (c); 
  )); 

  styleName ) { funzione switchStylestyle (styleName) ( 
	  ) . each ( function ( i ) { $ ( 'Link [@ rel *= stile]'). Ciascuna (function (i) ( 
		  = true ; presente. disabili = true; 
		  this . getAttribute ( 'title' ) ==  styleName ) this . disabled = false ; if (this. getAttribute ( 'titolo') == styleName) presente. disabili = false; 
	  )); 
	  ,  styleName , 365 ) ; createCookie ( 'stile', styleName, 365); 
  ) 

Parte del codice 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 voti, media: 5 su 5) Caricamento in corso ... - Ha accolto con favore la classificazione per questo articolo

Luglio 20, 2008 Autore: Eric | codificazione delle merci, Web Technology ^| Trackback? | 1 commento | | 410 viste