TwitterやFacebookなどで使われている
コンテンツ要素をある一定の数表示（読み込み）しておいて
続きは「もっと見る」や「MORE」といったリンクやボタンをクリックすることで
要素を順々に読み込んでいくUI。
このUIを実装する際、使いやすいjQueryプラグインがなかなか見当たらなかったりするので、
同様のUIを実装する為の実験的スクリプトを作ってみたので簡単に紹介してみます。
jQueryで「もっと見る」ボタンで画像を順々に読み込むUIの実験
今回の実験では＜a＞リンクを張った＜img＞画像タグを
＜span＞タグで囲った構成のまとまり
———————————————————-
＜span＞＜a＞＜img＞＜/a＞＜/span＞
———————————————————-
上記のセットを順々に追加していく構成になっています。
併せて、画像を格納するディレクトリ名と画像ファイル名には命名規則を付けます。
———————————————————-
・サムネイル画像
/img/thumb/thumb1.jpg
・メイン（拡大）画像
/img/main/main1.jpg
※それぞれファイル名の最後の数字を連番にします。
———————————————————-
まずは動作のサンプルから。
「もっと見る」のボタンをクリックすると追加で画像が10個ずつ読み込まれます。
「もっと見る」をクリックすることで
合計36枚の画像を10個ずつ順々に表示しています。
（最後は端数の6個だけ表示）
この動作の全体構成について
まずはHTMLから。
◆HTML <div id="loadarea"></div> <a href="javascript:void(0);" id="loadmore">もっと見る</a>
HTMLは画像を表示するエリアと
「もっと見る」ボタン用のリンクを配置するだけで
それぞれID名をつけます。
これに対してのCSSは以下。
◆CSS
/* #loadarea
--------------------------- */
#loadarea {
margin: 0 auto;
width: 500px;
text-align: left;
}
#loadarea span {
width: 100px;
text-align: left;
}
#loadarea img {
width: 100px;
text-align: left;
}
#loadmore {
margin-top: 20px;
width: 494px;
height: 29px;
line-height: 29px;
display: block;
background: #fff;
border: #999 3px double;
}
今回はCSSは特に重要な項目はなく、
通常のレイアウトを形成するCSS指定のみになっています。
そして「もっと見る」のボタンをクリックして
画像を追加させていくUIを実装するスクリプトは以下のようになります。
◆SCRIPT
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
var $setArea = $('#loadarea'),
$setMore = $('#loadmore'),
loadNum = 10,
maxNum = 36;
$setMore.click(function(){
var childLengh = $setArea.children('span').length;
var loopCont = (childLengh)+(loadNum);
if(loopCont < maxNum){
$.each(new Array(loadNum),function(i){
$setArea.append('<span class="item" id="num' + ((childLengh)+((i)+1)) + '"><a href="img/main/main' + ((childLengh)+((i)+1)) + '.jpg"><img src="img/thumb/thumb' + ((childLengh)+((i)+1)) + '.jpg" alt="" /></a></span>');
});
} else if(loopCont >= maxNum){
var overCont = (loopCont)-(maxNum);
var adjustCont = (loadNum)-(overCont);
$.each(new Array(adjustCont),function(i){
$setArea.append('<span class="item" id="num' + ((childLengh)+((i)+1)) + '"><a href="img/main/main' + ((childLengh)+((i)+1)) + '.jpg"><img src="img/thumb/thumb' + ((childLengh)+((i)+1)) + '.jpg" alt="" /></a></span>');
$setMore.remove();
});
}
});
$(window).load(function(){
$setMore.click();
});
});
</script>
「もっと見る」ボタンをクリック後は、
上記で説明した
———————————————————-
＜span＞＜a＞＜img＞＜/a＞＜/span＞
———————————————————-
このソースのセットが指定した数だけ順々に追加していく構成になっています。
スクリプト開始部分にある
———————————
var $setArea = $(‘#loadarea’),
$setMore = $(‘#loadmore’),
loadNum = 10,
maxNum = 36;
———————————
は上から
———————————
・画像を表示するメインエリアのID名
・「もっと見る」ボタンのID名
・「もっと見る」クリック１回で表示する画像数
・表示する画像の最大枚数
———————————
となっているので、
ここの値を変更することでもろもろ調整が可能です。
「もっと見る」クリック後に生成されるHTMLには
画像を囲っている＜span＞タグにはそれぞれクラス「item」を共通で付与し、
個別にナンバリングされたID名が付く仕様にしています。
◆HTML生成後のサンプル <div id="loadarea"> <span class="item" id="num1"><a href="img/main/main1.jpg"><img src="img/thumb/thumb1.jpg" alt=""></a></span> <span class="item" id="num2"><a href="img/main/main2.jpg"><img src="img/thumb/thumb2.jpg" alt=""></a></span> <span class="item" id="num3"><a href="img/main/main3.jpg"><img src="img/thumb/thumb3.jpg" alt=""></a></span> <span class="item" id="num4"><a href="img/main/main4.jpg"><img src="img/thumb/thumb4.jpg" alt=""></a></span> <span class="item" id="num5"><a href="img/main/main5.jpg"><img src="img/thumb/thumb5.jpg" alt=""></a></span> ・ ・ ・ ・ ・ </div>
今回のサンプルは単純な＜span＞で囲われたリンク付き画像を追加していく処理になっていますが
スクリプト内の「.append();」で指定しているソース部分を変えることで
＜ul＞の中で＜li＞を追加していく仕様にしたり、ソース構成を変更させることも可能です。
「もっと見る」を使ってシンプルな構成での要素を追加していくUIでは
こんな感じにスクリプトを組むことで実装できるかと思います。
jQueryで「もっと見る」を使って要素を追加していくUI必要になった際に是非。。。