Jquery tutorial (8) style sheet Switching

Source: Internet
Author: User

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.

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.