Eric @ EricBess WebHome

Jquery results: stylesheet switch

DEMO

The familiar opening

Tell jQuery "as fast as possible to find the object that contains all of 'styleswitch' elements, and they were in when a mouse click functions."
Looks good. When the mouse clicks in advance of the specified element, switchStylestyle function will be called. From now on, the focus is.

$ ( 'link [@ rel *= style]'). each (function (i) (

What these words mean?
JQuery to find the author of John Resig, to his advice. He gave me a direct jQuery website address of the page, on which a number of jQuery advanced features (xpath), can be used to find and operate a number of elements of the page. If you read these things you will be able to understand the mysterious code phrase above, the meaning is to tell jQuery "to find with all the rel attribute values and attributes included in the string 'style' link elements of the link."

Let's take a look at how to include the preparation of a master style sheet, the two stand-page style sheet:

 1 
 2 
  3, 

  <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 all see that there are elements of a style sheet that contains' style 'string attribute rel. Therefore, the results at a glance, jQuery easy positioning of the page in the style sheet link.

The next step?

each () function will traverse all of these links style sheets, and the implementation of the next line of code:

this.disabled = true;
if (this.getAttribute ( 'title') == styleName) this.disabled = false;

"First of all, disable all the style sheet link, and then open the title to any property value and function switchStylestyle transfer from the strings of the same style sheet"
Yi Bazhua ah, but very effective.

Code

 1 
 2 
  3, 
 4 
 5 
  6, 
 7 
  8, 
 9 
  10, 
 11 
 12 
  13, 
 14 
  , 15 
 16 

  . ready ( function ( ) { $ (Document). Ready (function () ( 
	  ) . click ( function ( ) { $ ( '. Styleswitch'). Click (function () ( 
		  . getAttribute ( "rel" ) ) ; switchStylestyle (this. getAttribute ( "rel")); 
		  ; return false; 
	  )); 
	   readCookie ( 'style' ) ; var c = readCookie ( 'style'); 
	  c )  switchStylestyle ( c ) ; if (c) switchStylestyle (c); 
  )); 

  styleName ) { function switchStylestyle (styleName) ( 
	  ) . each ( function ( i ) { $ ( 'Link [@ rel *= style]'). Each (function (i) ( 
		  = true ; this. disabled = true; 
		  this . getAttribute ( 'title' ) ==  styleName ) this . disabled = false ; if (this. getAttribute ( 'title') == styleName) this. disabled = false; 
	  )); 
	  ,  styleName , 365 ) ; createCookie ( 'style', styleName, 365); 
  ) 

Part of the HTML

 1 
 2 
  3, 
 4 
 5 

 <ul> 
	  <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> 
  </ ul> 

(1 votes, average: 5 out of 5) Loading ... - Welcomed the rating for this article

• The Page SPONSORED BY
• Become SPONSOR Now
• HELP

No donations within the last 180 days.Who make donation will leave message at here. Donate Now.

SponsorName OR TextAds:
Your URL: (eg, http://www.ericbess.com/)
Amount ($): 3 $ + donation will list in the Sponsored Tab. More donations, Bigger Link!
If your haven't the paypal account so far.Please register paypal account: [PayPal Registration] first.

This a wordpress plugin Wp-Donators. It provides a smart donation function to autoleave the sponsor information in this container after payment. People can donate and submit name / URL or TextLink AD. The information of the latest donors are displayed in the cloud. The more a person donates, the bigger their link will be.It 's will support most popular payment interface in future. ParPal Just the first one. More ..

Powered By: WP-DONATORS

July 20th, 2008 Author: eric | Coding, Web Technology ^| Trackback? | 1 comment | | 289 views