Eric @ EricBess WebHome

JQuery effets: changer de feuille de style

DEMO

Familier avec l'ouverture

Dites jQuery "pour trouver la plus grande vitesse dans tous les objets contenant le nom 'styleswitch' éléments, et un clic de la souris quand ils ont été la mise en œuvre d'une fonction."
Looks good. Lorsque la souris pour cliquer sur les pré-élément, switchStylestyle fonction sera appelée. A partir de maintenant faire l'objet.

$ ( 'Link [@ rel *= style] "). Chacun (function (i) (

Que signifient ces mots?
JQuery trouve l'auteur de John démission, à son avis. Si vous lisez ces choses et vous pouvez le voir ci-dessus que le sens mystérieux code phrase est à dire jQuery "pour trouver toutes les bandes attribut rel et la valeur d'attribut contient la chaîne" style "de la liaison des éléments de lien."

Penchons-nous sur la façon de préparer une feuille de style master comporte deux pages de back-up feuille de style:

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

Nous pouvons tous voir la feuille de style qui contient tous contenir un 'style' string attribut rel. Par conséquent, les résultats en un coup d'oeil, jQuery localiser facilement la page feuille de style lien.

La prochaine étape?

each () fonction traverse l'ensemble de ces feuilles de style de lien, et la mise en œuvre de la ligne de code suivante:

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

"Tout d'abord désactiver toutes les feuilles de style de lien, puis ouvrez une valeur de l'attribut title switchStylestyle la fonction et de passer la chaîne sur la même feuille de style"
Ah compris, mais très efficace.

Code

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

  . ready ( function ( ) { $ (Document). Prêt (function () ( 
	  ) . click ( function ( ) { $ ( '. Styleswitch »). Cliquez sur (function () ( 
		  . getAttribute ( "rel" ) ) ; switchStylestyle (this. getAttribute ( "rel")); 
		  ; return false; 
	  )); 
	   readCookie ( 'style' ) ; var c = readCookie ( 'style'); 
	  c )  switchStylestyle ( c ) ; if (c) switchStylestyle (c); 
  )); 

  styleName ) { fonction switchStylestyle (styleName) ( 
	  ) . each ( function ( i ) { $ ( 'Link [@ rel *= style] "). Chaque (function (i) ( 
		  = true ; ce. disabled = true; 
		  this . getAttribute ( 'title' ) ==  styleName ) this . disabled = false ; if (this. getAttribute ( 'title') == styleName) ce. disabled = false; 
	  )); 
	  ,  styleName , 365 ) ; createCookie ( 'style', styleName, 365); 
  ) 

HTML partie

 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 votes, average: 5 out of 5) Chargement ... - Bienvenue avis sur cet article

20 juillet 2008 Auteur: eric | Coding, les technologies du Web | ^{Trackback |} 1 commentaire | | 593 vues