Since then, I've found a lot of ways for visitors to switch style sheets from one place to another by clicking the mouse. But lately I'm going to write a tutorial on how to use jquery to write simple code to implement it.
I'll explain the whole process step-by-step, not just because of the introduction of the jquery code, but also to uncover several advanced features in the jquery library.
First, the Code
Copy Code code 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][title] '). Each (function (i)
{
This.disabled = true;
if (This.getattribute (' title ') = = StyleName) this.disabled = false;
});
Createcookie (' style ', stylename, 365);
}
Other parts that are not mentioned here are the functions that you will see later to create and read cookies.
The beginning of the familiar
$ (document). Ready (function () {$ ('. Styleswitch '). Click (function () ... Tell jquery to find all the elements that contain the object name ' Styleswitch ' at the fastest speed and execute a function when they are clicked by the mouse.
It looks good. When the mouse clicks on a predetermined element, the Switchstylestyle function is invoked. From now on is the focus.
What's the meaning of this sentence?
The first time I saw this code, my brain was jammed:
$ (' link[@rel *=style] '). Each (function (i) {
After searching the internet for a while, I returned empty-handed. Finally, he had to find the author of jquery, John Resig, to consult with him.
He gave me the page address of a jquery site that explains several of the advanced Features (XPath) provided by jquery that can be used to find and manipulate several elements in a page.
If you've seen these things, you can see that the mysterious code above means telling jquery to "Find all link elements with the rel attribute and the attribute value string containing ' style '."
Let's see how to write a page that contains a main style sheet with two alternate 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 property of the style ' string.
So at a glance, jquery easily locates the style sheet links in the page.
Next?
The each () function iterates through all of these style sheet links and executes the code in the next line:
this.disabled = true;if (This.getattribute (' title ') = = StyleName) this.disabled = false; First Disable all style sheet links, and then open any title property value and the same stylesheet as the string passed by the Switchstylestyle function.
Cluth, but it works.
Now we need to make sure that the stylesheet exists and works.
Full Code and Demo
Now that Kelvin luck has written this code, I'm not going to repeat it here.
DEMO
I believe Kelvin's inspiration comes from this site, and we can just see whether using other tools to implement this feature is a lot more complex and verbose than jquery.
The Complete styleswitch.js
Copy Code code as follows:
/**
* 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 (' style ', 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*24*60*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
