jQuery実装切り替えページレイアウトの使用説明

インスタンスの表示:DEMOデモパッケージのダウンロード
XHTML

 
  
レイアウトの り え 
  
 
  
 
  
    
 
  
    
 
  
 
  
... 
  
 
  
 
 

XHTML構造では、#demoに複数入れる.listは、文章のタイトルと要約を表示します.以下のCSSで外観を制御します.
CSS

 
  
#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} 
  
 
 

背景色と枠線スタイルを含む均一な外観を持つように、最外層のdemoスタイルを設定します.最後にスタイルを設定することに注意してください.showblock .List,制御#demoの.listスタイルは、左にフローティングする、高さと幅を設定し、設定する.showblockは実は#demoを設定するスタイルで、次のjQueryコードではわかります.もちろん、必要に応じてCSSとXHTMLを独自に設計することができますが、本稿では、簡単なスタイルとHTML構造の構築を実証するために使用します.
jQuery
レイアウトの切り替えを実現する原理は、javascriptでページ表示のスタイルを制御し、ユーザーが切り替えをクリックすると、異なるCSSyスタイルを参照することです.次のjQueryコードを見てください.

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

toggleイベントを使用して、イベントを交互に実行したり、fadeOutを使用して切り替えを遷移させたりします.addClass()とremoveClass()で異なるスタイルを呼び出して異なるレイアウト効果を実現していることがわかります.
質問:どのようにページングを実現した後、レイアウト方式を切り替えて、次のページに入るのは前のページのレイアウト方式と同じですか?
考え方:クッキーを用いてユーザが選択したレイアウト方式を記録し、次のページに入るとクッキー値を読み取り、レイアウト方式を割り当てるなどすることができます.クッキーの使用については、jQuery操作Cookiesを参照してください.