Web制作の現場で使えるjQuery　UIデザイン入門 ― 第24回

jQueryとAjaxで作るスムーズページング (2/3)

フロント側のHTMLを作成する

データの読み込み中に表示するローディングアイコン。アニメーションGIFでユーザーに読み込み中であることを分かりやすく伝える

　データを読み込んで表示する側（フロント側）の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;
}