フロント側のHTMLを作成する
データを読み込んで表示する側(フロント側)のHTML/XHTML(以下、HTML)は次のように記述します。コンテンツを表示したい領域に、id属性「content」を設定したdiv要素を用意します。表示する内容は前に作成したデータ用のHTMLから読み込みますので、div要素にはデータ取得中に表示するローディングアイコン(GIF画像)を配置しておきます。各ページへのナビゲーションリンクはul/li要素で記述し、li要素内のa要素のhref属性にはコンテンツデータのHTMLファイル名を設定します。
▼サンプル01(HTML部分)
<h1><img src="images/header.jpg" alt="新着書籍" /></h1>
<div id="content">
<p class="loading"><img src="images/loading.gif" alt="" /></p>
</div>
<ul class="pager">
<li><a href="data1.html">1</a></li>
<li><a href="data2.html">2</a></li>
<li><a href="data3.html">3</a></li>
</ul>
CSSは次のようになります。#contentの内側にはローディングアイコンが表示される場合と、商品情報(コンテンツデータの#content内)が表示される場合がありますので、その点を考慮して記述します。a.selectedはナビゲーションリンクのうち、現在表示中のページ番号に適用するスタイルです。表示中のページ番号には後ほどスクリプト側で「selected」というclass属性を設定します。
▼サンプル01(CSS部分)
div.colmun{
width:500px;
border-bottom:1px solid #CCC;
}
div.colmun:after{
content:".";
display:block;
clear:both;
visibility:hidden;
height:0;
}
div.colmun div.img{
float:left;
width:60px;
border:1px solid #ccc;
padding:5px;
margin:5px;
display:inline;
}
div.colmun div.img img{
border:0;
}
div.colmun div.info{
float:left;
padding:5px;
width:400px;
}
div.colmun div.info h2{
margin:0;
color:#009AFF;
font-size:small;
}
div.colmun div.info ul{
margin:0;
padding:15px 0 0 15px;
}
div.colmun div.info li{
margin:0;
font-size:small;
}
p.loading{
text-align:center;
margin:10px;
}
ul.pager{
text-align:center;
padding:10px;
}
ul.pager li{
display:inline;
}
ul.pager li a{
border:1px solid #009AFF;;
color:#009AFF;;
font-weight:bold;
margin:2px;
padding:5px;
text-decoration:none;
}
ul.pager li a.selected{
background:#73C7FF;
}
ソーシャルリアクション
この連載の記事
一覧へWebPro
jQueryとAjaxで作るスムーズページング
WebデザイナーのためのjQuery入門。jQueryのAjax機能を使ってスムーズなページングを実現する方法をチュートリアルで解説する。