jQuery bukan muat semula menukar tema kulit contoh explanation_jquery

Fungsi penukaran kulit tema digunakan dalam banyak tapak web dan sistem Pengguna boleh menetapkan gaya warna tema kegemaran mereka mengikut fungsi ini, yang meningkatkan pengalaman pengguna. Artikel ini akan memberi tumpuan kepada cara menggunakan jQuery untuk melaksanakan fungsi menukar kulit tema dengan satu klik tanpa menyegarkan.

Prinsip melaksanakan fungsi ini adalah untuk menukar fail CSS tema yang kini dirujuk oleh halaman dengan mengklik pada gaya tema yang ditentukan, dan menulis gaya tema semasa ke dalam kuki atau ke dalam pangkalan data supaya pada kali berikutnya pengguna melawat semula halaman , apa yang dipanggil ialah gaya tema yang ditetapkan kali terakhir.
Sediakan gaya kulit tema
Mula-mula, saya menyediakan tiga fail CSS helaian gaya, iaitu tiga gaya kulit tema, memperkenalkannya ke dalam halaman dan meletakkannya di antara

<link title="default" rel="stylesheet" type="text/css" href="css/default.css" /> 
<link title="blue" rel="stylesheet" type="text/css" href="css/blue.css" disabled="disabled" /> 
<link title="brown" rel="stylesheet" type="text/css" href="css/brown.css" disabled="disabled" /> 

Perhatikan bahawa saya menambahkan atribut tajuk pada setiap untuk tujuan Selain itu, saya melumpuhkan fail CSS kedua dan ketiga, yang bermaksud bahawa fail CSS pertama berkuat kuasa secara lalai.
XHTML

<ul id="styles"> 
 <li id="default">经典</li> 
 <li id="blue">淡蓝</li> 
 <li id="brown">棕色</li> 
</ul> 

Tiga gaya tema digunakan untuk penukaran klik Harap maklum bahawa saya menambahkan atribut id pada setiap li secara berasingan.
CSS

ul#styles{margin-top:10px} 
ul#styles li{float:left; width:50px; height:40px; line-height:40px; padding:2px; 
margin-left:10px; border:1px solid #fff; text-align:center; color:#fff; cursor:pointer} 
ul#styles li.cur{border:1px solid #369; background-image:url(images/selected.gif); 
background-repeat:no-repeat; background-position:4px 32px} 
ul#styles li#default{background-color:#162934;} 
ul#styles li#blue{background-color:#90c5e7} 
ul#styles li#brown{background-color:#601f00} 

Gunakan CSS untuk memaparkan XHTML, dengan ul#styles li.cur merujuk kepada gaya di bawah tema yang dipilih semasa saya menggunakan tanda semak kecil untuk menunjukkan tema yang dipilih.
jQeury
Mula-mula kita perlu memperkenalkan perpustakaan jquery dan pemalam jquery.cookie. Pemalam jquery.cookie menyediakan fungsi operasi kuki yang berkuasa untuk jQuery Anda tidak perlu menulis javascript asli yang rumit, cuma hubungi pemalam secara terus. Mengenai penggunaan pemalam ini, sila baca artikel di tapak ini:

<script type="text/javascript" src="js/jquery.js"></script> 
<script type="text/javascript" src="js/jquery.cookie.js"></script> 

Seterusnya, apabila pengguna mengklik untuk menukar untuk memilih tema, tindakan berikut akan berlaku: dapatkan tema (id) yang dipilih, semak fail CSS yang dirujuk dan jika didapati bahawa nilai atribut tajuknya betul-betul sama dengan nilai id tema yang dipilih pada masa ini, kemudian Gunakan fail CSS tema, lumpuhkan fail CSS rujukan lain, tulis tema yang dipilih pada masa ini ke dalam kuki, tetapkan masa tamat tempoh kuki, dan akhirnya tetapkan butang tema yang dipilih (li) kepada yang dipilih pada masa ini negeri. Lihat kod di bawah untuk butiran:

$("#styles li").click(function(){ 
 var style = $(this).attr("id"); 
 $("link[title='"+style+"']").removeAttr("disabled"); 
 $("link[title!='"+style+"']").attr("disabled","disabled"); 
 $.cookie("mystyle",style,{expires:30}); 
 $(this).addClass("cur").siblings().removeClass("cur"); 
}); 

Perhatikan bahawa dalam contoh ini saya menyimpan gaya yang dipilih dalam kuki pengguna Nama kuki ialah "gaya saya", nilainya ialah nilai tema yang dipilih pada masa ini dan masa lalu ialah 30 hari, iaitu: tamat tempoh:30<.> Apa yang perlu dilakukan seterusnya ialah membaca nilai kuki tema apabila halaman dimuatkan Jika kuki tema wujud, panggil fail CSS gaya tema yang sepadan dengan nilai kuki dan tetapkan status butang tema semasa kepada keadaan yang dipilih. panggil gaya lalai. Kodnya adalah seperti berikut:

var cookie_style = $.cookie("mystyle"); 
if(cookie_style==null){ 
 $("link[title='default']").removeAttr("disabled"); 
 $("#styles li#default").addClass("cur"); 
}else{ 
 $("link[title='"+cookie_style+"']").removeAttr("disabled"); 
 $("#styles li[id='"+cookie_style+"']").addClass("cur"); 
 $("link[title!='"+cookie_style+"']").attr("disabled","disabled"); 
} 

Tambahkan dua keping kod di atas pada $(function(){}), dan kerja selesai.

Perlu dinyatakan bahawa
kuki yang digunakan dalam artikel ini merekodkan gaya kulit tema yang dipilih oleh pengguna, tetapi apabila kuki tamat tempoh atau pengguna mengosongkan COOKIE penyemak imbas, atau pengguna beralih ke penyemak imbas lain untuk menyemak imbas , tema yang ditetapkan pada masa ini akan menjadi tidak sah. Untuk membolehkan pengguna menyimpan gaya tema yang dipilih secara kekal, tema yang dipilih mesti sepadan dengan maklumat pengguna dan ditulis ke pangkalan data Pengguna boleh terus membaca tema tersebut apabila dia log masuk. Sudah tentu, kaedah ini harus digunakan dalam sistem dengan kebenaran pengguna , seperti sistem pengurusan bahagian belakang, pusat peribadi, dsb.

Di atas adalah keseluruhan kandungan artikel ini. Kandungannya sangat terperinci dan mudah untuk difahami dan dibaca oleh semua orang.