jQueryで外部HTML（JSON形式）化した要素を「もっと見る」ボタンで追加する方法

2013/11/19 TAGS :Facebook, jQuery, Twitter, もっと見る

以前に「jQueryで「もっと見る」ボタンで画像を順々に読み込むUIの実験」と題して
「もっと見る」ボタンで画像を次々と読み込ますUIを紹介しましたが
そこで紹介したスクリプトでは連番で構成している画像要素のみの追加だったので
「jQueryでページ最下部までスクロールした際に外部HTML（JSON形式）化した要素を追加する方法」
こちらと同様の構成でJSON形式で外部HTML化したコンテンツ要素を
「もっと見る」ボタンで追加するUIを試しに作ってみたので紹介してみます。

jQueryで外部HTML（JSON形式）化した要素を「もっと見る」ボタンで追加する方法

サンプルを別枠で表示する

ページの最下部にある「もっと見る」をクリックすると
追加で要素を読み込みます。

サンプルでは28個の要素を
5個ずつ追加表示しています。

全体構成についてまずはHTMLから。

◆HTML
<div id="loadarea"></div><!--/#loadarea-->

HTMLには要素を追加させたい箇所に
任意のID（もしくはクラス）を付けた
ブロック要素を配置するだけです。

そしてCSSは以下の様になります。

◆CSS
/* #loadarea
--------------------------- */
#loadarea {
	margin: 0 auto 10px auto;
	width: 500px;
	text-align: left;
}
#loadarea .loadItem {
	padding: 10px 0;
	width: 500px;
	line-height: 160%;
	border-bottom: #666 1px dotted;
}
#loadarea #item1 {
	border-top: #666 1px dotted;
}
#loadarea .loadItem img {
	margin: 0 15px 0 0;
	width: 200px;
	height: 200px;
	float: left;
}

/* #nowLoading
--------------------------- */
#nowLoading {
	padding: 5px 0;
	width: 100%;
	text-align: center;
}

/* #btnMore
--------------------------- */
#btnMore {
	padding: 10px 0;
	width: 100%;
	text-align: center;
	border: #000 1px solid;
	cursor: pointer;
}

/* =======================================
	ClearFixElements
======================================= */
#loadarea .loadItem:after {
	content: ".";
	height: 0;
	clear: both;
	display: block;
	visibility: hidden;
}
#loadarea .loadItem {
	display: inline-block;
	overflow: hidden;
}

基本的にはCSSは動作に影響しないもので
サンプル画面のレイアウトを形成しているものになっています。

そして実際の動作スクリプトは以下の様になります。

