• このエントリーをはてなブックマークに追加

以前に「jQueryで外部HTML（JSON形式）化した要素を「もっと見る」ボタンで追加する方法」
と題して、JSON形式でで外部HTML化したコンテンツ要素を
「もっと見る」ボタンで追加するUIを紹介しました。
当時公開したスクリプトでは「もっと見る」動作は
ページ内で１つの設置のみの構成になっていたところ
1ページで複数設置を必要とした場面があったり、同様の要望もいただいたりしたので、
複数設置パターンのサンプルを再度紹介してみます。

jQueryで外部HTML（JSON形式）化した要素を「もっと見る」ボタンで追加する方法【複数設置対応パターン】

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

ページをスクロールしていくと現れる「もっと見る」をクリックすると
そのエリアの続きに追加で要素を読み込みます。

サンプルではページ内に2つの「もっと見る」エリアを設置しています。

左のエリアは28個、右のエリアは20個の要素を
5個ずつ追加表示しています。

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

◆HTML
<div class="loadArea"></div>
<div class="loadArea"></div>

HTMLには要素を追加させたい箇所に
任意のクラスを付けたブロック要素を配置するだけです。
（複数設置パターンなので基本的にはIDではなくクラスで）

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

◆CSS
/* .loadArea
--------------------------- */
.loadArea {
	margin: 0 auto 10px auto;
	width: 300px;
	text-align: left;
}
.loadSet1 {float: left;}
.loadSet2 {float: right;}

.loadArea .loadItem {
	padding: 10px 0;
	width: 300px;
	line-height: 160%;
	border-bottom: #666 1px dotted;
}
.loadArea #item1_1,
.loadArea #item2_1 {
	border-top: #666 1px dotted;
}
.loadArea .loadItem img {
	margin: 0 15px 0 0;
	width: 100px;
	height: 100px;
	float: left;
}

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

/* .loadMoreBtn
--------------------------- */
.loadMoreBtn {
	padding: 10px 0;
	text-align: center;
	border: #000 1px solid;
	cursor: pointer;
}

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

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

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

◆SCRIPT
$(function(){
	var setArea = $('.loadArea'),
	btnTxt = 'もっと見る'; // ボタンテキスト

	setArea.wrap('<div class="loadWrap"></div>');
	setArea.after('<div class="loadMoreBtn">' + btnTxt + '</div>');

	var setWrap = $('.loadWrap');

	setWrap.each(function(){
		var setThis = $(this),
		thisLoadArea = setThis.find(setArea),
		loadNum = 5, // 読み込む個数
		loadTxt = 'Loading...', // Loading中の表示テキスト
		fadeSpeed = 500; // フェードスピード

		var setMore = setThis.find('.loadMoreBtn');

		var setIndex = setWrap.index(this),
		setNum = setIndex + 1;
		setMore.click(function(){
			$.ajax({
				url: 'js/include' + setNum + '.json',
				dataType: 'json',
				cache: false,
				success : function(data){
					var dataLengh = data.length,
					loadItemLength = thisLoadArea.find('.loadItem').length,
					setAdj = (dataLengh)-(loadItemLength),
					setBeg = (dataLengh)-(setAdj);
					if(!(dataLengh == loadItemLength)){
						thisLoadArea.append('<div class="nowLoading">' + loadTxt + '</div>');
						if(loadItemLength == 0){
							if(dataLengh <= loadNum){
								for (var i=0; i<dataLengh; i++) {
									$('<div id="item' + setNum + '_' + data[i].itemNum + '" class="loadItem">' + data[i].itemSource + '</div>').appendTo(thisLoadArea).css({opacity:'0'}).animate({opacity:'1'},fadeSpeed);
								}
								setMore.remove();
							} else {
								for (var i=0; i<loadNum; i++) {
									$('<div id="item' + setNum + '_' + data[i].itemNum + '" class="loadItem">' + data[i].itemSource + '</div>').appendTo(thisLoadArea).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' + setNum + '_' + data[v].itemNum + '" class="loadItem">' + data[v].itemSource + '</div>').appendTo(thisLoadArea).css({opacity:'0'}).animate({opacity:'1'},fadeSpeed);
								}
							} else if(loadNum >= setAdj){
								for (var i=0; i<setAdj; i++) {
									v = i+setBeg;
									$('<div id="item' + setNum + '_' + data[v].itemNum + '" class="loadItem">' + data[v].itemSource + '</div>').appendTo(thisLoadArea).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;
		});
		setThis.addClass('loadSet' + setNum);
		setMore.click();
	});
});

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

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

var setArea = $(‘.loadArea’) 要素を追加表示させるブロック要素クラス名
btnTxt = ‘もっと見る’ ボタンに表示するテキスト

併せて、スクリプト○行目からの設定値の内容は
以下の様になっています。

loadNum = 5 一度に読み込む個数
loadTxt = ‘Loading…’ ローディング中の表示テキスト
fadeSpeed = 500 要素を追加する際のフェードスピード

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

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

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

今回の複数設置の場合、読み込むJSONファイルに関しては
ファイル名の最後に数字（番号）を入れることで判別する構成にしてあります。

サンプルで使用しているJSONファイルは
・include1.json
・include2.json
となっており、「include1.json」が1つ目の「もっと見る」エリアに読み込む要素
「include2.json」が2つ目の「もっと見る」エリアに読み込む要素になります。

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つ目のダミーテキストです。"
	},
		・
		・
		・
]

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

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

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

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

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

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

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

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

  • このエントリーをはてなブックマークに追加

Related Posts

Trackback URL

Comments (0)







コメント内容

※コメントにHTMLタグを直接入力しないでください。
※HTMLタグを入力する際はタグ一つ一つの括弧「＜」「＞」を全角に変換して入力してください。 コメントは承認制になっているのですぐには反映されません。コメント頂いた内容については出来る限り早めの対応を心掛けていますが、時期によって返答が遅くなってしまうことがありますので、何卒ご了承ください。
» コメントについてのご注意  |  » ライセンスに関して

▲PAGETOP
Categories
Recent Entries
Popular Entries
Hatena Bookmark
Facebook
Tweets
Animal Protection
  • 福島被曝牛支援について
  • NO FUR