JQuery účinky: stylesheet switch

Obeznámeni s otevřením

$ (Document). Připravena (function () (
$ ( '. Styleswitch'). Proklik (function ()

Řekněte jQuery "co nejrychleji najít všechny obsahovat název objektu 'styleswitch' prvky, a kliknutím myši, kdy byly provádění funkce."
Vypadá to dobře. Když myši klikněte na předem stanovené-prvky, switchStylestyle funkce se bude nazývat. Od této chvíle se soustředit.

$ ( 'Link [@ rel *= styl]'). Každém (function (i) (

Co tato slova znamenají?
JQuery zjištěno autora Johna Resig, na jeho radu. Pokud budete číst tyto věci a můžete vidět, že výše uvedené věty tajemný kód smyslu se říct jQuery "najít všechny kapely rel atribut a hodnotu atributu obsahuje řetězec 'styl' na odkaz odkaz prvky."

Podívejme se na to, jak připravit velitele styl obsahuje dvě stránky zpět nahoru-styl:

^? Zobrazit zákoníku HEAD

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

Vidíme všechny styly, které obsahuje všechny obsahují 'styl' řetězec atributu rel. Z toho vyplývá, že výsledky na první pohled, jQuery jednoduše vyhledat stránky stylů odkaz.

V dalším kroku?

každý () funkce procestovat všech těchto stylů link, a na další řádek kódu:

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

"V první řadě vypnout všechny styly odkaz, a poté otevřete jakýkoli titul hodnotu atributu switchStylestyle funkce a předat řetězec za stejné styl"
Ah pochopil, ale velmi účinná.

Kód

^? Zobrazit kód JAVASCRIPT

  . ready ( function ( ) { $ (Dokument). Připraven (function () ( 
	  ) . click ( function ( ) { $ ( '. Styleswitch'). Klepněte na tlačítko (function () ( 
		  . getAttribute ( "rel" ) ) ; switchStylestyle (this. getAttribute ( "rel")); 
		  ; return false; 
	  )); 
	   readCookie ( 'style' ) ; var c = readCookie ( 'styl'); 
	  c )  switchStylestyle ( c ) ; if (c) switchStylestyle (c); 
  )); 

  styleName ) { Funkce switchStylestyle (styleName) ( 
	  ) . each ( function ( i ) { $ ( 'Link [@ rel *= styl]'). Každý (function (i) ( 
		  = true ; to. postižené = true; 
		  this . getAttribute ( 'title' ) ==  styleName ) this . disabled = false ; if (this. getAttribute ( 'title') == styleName) tohle. postižené = false; 
	  )); 
	  ,  styleName , 365 ) ; createCookie ( 'styl', styleName, 365); 
  )

HTML část

^? Zobrazit kód HTML

 <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 hlasů, průměr: 5 z 5)

Načítám ...

- Vítejte hodnocení pro tento článek

Ne dary v posledních 180 days.Who učinit dar ponechá zprávy zde. Darujte teď.

Jedná se o wordpress plugin WP-dárců. Poskytuje inteligentní funkce pro darování autoleave sponzora Informace v tomto kontejneru po zaplacení. Lidé mohou darovat a předloží jména / URL nebo textlink AD. Informace o nejnovějších dárci jsou zobrazeny v oblaku. K Další osoba věnuje, tím větší bude jejich vztah be.It 's podpoří nejoblíbenější platební rozhraní v budoucnosti. ParPal Jen ten první. Více ..

Powered By: WP-dárců