◆SCRIPT
$(function(){
	var setArea = $('#loadarea'),
	loadNum = 5, // 読み込む個数
	loadTxt = 'Now Loading...', // Loading中の表示テキスト
	btnTxt = 'もっと見る', // ボタンテキスト
	fadeSpeed = 500; // フェードスピード

	setArea.after('<div id="btnMore">' + btnTxt + '</div>');
	var setMore = setArea.next('#btnMore');

	setMore.click(function(){
		$.ajax({
			url: 'js/include.json',
			dataType: 'json',
			success : function(data){
				var dataLengh = data.length,
				loadItemLength = setArea.find('.loadItem').length,
				setAdj = (dataLengh)-(loadItemLength),
				setBeg = (dataLengh)-(setAdj);
				if(!(dataLengh == loadItemLength)){
					setArea.append('<div id="nowLoading">' + loadTxt + '</div>');
					if(loadItemLength == 0){
						if(dataLengh <= loadNum){
							for (var i=0; i<dataLengh; i++) {
								$('<div id="item' + data&#91;i&#93;.itemNum + '" class="loadItem">' + data[i].itemSource + '</div>').appendTo(setArea).css({opacity:'0'}).animate({opacity:'1'},fadeSpeed);
							}
							setMore.remove();
						} else {
							for (var i=0; i<loadNum; i++) {
								$('<div id="item' + data&#91;i&#93;.itemNum + '" class="loadItem">' + data[i].itemSource + '</div>').appendTo(setArea).css({opacity:'0'}).animate({opacity:'1'},fadeSpeed);
							}
						}
					} else if(loadItemLength > 0 && loadItemLength < dataLengh){
						if(loadNum < setAdj){
							for (var i=0; i<loadNum; i++) {
								v = i+setBeg;
								$('<div id="item' + data&#91;v&#93;.itemNum + '" class="loadItem">' + data[v].itemSource + '</div>').appendTo(setArea).css({opacity:'0'}).animate({opacity:'1'},fadeSpeed);
							}
						} else if(loadNum >= setAdj){
							for (var i=0; i<setAdj; i++) {
								v = i+setBeg;
								$('<div id="item' + data&#91;v&#93;.itemNum + '" class="loadItem">' + data[v].itemSource + '</div>').appendTo(setArea).css({opacity:'0'}).animate({opacity:'1'},fadeSpeed);
							}
							setMore.remove();
						}
					} else if(loadItemLength == dataLengh){
						return false;
					}
				} else {
					return false;
				}
			}, //success
			complete : function(){
				$('#nowLoading').each(function(){
					$(this).remove();
				});
				return false;
			} //complete
		});
		return false;
	});
});

今回のサンプルではJSONファイルとの兼ね合いから
外部JSファイル構成になっていますので
ここには記述していませんが
別途jQueryファイルは必要になります。

スクリプト開始部分にある設定値の内容は以下の様になっています。

var setArea = $(‘#loadarea’)	要素を追加表示させるブロック要素名（クラスでも可）
loadNum = 5	一度に読み込む個数
loadTxt = ‘Now Loading…’	ローディング中の表示テキスト
btnTxt = ‘もっと見る’	ボタンに表示するテキスト
fadeSpeed = 500	要素を追加する際のフェードスピード

これらの設定値を変更することでもろもろ調整が可能になっています。

追加される要素は一つひとつが
＜div＞で囲われるようになっており
個々にID名が付与されるようになっています。
※実行後のHTMLソースをFirebug等の開発ツールで見てもらえると分かるかと思います。
（ID名に関してはJSONファイルに記述）

スクリプト14行目の「url: ‘js/include.json’」が
読み込むJSONファイルの指定になるので
パスやファイル名を変える際にはここを変更します。

そして読み込むJSONファイルは以下の様になっています。
（ちょっとムダに長いです・・・）

◆JSON
[
	{
		"itemNum": "1",
		"itemSource": "<img src='img/photo1.jpg' alt='' />【photo1】<br>これは追加要素1つ目のダミーテキストです。これは追加要素1つ目のダミーテキストです。これは追加要素1つ目のダミーテキストです。これは追加要素1つ目のダミーテキストです。これは追加要素1つ目のダミーテキストです。これは追加要素1つ目のダミーテキストです。これは追加要素1つ目のダミーテキストです。"
	},
	{
		"itemNum": "2",
		"itemSource": "<img src='img/photo2.jpg' alt='' />【photo2】<br>これは追加要素2つ目のダミーテキストです。これは追加要素2つ目のダミーテキストです。これは追加要素2つ目のダミーテキストです。これは追加要素2つ目のダミーテキストです。これは追加要素2つ目のダミーテキストです。これは追加要素2つ目のダミーテキストです。これは追加要素2つ目のダミーテキストです。これは追加要素2つ目のダミーテキストです。これは追加要素2つ目のダミーテキストです。これは追加要素2つ目のダミーテキストです。"
	},
	{
		"itemNum": "3",
		"itemSource": "<img src='img/photo3.jpg' alt='' />【photo3】<br>これは追加要素3つ目のダミーテキストです。これは追加要素3つ目のダミーテキストです。これは追加要素3つ目のダミーテキストです。これは追加要素3つ目のダミーテキストです。"
	},
	{
		"itemNum": "4",
		"itemSource": "<img src='img/photo4.jpg' alt='' />【photo4】<br>これは追加要素4つ目のダミーテキストです。これは追加要素4つ目のダミーテキストです。これは追加要素4つ目のダミーテキストです。これは追加要素4つ目のダミーテキストです。これは追加要素4つ目のダミーテキストです。これは追加要素4つ目のダミーテキストです。これは追加要素4つ目のダミーテキストです。これは追加要素4つ目のダミーテキストです。"
	},
	{
		"itemNum": "5",
		"itemSource": "<img src='img/photo5.jpg' alt='' />【photo5】<br>これは追加要素5つ目のダミーテキストです。これは追加要素5つ目のダミーテキストです。これは追加要素5つ目のダミーテキストです。これは追加要素5つ目のダミーテキストです。これは追加要素5つ目のダミーテキストです。"
	},
	{
		"itemNum": "6",
		"itemSource": "<img src='img/photo6.jpg' alt='' />【photo6】<br>これは追加要素6つ目のダミーテキストです。"
	},
	{
		"itemNum": "7",
		"itemSource": "<img src='img/photo7.jpg' alt='' />【photo7】<br>これは追加要素7つ目のダミーテキストです。これは追加要素7つ目のダミーテキストです。これは追加要素7つ目のダミーテキストです。これは追加要素7つ目のダミーテキストです。これは追加要素7つ目のダミーテキストです。これは追加要素7つ目のダミーテキストです。これは追加要素7つ目のダミーテキストです。これは追加要素7つ目のダミーテキストです。これは追加要素7つ目のダミーテキストです。これは追加要素7つ目のダミーテキストです。"
	},
	{
		"itemNum": "8",
		"itemSource": "<img src='img/photo8.jpg' alt='' />【photo8】<br>これは追加要素8つ目のダミーテキストです。これは追加要素8つ目のダミーテキストです。これは追加要素8つ目のダミーテキストです。これは追加要素8つ目のダミーテキストです。これは追加要素8つ目のダミーテキストです。"
	},
	{
		"itemNum": "9",
		"itemSource": "<img src='img/photo9.jpg' alt='' />【photo9】<br>これは追加要素9つ目のダミーテキストです。これは追加要素9つ目のダミーテキストです。これは追加要素9つ目のダミーテキストです。"
	},
	{
		"itemNum": "10",
		"itemSource": "<img src='img/photo10.jpg' alt='' />【photo10】<br>これは追加要素10つ目のダミーテキストです。これは追加要素10つ目のダミーテキストです。これは追加要素10つ目のダミーテキストです。これは追加要素10つ目のダミーテキストです。これは追加要素10つ目のダミーテキストです。これは追加要素10つ目のダミーテキストです。これは追加要素10つ目のダミーテキストです。これは追加要素10つ目のダミーテキストです。"
	},
	{
		"itemNum": "11",
		"itemSource": "<img src='img/photo11.jpg' alt='' />【photo11】<br>これは追加要素11つ目のダミーテキストです。これは追加要素11つ目のダミーテキストです。これは追加要素11つ目のダミーテキストです。これは追加要素11つ目のダミーテキストです。"
	},
	{
		"itemNum": "12",
		"itemSource": "<img src='img/photo12.jpg' alt='' />【photo12】<br>これは追加要素12つ目のダミーテキストです。これは追加要素12つ目のダミーテキストです。これは追加要素12つ目のダミーテキストです。これは追加要素12つ目のダミーテキストです。これは追加要素12つ目のダミーテキストです。これは追加要素12つ目のダミーテキストです。これは追加要素12つ目のダミーテキストです。"
	},
	{
		"itemNum": "13",
		"itemSource": "<img src='img/photo13.jpg' alt='' />【photo13】<br>これは追加要素13つ目のダミーテキストです。"
	},
	{
		"itemNum": "14",
		"itemSource": "<img src='img/photo14.jpg' alt='' />【photo14】<br>これは追加要素14つ目のダミーテキストです。これは追加要素14つ目のダミーテキストです。これは追加要素14つ目のダミーテキストです。これは追加要素14つ目のダミーテキストです。これは追加要素14つ目のダミーテキストです。これは追加要素14つ目のダミーテキストです。これは追加要素14つ目のダミーテキストです。これは追加要素14つ目のダミーテキストです。これは追加要素14つ目のダミーテキストです。これは追加要素14つ目のダミーテキストです。"
	},
	{
		"itemNum": "15",
		"itemSource": "<img src='img/photo15.jpg' alt='' />【photo15】<br>これは追加要素15つ目のダミーテキストです。これは追加要素15つ目のダミーテキストです。これは追加要素15つ目のダミーテキストです。これは追加要素15つ目のダミーテキストです。これは追加要素15つ目のダミーテキストです。これは追加要素15つ目のダミーテキストです。これは追加要素15つ目のダミーテキストです。これは追加要素15つ目のダミーテキストです。"
	},
	{
		"itemNum": "16",
		"itemSource": "<img src='img/photo16.jpg' alt='' />【photo16】<br>これは追加要素16つ目のダミーテキストです。これは追加要素16つ目のダミーテキストです。これは追加要素16つ目のダミーテキストです。これは追加要素16つ目のダミーテキストです。"
	},
	{
		"itemNum": "17",
		"itemSource": "<img src='img/photo17.jpg' alt='' />【photo17】<br>これは追加要素17つ目のダミーテキストです。これは追加要素17つ目のダミーテキストです。"
	},
	{
		"itemNum": "18",
		"itemSource": "<img src='img/photo18.jpg' alt='' />【photo18】<br>これは追加要素18つ目のダミーテキストです。これは追加要素18つ目のダミーテキストです。これは追加要素18つ目のダミーテキストです。これは追加要素18つ目のダミーテキストです。これは追加要素18つ目のダミーテキストです。これは追加要素18つ目のダミーテキストです。これは追加要素18つ目のダミーテキストです。"
	},
	{
		"itemNum": "19",
		"itemSource": "<img src='img/photo19.jpg' alt='' />【photo19】<br>これは追加要素19つ目のダミーテキストです。これは追加要素19つ目のダミーテキストです。これは追加要素19つ目のダミーテキストです。これは追加要素19つ目のダミーテキストです。これは追加要素19つ目のダミーテキストです。これは追加要素19つ目のダミーテキストです。これは追加要素19つ目のダミーテキストです。これは追加要素19つ目のダミーテキストです。これは追加要素19つ目のダミーテキストです。"
	},
	{
		"itemNum": "20",
		"itemSource": "<img src='img/photo20.jpg' alt='' />【photo20】<br>これは追加要素20つ目のダミーテキストです。これは追加要素20つ目のダミーテキストです。これは追加要素20つ目のダミーテキストです。"
	},
	{
		"itemNum": "21",
		"itemSource": "<img src='img/photo21.jpg' alt='' />【photo21】<br>これは追加要素21つ目のダミーテキストです。これは追加要素21つ目のダミーテキストです。これは追加要素21つ目のダミーテキストです。これは追加要素21つ目のダミーテキストです。これは追加要素21つ目のダミーテキストです。これは追加要素21つ目のダミーテキストです。"
	},
	{
		"itemNum": "22",
		"itemSource": "<img src='img/photo22.jpg' alt='' />【photo22】<br>これは追加要素22つ目のダミーテキストです。これは追加要素22つ目のダミーテキストです。これは追加要素22つ目のダミーテキストです。これは追加要素22つ目のダミーテキストです。これは追加要素22つ目のダミーテキストです。これは追加要素22つ目のダミーテキストです。これは追加要素22つ目のダミーテキストです。これは追加要素22つ目のダミーテキストです。これは追加要素22つ目のダミーテキストです。"
	},
	{
		"itemNum": "23",
		"itemSource": "<img src='img/photo23.jpg' alt='' />【photo23】<br>これは追加要素23つ目のダミーテキストです。"
	},
	{
		"itemNum": "24",
		"itemSource": "<img src='img/photo24.jpg' alt='' />【photo24】<br>これは追加要素24つ目のダミーテキストです。これは追加要素24つ目のダミーテキストです。これは追加要素24つ目のダミーテキストです。これは追加要素24つ目のダミーテキストです。これは追加要素24つ目のダミーテキストです。これは追加要素24つ目のダミーテキストです。これは追加要素24つ目のダミーテキストです。これは追加要素24つ目のダミーテキストです。これは追加要素24つ目のダミーテキストです。"
	},
	{
		"itemNum": "25",
		"itemSource": "<img src='img/photo25.jpg' alt='' />【photo25】<br>これは追加要素25つ目のダミーテキストです。これは追加要素25つ目のダミーテキストです。これは追加要素25つ目のダミーテキストです。これは追加要素25つ目のダミーテキストです。"
	},
	{
		"itemNum": "26",
		"itemSource": "<img src='img/photo26.jpg' alt='' />【photo26】<br>これは追加要素26つ目のダミーテキストです。これは追加要素26つ目のダミーテキストです。これは追加要素26つ目のダミーテキストです。これは追加要素26つ目のダミーテキストです。これは追加要素26つ目のダミーテキストです。これは追加要素26つ目のダミーテキストです。これは追加要素26つ目のダミーテキストです。これは追加要素26つ目のダミーテキストです。これは追加要素26つ目のダミーテキストです。"
	},
	{
		"itemNum": "27",
		"itemSource": "<img src='img/photo27.jpg' alt='' />【photo27】<br>これは追加要素27つ目のダミーテキストです。これは追加要素27つ目のダミーテキストです。これは追加要素27つ目のダミーテキストです。これは追加要素27つ目のダミーテキストです。これは追加要素27つ目のダミーテキストです。"
	},
	{
		"itemNum": "28",
		"itemSource": "<img src='img/photo28.jpg' alt='' />【photo28】<br>これは追加要素28つ目のダミーテキストです。これは追加要素28つ目のダミーテキストです。これは追加要素28つ目のダミーテキストです。これは追加要素28つ目のダミーテキストです。これは追加要素28つ目のダミーテキストです。これは追加要素28つ目のダミーテキストです。これは追加要素28つ目のダミーテキストです。これは追加要素28つ目のダミーテキストです。これは追加要素28つ目のダミーテキストです。"
	}
]

サンプルで表示させている
追加要素28個分のHTMLソースになります。

「itemNum」と「itemSource」が1セットになっており
「itemNum」は追加させる要素のナンバリング、
「itemSource」は実際に追加させるHTMLソース部分になっています。

「itemNum」で追加させるナンバーは
生成されるソースの＜div＞にID名として入ることになるので
要素の連番を入れておきます。
（同じ数値を入れても動作自体には影響しませんが。。）

「itemSource」で記述するHTMLソースはJSONファイルの構成上、
属性はシングルクォーテーション「’’」で記述する必要がありますが
この部分に読み込む要素に対して、個別にHTMLソースを記述させることが出来る様になっています。

一つひとつのセットは { ～ } で囲われており
セットの間は「,」カンマで区切られていますが
最後のセットだけはカンマが付かない構成になります。

ページ内で表示する要素が多くなってしまう場合は
この様にソースを外部化してボタンクリックで読み込むようにすることで
ページロード時の負荷を軽くすることも可能になるかと思います。

JSON形式で外部HTML化した要素を「もっと見る」ボタンで追加表示させる際にぜひ。。。

サンプルファイルをダウンロードしたい方はこちらから