Code of JQuery-based website skin replacement function

The first time I saw the style sheet switch was in A List Apart or Simple Bits, which is the most suitable website for two designers. Since then, I have found many ways for visitors to switch between style sheets by clicking the mouse somewhere. But recently I want to write a tutorial on how to use jQuery to write simple code to implement it.

I will give you a step-by-step explanation of the entire process, not only to demonstrate the introduction of jQuery code, but also to reveal several advanced features in the jQuery library.

First, the code

$ (Document). ready (function (){
$ ('. Styleswitch'). click (function ()
{
SwitchStylestyle (this. getAttribute ("rel "));
Return false;
});
Var c = readCookie ('style ');
If (c) switchStylestyle (c );
});

Function switchStylestyle (styleName)
{
$ ('Link [@ rel * = style] [title] '). each (function (I)
{
This. disabled = true;
If (this. getAttribute ('title') = styleName) this. disabled = false;
});
CreateCookie ('stylename, 365 );
}

What is not mentioned here is the function for creating and reading cookies that you will see later.

Familiar opening

$ (Document). ready (function () {$ ('. styleswitch'). click (function ()...... Tell jQuery "to search for all elements containing the object name 'styleswitch' as quickly as possible and execute a function when they are clicked by the mouse ".

Looks good. The switchStylestyle function is called when the mouse clicks a pre-specified element. From now on is the focus.

What does this sentence mean?

When I saw this code for the first time, my mind was stuck:

$ ('Link [@ rel * = style] '). each (function (I ){

After searching on the internet, I went empty-handed. Finally, I had to find John Resig, the author of jQuery, and ask him.

He gave me a page address for the jQuery website, which explains some advanced features (xpath) provided by jQuery and can be used to find and operate several elements on the page.

If you have read these things, you can understand the meaning of the above mysterious code is to tell jQuery to "find all link elements with rel attributes and the attribute value string contains 'style ".

Let's take a look at how to compile a page that contains a master style sheet and two slave style sheets:

<Link rel = "stylesheet" type = "text/css" href = "styles1.css" title = "styles1" media = "screen"/> <link rel = "alternate stylesheet" type = "text/css" href = "styles2.css" title = "styles2" media = "screen"/> <link rel = "alternate stylesheet" type = "text/css" href = "styles3.css" title = "styles3" media = "screen"/> we can see that all style sheets contain a rel attribute containing the 'style' string.

As a result, jQuery easily locates the style sheet link on the page.

Next?

The each () function traverses all the links of these style sheets and runs the code in the next line:

This. disabled = true then if (this. getAttribute ('title') = styleName) this. disabled = false then "first disable all style sheet links, and then enable any style sheet with the same title attribute value as the string passed by the switchStylestyle function"

It's very effective.

Now we need to ensure that those style sheets exist and are valid.

Complete code and demo

Since Kelvin Luck has compiled these codes, I will not repeat them here.

DEMO

I believe Kelvin was inspired by this website. We can see if other tools are more complicated and lengthy to implement this function than jQuery.

Complete styleswitch. js

/**
* Styleswitch stylesheet switcher built on jQuery
* Under an Attribution, Share Alike License
* By Kelvin Luck (http://www.kelvinluck.com /)
**/

(Function ($)
{
$ (Document). ready (function (){
$ ('. Styleswitch'). click (function ()
{
SwitchStylestyle (this. getAttribute ("rel "));
Return false;
});
Var c = readCookie ('style ');
If (c) switchStylestyle (c );
});

Function switchStylestyle (styleName)
{
$ ('Link [@ rel * = style] [title] '). each (function (I)
{
This. disabled = true;
If (this. getAttribute ('title') = styleName) this. disabled = false;
});
CreateCookie ('stylename, 365 );
}
}) (JQuery );
// Cookie functions http://www.quirksmode.org/js/cookies.html
Function createCookie (name, value, days)
{
If (days)
{
Var date = new Date ();
Date. setTime (date. getTime () + (days * 24x60*60*1000 ));
Var expires = "; expires =" + date. toGMTString ();
}
Else var expires = "";
Document. cookie = name + "=" + value + expires + "; path = /";
}
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 null;
}
Function eraseCookie (name)
{
CreateCookie (name, "",-1 );
}
/// Cookie functions