jquery No refresh switch Theme Skin example explain _jquery

Theme Skin Switching function is used in many websites and systems, users can set their favorite theme color style according to this function, enhance the user experience. This article will focus on how to use jquery to implement click-and-no refresh to toggle theme skin function.

The rationale for this feature is to change the theme CSS file that the page is currently referencing by clicking on the defined theme style, writing the current theme style to the cookie or writing to the database so that the next time the user accesses the page, the theme style is the last set.
Prepare Theme Skin styles
First, I prepared three stylesheets CSS files, which are three styles of theme skins, which are introduced into the page and placed between the

<link title= "Default" rel= "stylesheet" type= "Text/css" href= "Css/default.css"/> <link title= 
"Blue" rel= "Stylesheet" type= "Text/css" href= "css/blue.css" disabled= "Disabled"/> "<link" title= 
"Brown" rel= " Stylesheet "type=" Text/css "href=" css/brown.css "disabled=" Disabled "/>" 

Note that I added the title attribute to each <link> is useful, and I disabled the 2nd and 3rd CSS files, which is the 1th CSS file that works by default.
XHTML

<ul id= "Styles" > 
 <li id= "default" > Classic </li> 
 <li id= "Blue" > Blue </li> 
 <li Id= "Brown" > Brown </li> 

Three theme styles for click and switch , notice I added id attribute to each Li respectively.
CSS

ul#styles{margin-top:10px} 
ul#styles li{float:left; width:50px; 
height:40px; line-height:40px; padding:2px; margin-left:10px; border:1px solid #fff; Text-align:center; Color: #fff; Cursor:pointer} 
ul#styles li.cur{border:1px solid #369; Background-image:url (images/selected.gif); 
Background-repeat:no-repeat; background-position:4px 32px} 
ul#styles li#default{background-color: #162934;} 
Ul#styles li#blue{background-color: #90c5e7} 
ul#styles li#brown{background-color: #601f00} 

Render XHTML with CSS, where ul#styles li.cur refers to the style selected under the current theme, and I use a small tick to indicate the currently selected topic.
Jqeury
First we'll introduce jquery libraries and Jquery.cookie plug-ins. The Jquery.cookie plugin provides a powerful cookie-manipulation feature for jquery, and you don't have to write complex native JavaScript, just call the plugin directly. For the use of this plug-in, please read this site article:

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

Next, when a user clicks on a toggle to select a theme, the following actions occur: Get the selected subject (ID), view the referenced CSS file, and if you find that the Title property value is exactly the same as the currently selected topic ID value, apply the theme CSS file and disable other referenced CSS files. And writes the currently selected topic to the cookie, sets the cookie expiration time, and finally sets the currently selected Topic button (LI) to the currently selected state. Look at the following code:

$ ("#styles li"). Click (function () { 
 var style = $ (this). attr ("id"); 
 $ ("link[title= '" +style+ "]"). Removeattr ("Disabled"); 
 $ ("link[title!= '" +style+ "]"). attr ("Disabled", "disabled"); 
 $.cookie ("MyStyle", style,{expires:30}); 
 $ (this). AddClass ("cur"). Siblings (). Removeclass ("cur"); 
}); 

Notice that in this example I save the selected style in the user cookie, the cookie name is called "MyStyle", the value is the currently selected topic value, and the past time is 30 days, namely: expires:30
The next thing you need to do is load the page, read the subject cookie value, call the theme-style CSS file for the cookie value if the theme cookie exists, and set the current Theme button state to be selected, otherwise call the default style. The code is as follows:

var Cookie_style = $.cookie ("MyStyle"); 
if (cookie_style==null) { 
 $ ("link[title= ' Default ')"). Removeattr ("Disabled"); 
 $ ("#styles Li#default"). AddClass ("cur"); 
else{ 
 $ ("link[title=" +cookie_style+ "']"). Removeattr ("Disabled"); 
 $ ("#styles li[id= '" +cookie_style+ "]"). AddClass ("cur"); 
 $ ("link[title!= '" +cookie_style+ "]"). attr ("Disabled", "disabled"); 
 

Add the above two pieces of code to the $ (function () {}) to complete this work.
It is worth mentioning that the cookie used in this article records the theme skin style that the user chooses to set, but when the cookie expires or the user clears the browser's cookie, or if the user is browsing with another browser, the currently set theme is invalidated. In order for the user to permanently save the selected theme style, the selected theme must be mapped to the user's information and written to the database, and the next time the user logs in, the subject can be read directly, which, of course, is applied to systems with user rights, such as background management systems, personal centers, etc.

The above is the entire content of this article, the content is very detailed, convenient for readers to understand reading, I hope you can have some harvest it!