libro
www.tuyano.com
jQuery Mobileによるスマートフォン用Webサイト作成入門

リストを使いこなそう (1/5)

作成:2011-06-06 07:34
更新:2012-03-29 10:22

■リストの基本

スマートフォンでは、幾つかの項目を一覧で表示し、その中から１つをクリック（タッチ）すると次の画面に進む、といったインターフェイスが多用されています。これが「リスト」です。

AndroidやiPhoneの設定アプリなどはその典型でしょう。スマートフォンは画面サイズがそれほど大きくないため、一度に多くの情報を表示し操作することができません。そこで、複雑な設定などは「リストから項目を次々と選んでは戻る」といったやり方をとっているわけですね。

jQuery Mobileにも、このリストを実現するための機能が用意されています。それは、HTMLでリストを表示する<ul><li>タグです。これらのタグを使って簡単にリストの表示を作成することができます。
<ul data-role="listview">
    <li>……項目……</li>
    ……必要なだけ<li>タグを用意……
</ul>
このように、<ul>タグ内にdata-role="listview"という属性を用意しておきます。たったこれだけで、リストを表示させることができます。

下のリスト欄に、簡単なサンプルを挙げておきました。３項目のリストを表示し、クリックすると別のページに移動します。ここではサンプルということで、リストの項目は何をクリックしてもすべて同じページに移動しますが、もちろん<a>タグのhrefを設定すれば、項目ごとに異なるページを表示させることもできます。

ここでは、<li>タグ内に２種類の項目を用意してあります。<a>タグによるリンクと、<a>タグのないただのテキストの項目です。実際に表示してみるとわかりますが、リンクのない項目はわずかにグレーがかった表示となり、右側に「＞」アイコンが表示されなくなります。リストの表示だけでなく、「クリックできるかどうかによって表示を変える」といったことまでちゃんと面倒みてくれるのですね。

なお、リンクの<a>タグには、data-transition="slide"を指定して右から左へとスライドするようにしています。リストによる表示の切り替えは、このスライド効果が基本です。――実は、このdata-transition="slide"は、省略してもちゃんとデフォルトでスライド効果を付加してくれるのですが、他で何かの設定などを操作した場合を考え、「リストの<a>タグには個々にdata-transition="slide"を用意するのが基本」と考えましょう。

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

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>

</head>
<body>

	<!-- home page -->
	<div id="home" data-role="page">
		<div data-role="header">
			<h1>Hello</h1>
		</div>
		<div data-role="content">
			<p>※リスト表示のサンプル。</p>
			<ul data-role="listview">
				<li><a href="#other" data-transition="slide">Hello</a></li>
				<li><a href="#other">Welcome</a></li>
				<li>Bye!</li>
			</ul>
		</div>
	</div>
	
	<!-- other page -->
	<div id="other" data-role="page">
		<div data-role="header">
			<h1>Next</h1>
		</div>
		<div data-role="content">
			<p>次のページですよ。</p>
		</div>
	</div>

</body>
</html>
※関連コンテンツ

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