Key points of using jquery to implement Web page skin-changing function _jquery

The web is an old technology, the old one is not popular now. However, sometimes some customers just want this skin-changing function. So on the practice of a Web page skin change, the result encountered a lot of problems.

The basics of Web page skin change

The basic principle is very simple, is to use JS to switch the corresponding CSS style sheet. For example, the navigation site Hao123 on the top right there is a Web page skin-changing function. In addition to switching CSS style sheet files, the usual web page skinning requires a Cookie to record the user's previously replaced skin, which automatically uses the last user-configured option the next time the user accesses it.

Then the basic workflow comes out: access to the Web page--js read cookie--if not, use the default skin-if there is, use the specified skin; The user clicks on the Skins option--JS control replaces the corresponding CSS style sheet-writes the skin option into a Cookie to save.

The need for a Web page to be ready for skin change

First you may want to prepare a number of CSS style sheet files, when the click on the Skin button, use JS to switch the corresponding CSS style sheet. After that, is to add a list of UL Li on the Web page, decorate with CSS to make the skin changing option. For example:

Here we will look at the specific function code.

Realize the click Switch corresponding CSS function

First of all, the HTML structure of our skin options is like this

<div class= "Skin" >
  <ul>
    <li class= "skin1 hover" ></li>
    <li class= "Skin2" > </li>
    <li class= "skin3" ></li>
    <li class= "skin4" ></li>
  </ul>
</div>

Then put an empty link tag on the top of the page, and we'll use jQuery to give the link tag a different CSS file for switching effects.

Copy Code code as follows:

<link rel= "stylesheet" href= "data-href=" Style-teal.css "type=" text/css "media=" screen "class=" Skincsslittle "/ >

Among them, I have customized a Data-href property to store the system's default skin, so that when the page is finished loading, if JS does not detect the skin information in the Cookie, it will assign the contents of the Data-href. Then there is the familiar JQuery code:

jquery ('. Skin li '). Click (function () {
  var currentclass = jquery (this). attr (' class ');
  JQuery (This). Siblings (). Removeclass (' hover ');
  JQuery (This). addclass (' hover ');
  var cc = currentclass.substring (0,5);
  CC = Convertcsslittle (cc);
  var skincssurl = JQuery ('. Stylecssurl '). attr (' href '). substring (0,jquery ('. Stylecssurl '). attr (' href '). IndexOf (' Style ') + cc;
  JQuery ('. Skincsslittle '). attr ("href", skincssurl);
Createcookie (' skin ', currentclass,365);
};

The general logic is to get the class of the current skin and then intercept it skin* and then use a function to get its corresponding CSS file. Skincssurl Records is the Web page of the non-skin CSS file, mainly used to get the current page of the CSS directory URL, and finally the combination of good CSS skin file assignment ready for the empty link, the realization of skin change.

Add cookies to record skin function

Two custom functions are used here to create and read Cookie content.

function Readcookie (name) {
 var Nameeq = name + ' = ';
 var ca = Document.cookie.split (';');
 for (Var i=0;i < ca.length;i++) {
  var c = ca[i];
  while (C.charat (0) = = ') c = c.substring (1,c.length);
  if (C.indexof (nameeq) = = 0) return c.substring (nameeq.length,c.length);
 }
 return false;
}
function Createcookie (name,value,days) {
if (days) {
var date = new Date ();
Date.settime (Date.gettime () + (days2460601000));
var expires = "; Expires= "+date.togmtstring ();
}
else expires = "";
Document.cookie = name+ "=" +value+expires+ "; path=/";
}

You just need to copy these two functions to the JS code area. In the JQuery-click function code, the last sentence creates a cookie, and when the page is loaded, we need to use JS to read the cookie content and then use if to judge:

var CCCC = Readcookie ("Skin");
if (CCCC) {
CCCC = cccc.substring (0,5);
JQuery ('. ') +CCCC). addclass (' hover '). Siblings (). Removeclass (' hover ');
CCC = Convertcsslittle (CCCC);
var skincssurl = JQuery ('. Stylecssurl '). attr (' href '). substring (0,jquery ('. Stylecssurl '). attr (' href '). IndexOf (' Style ') + CCC;
JQuery ('. Skincsslittle '). attr ("href", skincssurl);
} else{
var currentcss = JQuery ('. Skincsslittle '). attr ("Data-href");
var currentcssname = currentcss.substring (Currentcss.indexof (' style '), currentcss.length);
Currentcssname = Defaulttoclass (currentcssname);
JQuery ('. ') +currentcssname). addclass (' hover '). Siblings (). Removeclass (' hover ');
jquery ('. Skincsslittle '). attr ("href", jquery ('. Skincsslittle '). attr ("Data-href"));

Don't be so messy code frighten dizzy, in fact, logic is very simple, first get the skin value of cookies, if there is for the corresponding skin options highlighted and converted to the corresponding CSS skin file assignment. If there is no Cookie content, the value that is recorded in the Data-href property is assigned.

Web page skin flicker problem and imperfect solution

In the face of the web, there are flashing problems. When you click on the toggle button, change the color or the picture will flicker. Or, after using a Cookie record, the user uses a non-default skin, flashes it, and then flashes the default style before flashing it to the user's own choice of style.

This phenomenon that affects the user experience must be completely eliminated, but no perfect solution has been found. Because the browser defaults to the priority rendering CSS and then loading JS, especially the use of cookies recorded skin, first render the existing CSS, JS can be read and then switch to the skin. The principle is this, after consultation with customers, the customer gave a "no flicker" of the skin effect example, is MG12 a very early theme. The same Cookie record, but his work does not flicker.

So I looked at his JS code, did not find a special place, then want to understand, this flicker problem, in the picture more pages in the effect is particularly obvious, because the switch CSS need to load pictures need more time. and MG12 that theme, the switch CSS file just changed a few background color, loading speed to your eyeball reaction but to create the illusion of not flashing.

Imperfect solution is also some, click on the flash after the switch button, but also because to load pictures and so on, then we can visit the Web page, using preload technology to preload other skin images or use CSS Sprite technology to make a big picture.

As for the Cookie recording flicker problem, this is the browser rendering of the mishap, can only minimize the need to change the skin changes in place, as far as possible to compress the picture to reduce volume. Then first load the underlying style without any skin, then use JS to load the default style or read the Cookie-obtained skin options. This way, when you visit the Web page, you will first show white or no color, then switch directly to the color of the skin you chose before, instead of flashing from the default color to another color to enhance the user experience.