kurukuru-papaのブログ

主に、ソフトウェア開発に関連したメモを書き溜めたいと思います。

listviewを動的に操作してみた

Androidで、PhoneGapとjQuery Mobileを勉強しています。jQuery Mobileのリストビューを動的に生成し、リストビューの選択項目を取得する処理を作成しましたので、メモしておきます。

概要

次のように、リストビューの画面と、リストビューで選択された項目を表示する画面を用意しました。

プログラム

HTMLファイル(抜粋)

	<div data-role="page" id="jslistview">
		<div data-role="header">
			<a href="#index" data-icon="arrow-l" data-direction="reverse">TOP</a>
			<h1>動的なlistview</h1>
		</div>
		<div data-role="content">
			<ul data-role="listview" id="jslistview_ul">
			</ul>
			<br>
			<a href="#index" data-role="button" data-icon="arrow-l">戻る</a>
		</div>
		<div data-role="footer">
			<h4>&copy; 2012 Kurukurupapa</h4>
		</div>
	</div>
	<div data-role="page" id="jslistviewresult">
		<div data-role="header">
			<a href="#index" data-icon="arrow-l" data-direction="reverse">TOP</a>
			<h1>動的なlistview</h1>
		</div>
		<div data-role="content">
			<p id="jslistviewresult_msg"></p>
			<a href="#jslistview" data-role="button" data-icon="arrow-l">戻る</a>
		</div>
		<div data-role="footer">
			<h4>&copy; 2012 Kurukurupapa</h4>
		</div>
	</div>

JavaScriptファイル

// ----------------------------------------------------------------------
// 動的なlistview(共通定義/処理)
// ----------------------------------------------------------------------
var jslistviewData = {
	data : [ {
		name : "太陽(Sun)",
		comment : "恒星",
	}, {
		name : "水星(Mercury)",
		comment : "太陽から1番目の惑星",
	}, {
		name : "金星(Venus)",
		comment : "太陽から2番目の惑星",
	}, {
		name : "地球(Earth)",
		comment : "太陽から3番目の惑星",
	}, {
		name : "火星(Mars)",
		comment : "太陽から4番目の惑星",
	}, {
		name : "木星(Jupiter)",
		comment : "太陽から5番目の惑星",
	}, {
		name : "土星(Saturn)",
		comment : "太陽から6番目の惑星",
	}, {
		name : "天王星(Uranus)",
		comment : "太陽から7番目の惑星",
	}, {
		name : "海王星(Neptune)",
		comment : "太陽から8番目の惑星",
	}, {
		name : "冥王星(Pluto)",
		comment : "準惑星",
	}, ],
	selectedIndex : null,
};
// ----------------------------------------------------------------------
// 動的なlistview(リスト選択画面)
// ----------------------------------------------------------------------
$("#jslistview").live("pagebeforeshow", function(e, data) {
	// listviewの内容をクリア
	$("#jslistview_ul").empty();
	// listviewへデータを埋め込み
	for (i = 0; i < jslistviewData.data.length; i++) {
		var item = jslistviewData.data[i];
		$("#jslistview_ul").append('<li>' + //
		'<a href="#" onclick="jslistview_onClick(\'' + i + '\');">' + //
		'<p class="wordbreak"><b>' + item.name + '</b><br>' + //
		item.comment + '</p>' + //
		'</li>');
	}
	// listviewの表示を更新
	$("#jslistview_ul").listview("refresh");
});
function jslistview_onClick(index) {
	jslistviewData.selectedIndex = index;
	$.mobile.changePage("#jslistviewresult");
}
// ----------------------------------------------------------------------
// 動的なlistview(結果画面)
// ----------------------------------------------------------------------
$("#jslistviewresult").live("pagebeforeshow", function(e, data) {
	var index = jslistviewData.selectedIndex;
	var item = jslistviewData.data[index];
	$("#jslistviewresult_msg").empty();
	$("#jslistviewresult_msg").append("あなたは「" + item.name + "」を選択しました。");
});

動作環境

  • Android: 2.1以降
  • PhoneGap(Cordova): 1.5.0
  • jQuery Mobile: 1.1.0
  • 動作確認端末: Xperia SO-01B