コンポーネントをダイナミックに操作する(4/5):jQuery Mobileによるスマートフォン用Webサイト作成入門

コンポーネントをダイナミックに操作する (4/5)

作成:2011-06-20 08:23
更新:2012-03-29 10:28

■リストのダイナミックな項目操作

セレクトメニューのように、ダイナミックに項目を操作できると非常に重宝するものに「リスト」があります。<ul>,<ol>タグと<li>タグを組合わせて表示する、あれですね。

jQuery Mobileでは、リストは各項目がボタンのように表示される、スマートフォン特有のインターフェイスとして表示されるようになっています。この表示項目を必要に応じて追加削除できればずいぶんと便利でしょう。

リストへの項目の追加／削除は、jQuery Mobileに専用の機能が用意されているわけではありません。セレクトメニューと同様、JavaScript本来の機能や、jQueryの機能を用いて操作することになります。jQueryを利用するならば、以下のように行うことになるでしょう。

○項目の追加

$( 追加する項目の指定 ).appendTo( リストの指定 );

○項目の削除

$( 削除する項目の指定 ).remove();

jQueryに用意されている「appendTo」は、先ほども使いましたが、その要素を、引数に指定した要素の中に組み込みます。removeは、その項目をドキュメントから取り除きます。このように、項目の操作そのものは、jQueryがわかっていれば比較的簡単です。

ただし、このままでは表示は変化しません。編集後、リストを更新しなければいけません。これは以下のように行います。

$(コンポーネント指定).listview('refresh');

これでコンポーネントの表示が更新され、追加／削除が反映されます。――では、下に実際の利用例を挙げておきましょう。入力フィールドにテキストを書いて「Add」ボタンをおすと、そのテキストが新たな項目として追加されます。また「Delete」ボタンをおすと、入力フィールドに書いた名前の項目が削除されます。

ここでは、単に<li>タグを作って<ul>に組み込むのでなく、<li>の中に更に<a>タグを組み込むようにしてあります。実際のリストでは、このように<a>タグを使って他のページなどに移動するようにしておくのが一般的ですから、まず<a>タグを作成し、これを<li>タグに組み込み、この<li>タグを更に<ul>タグに組み込む、という手順になるでしょう。それが以下の部分です。

var str = $('#txt').val();
var li = $('<li>').attr('id',str);
li.appendTo($('#place'));
var a = $('<a>').text(str).attr('href','#next');
a.appendTo(li);

ちなみに、ここではわかりやすいように１つ１つて順を追って書いてありますが、jQueryならばこんなに何行も各必要はありません。以下のようにすれば１行で終わりです。

$('<a>').text(str).attr('href','#next').appendTo($('<li>').attr('id',str).
    appendTo($('#place')));

まぁ、どちらが書きやすく見やすいか？という問題もありますが、jQueryに慣れていればこんな具合にコードも整理されてきます。

(by. SYODA-Tuyano.)

※プログラムリストが表示されない場合

AddBlockなどの広告ブロックツールがONになっていると、プログラムリスト等が表示されない場合があります。これらのツールをOFFにしてみてください。

●プログラム・リスト●

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
		"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja">

	<head>
	<meta http-equiv="content-type"
		content="text/html;charset=utf-8" />
	<title>Sample</title>

	<link rel="stylesheet" 
		href="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.css" />
	<script type="text/javascript" 
		src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
	<script type="text/javascript" 
		src="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.js"></script>

	<script type="text/javascript">
	$('#home').live('pagecreate',function(){
		$('#btn1').bind('tap',doAdd);
		$('#btn2').bind('tap',doDel);
		
	});
	
	function doAdd(){
		var str = $('#txt').val();
		var li = $('<li>').attr('id',str);
		li.appendTo($('#place'));
		var a = $('<a>').text(str).attr('href','#next');
		a.appendTo(li);
		$('#place').listview('refresh');
	}

	function doDel(){
		var str = $('#txt').val();
		$('#' + str).remove();
		$('#place').listview('refresh');
	}
	</script>
	</head>
	
	<body>

	<!-- home page -->
	<div id="home" data-role="page">
		<div data-role="header">
			<h1>Hello</h1>
		</div>
		<div data-role="content">
			<p id="msg">※サンプル。</p>
			<div data-role="fieldcontain">
				<ul id="place" data-role="listview"></ul>
			</div>
			<div data-role="fieldcontain">
				<input type="text" name="txt" id="txt"	/>
				<input type="button" name="btn1" id="btn1" 
					value="add" />
				<input type="button" name="btn2" id="btn2" 
					value="delete" />
			</div>
		</div>
	</div>
	
	<!-- home page -->
	<div id="next" data-role="page">
		<div data-role="header">
			<h1>Next</h1>
		</div>
		<div data-role="content">
			<p id="msg">※ダミーページ</p>
		</div>
	</div>
	</body>
</html>

※関連コンテンツ

<< prev next >>

「jQuery Mobileによるスマートフォン用Webサイト作成入門」に戻る