jQuery实现切换页面布局

在很多网站尤其在一些购物网站上,展示商品的列表页提供了许多商品,用户可以选择商品的展示方式如列表方式展示和橱窗方式展示等。在本例中,将给您讲述如何实现这种效果。

HTML

  1. <a href="#" id="switch">切换布局</a> 
  2. <div id="demo" class="showlist"> 
  3.     <div class="list"> 
  4.        <h3><a href="#">文章标题</a></h3> 
  5.        <p>文章摘要</p> 
  6.     </div> 
  7.     ... 
  8. </div> 

HTML结构中,在#demo中放入了多个.list,用于显示文章标题和摘要。通过下面的CSS来控制外观。

  1. #demo{width:680pxmargin:20px autopadding:4pxbackground:#f7f7f7;  
  2. border:1px solid #d3d3d3
  3. .list{margin:6px
  4. .list h3{height:26pxline-height:26pxfont-size:14px
  5. .list p{line-height:20px
  6. .showblock .list{float:leftwidth:325pxheight:100px

CSS

我们要设置最外层的#demo样式,使其具有统一外观,包括背景色和边框样式。注意,我们在最后要设置一个样式.showblock .list,控制#demo里的.list样式,使其向左浮动,并设置高度和宽度,设置.showblock其实就是设置#demo的样式,在接下来的jQuery代码中,你就会明白了。当然您可以根据需求自行设计CSS和XHTML,本文只是为了演示简单的构建了样式和HTML结构。

jQuery

实现切换布局的原理其实就是,用javascript来控制页面显示的样式,当用户点击切换时,引用不同的CSSy样式。请看下面的jQuery代码。

  1. $(function(){ 
  2.     $("#switch").toggle(function(){ 
  3.         $("#demo").fadeOut("fast",function(){ 
  4.             $(this).fadeIn("fast").addClass("showblock"); 
  5.         }); 
  6.     },function(){ 
  7.         $("#demo").fadeOut("fast",function(){ 
  8.             $(this).fadeIn("fast").removeClass("showblock"); 
  9.         }); 
  10.     }); 
  11. }); 

我们使用toggle事件,它用来交替的执行事件,使用fadeOut让切换有个过渡效果,不难看出,就是通过addClass()和removeClass()调用不同的样式来实现不同的布局效果。

问题:如何实现分页后,切换了布局方式,进入下一页和上一页的布局方式一样呢?

思路:可以采用cookie记录用户所选的布局方式,然后进入下一页时读取cookie值,分配布局方式等。关于cookie的使用,可以参照本站文章:

转载请注明:代码家园 » jQuery实现切换页面布局

也许你会喜欢和关注与本文内容高度相关的文章:

推荐JS+CSS布局的人气列表切换特效

推荐简单实用的图片列表布局切换特效

评论列表(网友评论仅供网友表达个人看法,并不表明本站同意其观点或证实其描述)