网页换肤,模块换肤,jQuery的Cookie插件使用（转）
具體效果如下：
第一次加載如下圖：
然后點(diǎn)擊天藍(lán)色按鈕換成天藍(lán)色皮膚如下圖：
然后關(guān)閉網(wǎng)頁(yè)重新打開或者在打開另一個(gè)網(wǎng)頁(yè)如下圖：
因?yàn)槠つw用Cookie保存了下來(lái)，所以不會(huì)重置
?
具體的實(shí)現(xiàn)代碼如下：
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
? ? <meta charset="utf-8" />
? ? <title>原因在于chrome不支持js在本地操作cookie!</title>
? ? <!--原因在于chrome不支持js在本地操作cookie!,所以要么在VS運(yùn)行環(huán)境下用chrome，要么用IE等其他瀏覽器打開-->
? ? <!--各個(gè)皮膚樣式文件（css）的引入-->
<link href="css/default.css" rel="stylesheet" type="text/css" ?/>
<link href="css/skin_0.css" rel="stylesheet" type="text/css" id="cssfile" />?
? ? <script src="jquery-1.11.3.js" type="text/javascript"></script>
? ? <!--因?yàn)橐獙懭氲紺ookie，所以我們引入一個(gè)jQuery.Cookie.js插件-->
? ? <script src="js\jquery.cookies.2.2.0.js" type="text/javascript"></script>
? ? <script type="text/javascript">
? ? ? ? $(function () {
? ? ? ? ? ? var $li = $("#skin li");
? ? ? ? ? ? $li.click(function () {
? ? ? ? ? ? ? ? //當(dāng)前l(fā)i元素被選中，添加樣式
? ? ? ? ? ? ? ? $("#" + this.id).addClass("selected") ? ? ? //去掉其他同輩li元素的選中
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? .siblings().removeClass("selected");
? ? ? ? ? ? ? ? //網(wǎng)頁(yè)內(nèi)容換膚（更改樣式）
? ? ? ? ? ? ? ? $("#cssfile").attr("href", "css/" + this.id + ".css");
? ? ? ? ? ? ? ??
? ? ? ? ? ? ? ? //將皮膚設(shè)置寫入Cookie，設(shè)置網(wǎng)頁(yè)皮膚Cookie，Cookie有效期設(shè)置為100個(gè)小時(shí)
? ? ? ? ? ? ? ? $.cookies.set('MyCssSkin', this.id, { hoursToLive: 100 });
? ? ? ? ? ? ? ? //$.cookie("MyCssSkin", this.id, { path: '/', expires: 10 });
? ? ? ? ? ? ? ? //alert("cookie存進(jìn)去了");
? ? ? ? ? ? });
? ? ? ? ? ? //讀取Cookie，應(yīng)用保存的皮膚設(shè)置
? ? ? ? ? ? var cookie_skin = $.cookies.get("MyCssSkin");//讀取保存的Cookie
? ? ? ? ? ? //alert("讀到cookie了");
? ? ? ? ? ? //如果存在Cookie
? ? ? ? ? ? if (cookie_skin) {
? ? ? ? ? ? ? ? //當(dāng)前l(fā)i元素選中
? ? ? ? ? ? ? ? $("#" + cookie_skin).addClass("selected") ? ? ? ? ? ? ? // ?當(dāng)前的li元素添加選中樣式，其他的移除樣式
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? .siblings().removeClass("selected");
? ? ? ? ? ? ? ? $("#cssfile").attr("href", "css/" + cookie_skin + ".css");//設(shè)置不同皮膚
? ? ? ? ? ? ? ? $.cookie("MyCssSkin", cookie_skin, { path: '/', expires: 10 });//寫入到Cookie
? ? ? ? ? ? }
? ? ? ? });
? ? ? ?
? ? ?
? ? </script>
?
</head>
<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>
? ? <div id="div_side_0">
? ? ? ? <div id="news">
? ? ? ? ? ? <h1 class="title">時(shí)事新聞</h1>
? ? ? ? </div>
? ? </div>
? ? <div id="div_side_1">
? ? ? ? <div id="game">
? ? ? ? ? ? <h1 class="title">娛樂(lè)新聞</h1>
? ? ? ? </div>
? ? </div>
</body>
</html>
需要的附件
唉。。竟然沒(méi)有上傳文件的。。無(wú)語(yǔ)
?
?
Cookies插件使用方法：
??? 1. 不用說(shuō)，首先你得下載jQuery及Cookies插件。
??? 2. 在網(wǎng)頁(yè)的<body>前加上：
<script type="text/javascript" src="http://513394217.blog.163.com/blog/jquery-1.2.6.min.js"></script>
<script type="text/javascript" src="http://513394217.blog.163.com/blog/jquery.cookies.2.2.0.min.js"></script>
??? src=后面的那一長(zhǎng)串就是下載的jQuery和Cookies插件的文件名，如果你和我不一樣就改改。
?
??? 3. 如何添加/修改cookie并設(shè)定過(guò)期時(shí)間：
$.cookies.set('cookie_id', 'cookie_value', { hoursToLive: 100 });
??? 上面是添加或修改一個(gè)cookie，并將其過(guò)期/失效時(shí)間設(shè)定在100小時(shí)之后，注意大括號(hào)是必須的。
??? 過(guò)期失效時(shí)間還有另外一個(gè)設(shè)置方式，指定一個(gè)絕對(duì)時(shí)間：
expireDate = new Date();
expireDate.setTime( expireDate.getTime() + ( 100 * 60 * 60 * 1000 ) );
$.cookies.set('cookie_id', 'cookie_value', {expiresAt:expireDate});
??? expireAt參數(shù)精確到毫秒。大括號(hào)里還可以添加path, domain, secure等參數(shù)，這里不做介紹。如果hoursToLive和expiresAt都指定了，則以expiresAt為準(zhǔn)。
?
? ? 4. 如何獲取cookie
$.cookies.get('cookie_id');?
?
??? 5. 如何刪除cookie
$.cookies.del('cookie_id');?
?
轉(zhuǎn)載于:https://www.cnblogs.com/snowhite/p/10366270.html
總結(jié)
以上是生活随笔為你收集整理的网页换肤,模块换肤,jQuery的Cookie插件使用（转）的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇： cmake：cmake_policy命令
- 下一篇： 这3个快速开发平台，前后端都有，强推