jQuery之换肤与cookie插件
有時(shí)候一個(gè)網(wǎng)頁(yè)可以有多個(gè)皮膚進(jìn)行選擇，也就是不同的背景，或是一整套新的css，能使整個(gè)頁(yè)面變成另一種風(fēng)格。
這個(gè)功能可以用jQuery來實(shí)現(xiàn)。外加cookie插件。有了cookie，就可以長(zhǎng)時(shí)間的保存選擇后的背景樣式，而不至于每次刷新界面都會(huì)轉(zhuǎn)入默認(rèn)的畫面。
效果如下：
代碼之div+css研讀：
按 Ctrl+C 復(fù)制代碼
<body>
<ul id="skin">
<li id="skin_0" title="灰色" class="selected">灰色</li>
<li id="skin_1" title="紫色">紫色</li>
<li id="skin_2" title="紅色">紅色</li>
<li id="skin_3" title="天藍(lán)色">天藍(lán)色</li>
<li id="skin_4" title="橙色">橙色</li>
<li id="skin_5" title="淡綠色">淡綠色</li>
</ul>
</body>
按 Ctrl+C 復(fù)制代碼
按 Ctrl+C 復(fù)制代碼
#div_side_0,#div_side_1
{
float:left;
width:120px;
height:450px;
}
#skin
{
margin:10px;
padding:5px;
width:210px;
padding-right:0px;
list-style:none;
border: 1px solid #CCCCCC;
overflow:hidden;//
visible
默認(rèn)值。內(nèi)容不會(huì)被修剪，會(huì)呈現(xiàn)在元素框之外。
hidden
內(nèi)容會(huì)被修剪，并且其余內(nèi)容是不可見的。
scroll
內(nèi)容會(huì)被修剪，但是瀏覽器會(huì)顯示滾動(dòng)條以便查看其余的內(nèi)容。
auto
如果內(nèi)容被修剪，則瀏覽器會(huì)顯示滾動(dòng)條以便查看其余的內(nèi)容。
inherit
規(guī)定應(yīng)該從父元素繼承 overflow 屬性的值。
#skin li{
float:left;
margin-right:5px;
width:15px;
height:15px;
text-indent:-999px;/text-indent是用來設(shè)定文本塊中第一行的縮進(jìn)/
overflow:hidden;
display:block; /
none 此元素不會(huì)被顯示。
block 此元素將顯示為塊級(jí)元素，此元素前后會(huì)帶有換行符。
inline 默認(rèn)。此元素會(huì)被顯示為內(nèi)聯(lián)元素，元素前后沒有換行符。
/
cursor:pointer;
background-image:url(theme.gif);
}
#skin_0{
background-position:0px 0px;
}
#skin_1{
background-position:15px 0px;
}
#skin_2{
background-position:35px 0px;
}
#skin_3{
background-position:55px 0px;
}
#skin_4{
background-position:75px 0px;
}
#skin_5{
background-position:95px 0px;
}
#skin_0.selected{
background-position:0px 15px !important;
}
#skin_1.selected{
background-position:15px 15px !important;
}
#skin_2.selected{
background-position:35px 15px !important;
}
#skin_3.selected{
background-position:55px 15px !important;
}
#skin_4.selected{
background-position:75px 15px !important;
}
#skin_5.selected{
background-position:95px 15px !important;
}
按 Ctrl+C 復(fù)制代碼
在html部分，通過一個(gè)ul、li來進(jìn)行導(dǎo)航的布局。兩個(gè)div進(jìn)行內(nèi)容的布局。在ul中設(shè)置了margin、padding、width、list-style、border、overflow等值。
在li中設(shè)置了float、width、height等。這里的背景圖片用的很巧妙。
background-position 屬性設(shè)置背景圖像的起始位置。
這個(gè)屬性設(shè)置背景原圖像（由 background-image 定義）的位置，背景圖像如果要重復(fù)，將從這一點(diǎn)開始。巧妙的利用了position+位置的組合。
當(dāng)選中時(shí)，x位置不變，y位置向下移動(dòng)15px，這樣就會(huì)出現(xiàn)打鉤的那個(gè)畫面。這種處理非常之巧妙。
用一個(gè)圖片，解決了很多問題。
下面進(jìn)行jQuery代碼的研讀
版本一：
按 Ctrl+C 復(fù)制代碼
<script type="text/javascript">
//<![CDATA[
$(function(){
var $li =$("#skin li");
$li.click(function(){
$("#"+this.id).addClass("selected") //當(dāng)前<li>元素選中，this是js對(duì)象，$(this)是jQuery對(duì)象。
.siblings().removeClass("selected"); //去掉其它同輩<li>元素的選中
$("#cssfile").attr("href","css/"+this.id+".css"); //設(shè)置不同皮膚
})
})
//]]>
</script>
按 Ctrl+C 復(fù)制代碼
這里是簡(jiǎn)單的實(shí)現(xiàn)了效果，更換按鈕，更換皮膚。
但是并沒有實(shí)現(xiàn)cookie。
這段代碼主要實(shí)現(xiàn)兩個(gè)動(dòng)作，一個(gè)是變換按鈕的選中狀態(tài)，一個(gè)是改變相應(yīng)的皮膚css。通過js對(duì)象this獲得標(biāo)簽為this.id的jQuey對(duì)象，這種處理也很巧妙。
另一個(gè)，將css文件名命名與屬性id相結(jié)合，也很巧妙。
修改cssfile的屬性值href為新的css。
版本二：
按 Ctrl+C 復(fù)制代碼
<script type="text/javascript">
//<![CDATA[
$(function(){
var $li =$("#skin li");
$li.click(function(){
$("#"+this.id).addClass("selected") //當(dāng)前<li>元素選中
.siblings().removeClass("selected"); //去掉其它同輩<li>元素的選中
$("#cssfile").attr("href","css/"+ (this.id) +".css"); //設(shè)置不同皮膚
$.cookie( "MyCssSkin" , this.id , { path: '/', expires: 10 });
});
var cookie_skin = $.cookie( "MyCssSkin");//將MyCssSkin這個(gè)cookie值this.id賦給變量cookie_skinif (cookie_skin) {
$("#"+cookie_skin).addClass("selected") //當(dāng)前<li>元素選中
.siblings().removeClass("selected"); //去掉其它同輩<li>元素的選中
$("#cssfile").attr("href","css/"+ cookie_skin +".css"); //設(shè)置不同皮膚
$.cookie( "MyCssSkin" , cookie_skin , { path: '/', expires: 10 });
}
})
//]]>
</script>
按 Ctrl+C 復(fù)制代碼
這里面多了一個(gè)動(dòng)作，就是設(shè)置了cookie。
然后通過cookie值是否存在來做出相應(yīng)的動(dòng)作，如果cookie值存在，就直接將皮膚設(shè)為cookie值的值。
這里用到的是jQuery的cookie插件。
jQuery操作cookie的插件,大概的使用方法如下
$.cookie('the_cookie'); //讀取Cookie值
$.cookie(’the_cookie’, ‘the_value’); //設(shè)置cookie的值
$.cookie(’the_cookie’, ‘the_value’, {expires: 7, path: ‘/’, domain: ‘jquery.com’, secure: true});//新建一個(gè)cookie 包括有效期 路徑 域名等
$.cookie(’the_cookie’, ‘the_value’); //新建cookie
$.cookie(’the_cookie’, null); //刪除一個(gè)cookie
不過這段代碼不好的地方，就是有大量的重復(fù)代碼，可以模塊化，函數(shù)化。這也是代碼優(yōu)化的一種。
版本三：
按 Ctrl+C 復(fù)制代碼
<script type="text/javascript">
//<![CDATA[
$(function(){
var $li =$("#skin li");
$li.click(function(){
switchSkin( this.id );
});
var cookie_skin = $.cookie( "MyCssSkin");//優(yōu)化了代碼，將功能模塊化了
if (cookie_skin) {
switchSkin( cookie_skin );
}
});
function switchSkin(skinName){
$("#"+skinName).addClass("selected") //當(dāng)前<li>元素選中
.siblings().removeClass("selected"); //去掉其它同輩<li>元素的選中
$("#cssfile").attr("href","css/"+ skinName +".css"); //設(shè)置不同皮膚
$.cookie( "MyCssSkin" , skinName , { path: '/', expires: 10 });
}
//]]>
</script>
按 Ctrl+C 復(fù)制代碼
用到就調(diào)用函數(shù)，參數(shù)變化即可。
轉(zhuǎn)載于:https://blog.51cto.com/13767247/2358335
總結(jié)
以上是生活随笔為你收集整理的jQuery之换肤与cookie插件的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 勒索病毒GANDCRAB新变种GANDC
- 下一篇： 党委开展谈心谈话活动方案3篇