Jquery tutorial (8) style sheet Switching

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 simple article on how to use jqueryCodeThe tutorial for implementing 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"  )  ) Bytes ; Return   False Bytes ; }  ) Using VaR c = readcookie (  'Style'  ) Bytes ; If   ( C ) Switchstylestyle ( C ) Bytes ; }  ) Using function switchstylestyle ( Stylename )  { $ (  'Link [@ rel * = style]'  ) . Each  ( Function ( I )  {  This . Disabled = True Bytes ; If   (  This . Getattribute  (  'Title'  ) = Stylename )   This . Disabled = False Bytes ; }  ) ; Createcookie (  'Style' , Stylename, 365  ) Bytes ; } 

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 ".

Hmm?

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=TrueBytes ;If (This.Getattribute('Title')= Stylename) This.Disabled=FalseBytes ;
 

"Disable all style sheet links first, and 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.