Introduction to using jQuery to switch page layout

Introduction to using jQuery to switch page layout_jquery

WBOY

Release： 2016-05-16 18:01:22

Original

1139 people have browsed it

View the example: DEMO Demo package download

XHTML

Copy code The code is as follows:

Switch layout

Article title

< ;p>Article summary

...

XHTML structure, put in #demo Multiple .lists have been added to display article titles and abstracts. Control the appearance with the following CSS.

CSS

Copy code The code is as follows:

 
#demo{width: 680px; margin:20px auto; padding:4px; background:#f7f7f7; 
border:1px solid #d3d3d3} 
.list{margin:6px} 
.list h3{height:26px; line-height :26px; font-size:14px} 
.list p{line-height:20px} 
.showblock .list{float:left; width:325px; height:100px} 

We want to style the outermost #demo to have a unified look, including background color and border style. Note that we need to set a style .showblock .list at the end, control the .list style in #demo, make it float to the left, and set the height and width. Setting .showblock is actually setting the style of #demo. In the next jQuery code, you will understand. Of course, you can design CSS and XHTML by yourself according to your needs. This article simply builds the style and HTML structure to demonstrate.

jQuery
The principle of implementing switching layout is actually to use javascript to control the style of page display. When the user clicks to switch, different CSSy styles are referenced. Please see the jQuery code below.

Copy code The code is as follows:

 
$(function(){ 
$(" #switch").toggle(function(){ 
$("#demo").fadeOut("fast",function(){ 
$(this).fadeIn("fast").addClass(" showblock"); 
}); 
},function(){ 
$("#demo").fadeOut("fast",function(){ 
$(this).fadeIn( "fast").removeClass("showblock"); 
}); 
}); 
}); 

We use the toggle event, which is used to alternate execution Event, use fadeOut to make the switch have a transition effect. It is not difficult to see that different styles are called through addClass() and removeClass() to achieve different layout effects.

Question: How to switch the layout mode after pagination and enter the next page with the same layout as the previous page?

Idea: You can use cookies to record the layout method selected by the user, and then read the cookie value when entering the next page, assign the layout method, etc. Regarding the use of cookies, you can refer to the article on this site: Using jQuery to operate Cookies