検索

ホームページ >ウェブフロントエンド >jsチュートリアル >jquery cookieで実装された簡単なスキン変更機能は小規模なWebサイトに適しています_jquery

jquery cookieで実装された簡単なスキン変更機能は小規模なWebサイトに適しています_jquery

WBOY
WBOYオリジナル
2016-05-16 17:24:16765ブラウズ

少し前に jquery cookie を使おうとしたとき、簡単なスキン変更関数を作成しましたが、これは小規模な Web サイトにのみ適しており、コードは低レベルでした。

最初に jquery プラグインと Cookie プラグインを紹介します

コードをコピーします コードは次のとおりです:




いくつかの CSS ファイルを用意します
コードをコピーします コードは次のとおりです。



Web ページの本文部分に jquery をトリガーするボタンをいくつか用意します
コードをコピー コードは次のとおりです:



jquery コード
コードをコピー コードは次のとおりです:

$(document).ready(function(){
$("#button1").click(
function(){
$.cookie('cssfile','basic2.css');// クッキーを保存
location.reload(); // ページを更新します
}
);
$("#button2").click(
function(){
$.cookie('cssfile','basic.css' );
location.reload();
}
);
$(document).ready(
function(){
var file=$ .cookie('cssfile'); // Cookie を読み取ります
if(typeof file=="unknown")
{
var cssfile="__PUBLIC__/css/basic2.css";デフォルトの css を読み取ります
}
else
{
var cssfile="__PUBLIC__/css/" file; //Cookie を設定します
}
$("#f").attr( "href",cssfile);
}
);


クリックして jquery Cookie プラグインを取得します
クリックして jquery を取得しますまたは、Google または Microsoft がホストする jquery を使用しますMicrosoft CDN:
----------------------------- ----------------- --------------------------------- ----

コードをコピー コードは次のとおりです:


Google CDN:
----- -------------------- ------------------------------ -------------------- -----

コードをコピー コードは次のとおりです。