jquery cookies to achieve a simple skin-changing function for small Web sites _jquery

Some time ago trying to use jquery cookies, do a simple skin-changing function, only for small sites and code low-level.

First introduce jquery and cookie Plug-ins

Copy Code code as follows:

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

Prepare several CSS files

Copy Code code as follows:

<link rel= "stylesheet" type= "Text/css" href= "__public__/css/basic2.css" id= "F" >

The body section of the Web page prepares several button buttons to trigger jquery

Copy Code code as follows:

<button> style one </button><button> style two </button>

jquery Code

Copy Code code as follows:

$ (document). Ready (function () {
$ ("#button1"). Click (
function () {
$.cookie (' Cssfile ', ' basic2.css ');
Location.reload (); Refresh Page
}
);
$ ("#button2"). Click (
function () {
$.cookie (' Cssfile ', ' basic.css ');
Location.reload ();
}
);
});
$ (document). Ready (
function () {
var file=$.cookie (' Cssfile '); Read cookies
if (typeof file== "undefined")
{
var cssfile= "__public__/css/basic2.css"; No settings, read default CSS
}
Else
{
var cssfile= "__public__/css/" +file; The cookie that has been set
}
$ ("#f"). attr ("href", cssfile);
}
);

Click to get jquery cookie Plugin
Click to get jquery or use jquery on Google or Microsoft hosting
Microsoft CDN:
-------------------------------------------------------------------------------

Copy Code code as follows:

<script src= "Http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.0.js" ></script>

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

Copy Code code as follows:

<script src= "Http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js" > </script>