jQuery を使用してページを切り替える方法の概要layout_jquery

例を表示します: デモ デモ パッケージのダウンロード

XHTML

コードをコピー コードは次のとおりです。

レイアウトの切り替え

記事タイトル

>

記事の概要

XHTML 構造、#demo に配置記事のタイトルと要約を表示するために .lists が追加されました。以下のCSSで見た目を制御します。

CSS

コードをコピー コードは次のとおりです:

#demo {幅: 680px; マージン: 20px; 背景:#f7f7f7;

ボーダー: 1px ソリッド #d3d3d3}
.list{margin:6px}
.list h3行の高さ:26px; フォントサイズ:14px}
.list p{line-height:20px}
.showblock .list{float:left; 高さ: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");
})
});


イベントの実行を交互に行うために使用され、切り替えにトランジション効果を持たせるために fadeOut を使用します。異なるレイアウト効果を実現するために、addClass() および RemoveClass() を通じて異なるスタイルが呼び出されるのは難しくありません。

質問: ページネーション後にレイアウト モードを切り替え、前のページと同じレイアウトで次のページに入るにはどうすればよいですか?

アイデア: Cookie を使用してユーザーが選択したレイアウト方法を記録し、次のページに入るときに Cookie の値を読み取り、レイアウト方法を割り当てることができます。 Cookie の使用については、このサイトの記事を参照してください:
JQuery を使用して Cookie を操作する