Dynamic calling of css files-jquery applications

Is translation, original: http://15daysofjquery.com/style-sheet-switcheroo/12/

It can be applied to a wide range of websites, especially websites with standard architecture. For example, pjblog can be used. with simple clicks, the website can be changed instantly, of course, it can be implemented through other methods. jquery is used here. The advantage is that the Code is concise and readable.
First put the code
Copy codeThe Code is as follows:
$ (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] '). each (function (I)
{
This. disabled = true;
If (this. getAttribute ('title') = styleName) this. disabled = false;
});
CreateCookie ('stylename, 365 );
}


Here we will explain:
Copy codeThe Code is as follows:
$ ('. Styleswitch'). click
This statement defines click events for all objects whose classname is styleswitch. In jquery, "#" is used to represent the id, for example, $ ("# my_id ") you can locate the object whose id is my_id and the classname is ". ", while positioning tagName without any modifier, such as $ (" p "), is to locate all p objects

ReadCookie and createCookie are two custom functions, which are not provided here

Copy codeThe Code is as follows:
$ ('Link [@ rel * = style] '). each (function (I)

The meaning of this sentence is to locate the link tag, which has the rel attribute, and the rel attribute should contain the style, and define the function for each such object.

Copy codeThe Code is as follows:
This. disabled = true;

The meaning of this sentence is to invalidate the current object


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

This function is used to select the current style.
$ ('Link [@ rel * = style] [@ title] '). each (function (I)
With the previous knowledge, it is easy to understand this sentence, that is, all labels named link, including the rel attribute, and the rel attribute should contain the style, at the same time, there are also objects with the title attribute, and each of them executes the corresponding function.

Next let's take a look at the content on the home page.

Copy codeThe Code is as follows:
<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"/>

Rel = "alternate stylesheet", so that the current css will not be applied to the current document, but it is only a backup

Copy codeThe Code is as follows:
<Li> <a href = "serversideSwitch.html? Style = style1 "rel =" styles1 "class =" styleswitch "> styles1 </a> </li>
<Li> <a href = "serversideSwitch.html? Style = style2 "rel =" styles2 "class =" styleswitch "> styles2 </a> </li>
<Li> <a href = "serversideSwitch.html? Style = style3 "rel =" styles3 "class =" styleswitch "> styles3 </a> </li>


These are the code to change the style part after clicking, we noticed that there are rel attributes, class attributes, these are examples of convenient positioning: http://www.healdream.com/upLoad/html/jquery/styleswitch/

Download: http://www.51files.com /? YTXG82NKA8FA6TIKE4M0