jquery cookie實(shí)現(xiàn)的簡單換膚功能適合小網(wǎng)站
更新時(shí)間：2013年08月25日 13:01:33 作者：
使用jquery cookie做了一個(gè)簡單的換膚功能適合小網(wǎng)站并且代碼低級，具體實(shí)現(xiàn)過程如下，感興趣的朋友可以了解下
前段時(shí)間試著使用jquery cookie的時(shí)候，做了一個(gè)簡單的換膚功能，只適合小網(wǎng)站并且代碼低級。
首先引入jquery和cookie插件
<script type="text/javascript" src="__PUBLIC__/js/jquery.js"></script>
<script type="text/javascript" src="__PUBLIC__/js/cookie.js"></script>
準(zhǔn)備幾個(gè)css文件
<link rel="stylesheet" type="text/css" href="__PUBLIC__/css/basic2.css" id="f">
網(wǎng)頁中的body部分準(zhǔn)備幾個(gè)button按鈕用于觸發(fā)jquery
<button>風(fēng)格一</button><button>風(fēng)格二</button>
jquery代碼
$(document).ready(function(){
$("#button1").click(
function(){
$.cookie('cssfile','basic2.css');//存入cookie
location.reload(); //刷新頁面
}
);
$("#button2").click(
function(){
$.cookie('cssfile','basic.css');
location.reload();
}
);
});
$(document).ready(
function(){
var file=$.cookie('cssfile'); //讀取cookie
if(typeof file=="undefined")
{
var cssfile="__PUBLIC__/css/basic2.css"; //沒有設(shè)置，讀取默認(rèn)css
}
else
{
var cssfile="__PUBLIC__/css/"+file; //設(shè)置過的cookie
}
$("#f").attr("href",cssfile);
}
);
點(diǎn)擊獲取jquery cookie插件
點(diǎn)擊獲取jquery或者使用jquery在谷歌或者微軟的托管
Microsoft CDN:
-------------------------------------------------------------------------------
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.0.js"></script>
Google CDN:
--------------------------------------------------------------------------------
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"> </script>
首先引入jquery和cookie插件
復(fù)制代碼 代碼如下:
<script type="text/javascript" src="__PUBLIC__/js/jquery.js"></script>
<script type="text/javascript" src="__PUBLIC__/js/cookie.js"></script>
準(zhǔn)備幾個(gè)css文件
復(fù)制代碼 代碼如下:
<link rel="stylesheet" type="text/css" href="__PUBLIC__/css/basic2.css" id="f">
網(wǎng)頁中的body部分準(zhǔn)備幾個(gè)button按鈕用于觸發(fā)jquery
復(fù)制代碼 代碼如下:
<button>風(fēng)格一</button><button>風(fēng)格二</button>
jquery代碼
復(fù)制代碼 代碼如下:
$(document).ready(function(){
$("#button1").click(
function(){
$.cookie('cssfile','basic2.css');//存入cookie
location.reload(); //刷新頁面
}
);
$("#button2").click(
function(){
$.cookie('cssfile','basic.css');
location.reload();
}
);
});
$(document).ready(
function(){
var file=$.cookie('cssfile'); //讀取cookie
if(typeof file=="undefined")
{
var cssfile="__PUBLIC__/css/basic2.css"; //沒有設(shè)置，讀取默認(rèn)css
}
else
{
var cssfile="__PUBLIC__/css/"+file; //設(shè)置過的cookie
}
$("#f").attr("href",cssfile);
}
);
點(diǎn)擊獲取jquery cookie插件
點(diǎn)擊獲取jquery或者使用jquery在谷歌或者微軟的托管
Microsoft CDN:
-------------------------------------------------------------------------------
復(fù)制代碼 代碼如下:
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.0.js"></script>
Google CDN:
--------------------------------------------------------------------------------
復(fù)制代碼 代碼如下:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"> </script>
您可能感興趣的文章:
- jQuery基于cookie實(shí)現(xiàn)換膚功能實(shí)例
- jQuery實(shí)現(xiàn)的網(wǎng)頁換膚效果示例
- jQuery實(shí)現(xiàn)簡單的網(wǎng)頁換膚效果示例
- Bootstrap框架結(jié)合jQuery仿百度換膚功能實(shí)例解析
- 使用jQuery實(shí)現(xiàn)Web頁面換膚功能的要點(diǎn)解析
- 基于jQuery實(shí)現(xiàn)仿百度首頁換膚背景圖片切換代碼
- jQuery實(shí)現(xiàn)給頁面換膚的方法
- 基于jquery ui的alert,confirm方案（支持換膚）
- jQuery之網(wǎng)頁換膚實(shí)現(xiàn)代碼
- JQuery 網(wǎng)站換膚功能實(shí)現(xiàn)代碼
- jQuery結(jié)合jQuery.cookie.js插件實(shí)現(xiàn)換膚功能示例
相關(guān)文章
把jquery 的dialog和ztree結(jié)合實(shí)現(xiàn)步驟
首先準(zhǔn)備好juqury-ui、ztree 的js文件和css 文件，接下來的步驟祥看本文希望對大家有所幫助2013-08-08
客戶端的抖動(dòng),快速操作,網(wǎng)絡(luò)通信或者服務(wù)器響應(yīng)慢,都容易造成服務(wù)器重復(fù)處理,這篇文章主要給大家介紹了關(guān)于jquery項(xiàng)目中如何防重復(fù)提交的相關(guān)資料,需要的朋友可以參考下2021-11-11
jQuery EasyUI之驗(yàn)證框validatebox實(shí)例詳解
本文通過實(shí)例代碼給大家講解了jQuery EasyUI之驗(yàn)證框validatebox知識，非常不錯(cuò)，具有參考借鑒價(jià)值，需要的的朋友參考下吧2017-04-04
jQuery 實(shí)現(xiàn)鼠標(biāo)畫框并對框內(nèi)數(shù)據(jù)選中的實(shí)例代碼
本文通過實(shí)例代碼給大家介紹了jQuery 實(shí)現(xiàn)鼠標(biāo)畫框并對框內(nèi)數(shù)據(jù)選中的實(shí)例代碼，非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友參考下吧2017-08-08
基于jquery的動(dòng)畫效果代碼，挺有意思的，需要的朋友可以參考下2012-07-07
本篇文章主要是對JQuery判斷HTML元素是否存在的兩種解決方法進(jìn)行了介紹，需要的朋友可以過來參考下，希望對大家有所幫助2013-12-12
ajax 提交數(shù)據(jù)到后臺jsp頁面及頁面跳轉(zhuǎn)問題
這篇文章主要介紹了ajax 提交數(shù)據(jù)到后臺jsp頁面及頁面跳轉(zhuǎn)問題的相關(guān)資料,需要的朋友可以參考下2017-01-01
jQuery.extend 函數(shù)的詳細(xì)用法
jQuery.extend 函數(shù)的詳細(xì)用法，學(xué)習(xí)jquery的朋友可以參考下2012-06-06
jquery1.83 之前所有與異步列隊(duì)相關(guān)的模塊詳細(xì)介紹
jQuery在1.5引入了Deferred對象（異步列隊(duì)），當(dāng)時(shí)它還沒有劃分為一個(gè)模塊，放到核心模塊中。直到1.52才分割出來2012-11-11
在jQuery1.5中使用deferred對象 著放大鏡看Promise
在那篇經(jīng)典的關(guān)于jQuery1.5中Deferred使用方法介紹的文章中（譯文見這里），有下面一段描述2011-03-03