Examples of jQuery no-refreshing switching topic skin and jquery examples

Examples of jQuery no-refreshing switching topic skin and jquery examples

The topic skin switching function is used in many websites and systems. You can set your favorite theme color styles based on this function to enhance the user experience. This article will focus on how to use jQuery to implement the click-free new switch topic skin function.

This function is implemented by clicking the defined theme style to change the currently referenced theme CSS file on the page, and writing the current theme style to the cookie or to the database, so that the next time the user re-visits the page, the topic style set last time is called.
Prepare theme skin styles
First, I have prepared three style table CSS files, which are Subject skins of Three Styles. They are introduced to 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 it is useful to add the title attribute to each <link>. In addition, 2nd and 3rd CSS files are disabled, which means 1st CSS files are used by default.
XHTML

<Ul id = "styles"> <li id = "default"> classic </li> <li id = "blue"> light blue </li> <li id = "brown "> brown </li> </ul>

Three theme styles for click SwitchingNote that I have added the id attribute to each li.
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} 

Use CSS to render XHTML. ul # styles li. cur indicates the selected style of the current topic. I use a small tick to represent the selected topic.
JQeury
First, we need to introduce the jquery library and jquery. cookie plug-in. The jquery. cookie plug-in provides powerful cookie operations for jQuery. You don't need to write complicated native javascript, just call the plug-in directly. For the use of this plug-in, please read this article:

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

Next, When you click switch to select a topic, the following action is performed: Get the selected topic (id) and view the referenced CSS file, if the title attribute value is exactly the same as the selected topic id value, apply the CSS file of the topic and disable other referenced CSS files, in addition, write the selected topic to the cookie, set the cookie expiration time, and set the currently selected topic button (li) to the currently selected status. For details, refer to 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"); }); 

Note: In this example, I save the selected style in the user cookie. The cookie name is "mystyle" and the value is the selected topic value. The past time is 30 days, that is: expires: 30
Next, you need to read the theme cookie value when loading the page. If the theme cookie exists, you can call the theme style CSS file corresponding to the cookie value and set the current theme button to the selected status, otherwise, the default style is called. 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 sections of code to $ (function () {}). This completes the work.
It is worth mentioning thatCookieRecord the skin style of the theme selected by the user. However, when the cookie expires or the user clears the COOKIE of the browser, or the user changes to another browser, the currently set theme becomes invalid. In order for the user to permanently Save the selected topic style, the selected topic must correspond to the user information and be written to the database. The user can directly read the topic upon login next time. Of course, this method applies to systems with user permissions, such as the background management system and personal center.

The above is all the content of this article. The content is very detailed for readers to understand and read. I hope you will get something!