Eric @ EricBess WebHome

Jquery hasil: stylesheet beralih

DEMO

Yang akrab membuka

Kirim jQuery "secepat mungkin untuk menemukan obyek yang berisi semua 'styleswitch' elemen, dan mereka di saat mouse klik fungsi."
Terlihat baik. Ketika mouse klik di muka dari elemen yang ditentukan, switchStylestyle fungsi akan dipanggil. Mulai sekarang, fokusnya adalah.

$ ( 'Link [@ rel *= gaya]'). Masing-masing (fungsi (i) (

Apa arti kata ini?
JQuery untuk menemukan penulis Yohanes Resig, kepada nasihat. Dia memberi saya langsung jQuery alamat web dari halaman, yang pada sejumlah fitur canggih jQuery (xpath), dapat digunakan untuk menemukan dan beroperasi sejumlah elemen halaman. Jika Anda membaca hal ini anda akan bisa memahami kode misterius frase di atas, yang artinya adalah untuk memberitahu jQuery "untuk menemukan rel dengan semua atribut dan nilai atribut disertakan dalam string 'gaya' link elemen link."

Mari kita lihat cara untuk menyertakan penyusunan master yang gaya, berdiri dua-halaman gaya:

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

Kami semua dapat melihat bahwa terdapat unsur-unsur dari sebuah gaya yang berisi 'gaya' string atribut rel. Oleh karena itu, hasil dalam sekejap, jQuery mudah posisi dari halaman dalam gaya link.

Langkah selanjutnya?

setiap () Fungsi akan melintasi semua link lembar gaya, dan pelaksanaan baris berikutnya kode:

this.disabled = true;
jika (this.getAttribute ( 'judul') == styleName) this.disabled = palsu;

"Pertama, nonaktifkan semua gaya link, dan kemudian membuka switchStylestyle nilai dari properti judul transfer fungsi dari string yang sama gaya"
Yi Bazhua ah, tapi sangat efektif.

Kode

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

  . ready ( function ( ) { $ (Document). Siap (fungsi () ( 
	  ) . click ( function ( ) { $ ( '. Styleswitch'). Klik (fungsi () ( 
		  . getAttribute ( "rel" ) ) ; switchStylestyle (this. getAttribute ( "rel")); 
		  ; kembali palsu; 
	  )); 
	   readCookie ( 'style' ) ; var c = readCookie ( 'gaya'); 
	  c )  switchStylestyle ( c ) ; jika (c) switchStylestyle (c); 
  )); 

  styleName ) { fungsi switchStylestyle (styleName) ( 
	  ) . each ( function ( i ) { $ ( 'Link [@ rel *= gaya]'). Setiap (fungsi (i) ( 
		  = true ; ini. dinonaktifkan = true; 
		  this . getAttribute ( 'title' ) ==  styleName ) this . disabled = false ; jika (this. getAttribute ( 'judul') == styleName) ini. dinonaktifkan = palsu; 
	  )); 
	  ,  styleName , 365 ) ; createCookie ( 'gaya', styleName, 365); 
  ) 

Bagian dari 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 suara, rata-rata: 5 dari 5) Loading ... - Disambut dengan rating untuk artikel ini

20 Juli 2008 Pengarang: eric | Coding, Teknologi Web ^| Trackback? | 1 comments | | 488 dilihat