アイコンとサムネイルを表示する

各項目のレイアウトを設定する

<li>の中には、色々なレイアウトを設定できます。いずれもHTMLタグと属性を追加するだけで大丈夫です。

<li>の中のレイアウト
・文字列のレイアウト
　<p>とか<h1>を<li>内に作成

・アイコンとサムネイル
　項目の左端に画像を表示

・バルーン内の文字列を表示(次回の記事で書きます。)
　小さい楕円の囲み内に文字列を表示する(位置は文字列の右隣)

・分割して表示
　２つのリンクにより右端を分割

ちなみに<li>内に表示する文字列のレイアウトには下記の表のタグや属性を利用する。これらはCSSにより自動的に文字の大きさや表示位置が決まります。

<li>内のタグに対応したCSSの設定
タグ、属性	CSS設定
<h1>～<h6>	font-size:16pxとかいろいろ
<p>、<dl>	font-size:12pxとかいろいろ
class="ui-li-aslide"	text-align:rightほか

・アイコンとサムネイル
<li>タグ内には、画像アイコンやサムネイルを設置できます。これらはどれも<p>の前に作成することで
項目の左側に置くことができます。以下の表はこれらの最大サイズや作成するHTMLタグです。

画像の設定
種類	最大画像サイズ	HTMLタグ	説明
アイコン	16ピクセル四方	<img class="ui-li-icon">	レイアウトにより位置の微調整が必要
サムネイル	80ピクセル四方	<img>	最初の１つだけがサムネイルに設定される

アイコンは<li>タグ内にある<img class="ui-li-icon">で表します。iconの大きさは最大16px四方に調整され、アイコンを配置するときは、レイアウトにより位置の微調整が必要になることがあります。

サムネイルは、<li>内にある初めの<img>で表します。サムネイルのときは、アイコンの大きさは最大80px四方に調整される。ですが、このタグにclass="ui-li-icon"を設定してしまうと動作がうまくいかないです。

サンプルコードの実行結果はこちら

<!DOCTYPE html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>jQueryMobile listviewのliタグ内にHTMLタグを書く</title>
	<link rel="stylesheet" href="../js/jquery.mobile-1.4.5.css">
	<script src="../js/jquery-1.11.3.js"></script>
	<script src="../js/jquery.mobile-1.4.5.js"></script>
</head>
<body>
	<section id="page" data-role="page">
		<header data-role="header">
			<h1>ヘッダ</h1>
		</header>
		<article data-role="content">
			<ul data-role="listview" data-inset="true">
				<!--
				ここから
				liタグ内にHTMLタグを書いてみる
				-->
				<li>
					<a href="#test">
					<h3>サンプルテキスト</h3>
					<p>pタグ内の文字</p>
					<p class="ui-li-aside">class="ui-li-aside"</p>
					</a>
				</li>
				<!--
				ここまで
				liタグ内にHTMLタグを書いてみる
				-->

				<!--
					ここから
					liタグ内にアイコンを表示する
				-->
				<li>
					<a href="#">
						<img class="ui-li-icon" src="../img/catejQueryMobile.png" style="top:1.9em">
						<h3>テスト</h3>
						<p>text</p>
					</a>
				</li>
				<li>
					<a href="#">
						<img class="ui-li-icon" src="../img/catejQueryMobile.png" style="top:1.4em">
						<h3>テスト</h3>
					</a>
				</li>
				<li>
					<a href="#">
						<img class="ui-li-icon" src="../img/catejQueryMobile.png" style="top:0.8em">
					text
					</a>
				</li>
				<!--
					ここから
					liタグ内にアイコンを表示する
				-->

				<!--
					ここから
					liタグ内にサムネイルを表示する
					画像の大きさを80*80に自動的に変更
				-->
				<li>
					<a href="#">
						<img src="../img/catejQueryMobile.png">
						<h3>テスト</h3>
						<p>text</p>
					</a>
				</li>
				<li>
					<a href="#">
						<img src="../img/catejQueryMobile.png">
						<h3>テスト</h3>
					</a>
				</li>
				<li>
					<a href="#">
						<img src="../img/catejQueryMobile.png">
					text
					</a>
				</li>
				<!--
					ここから
					liタグ内にサムネイルを表示する
				-->

			</ul>
		</article>
		<footer data-role="footer">
			<h1>フッタ</h1>
		</footer>
	</section>
</body>
</html>

<!DOCTYPE html>

<head>

<title>jQueryMobile listviewのliタグ内にHTMLタグを書く</title>

</head>

<body>

</header>

<!--

ここから

liタグ内にHTMLタグを書いてみる

-->

<li>

<h3>サンプルテキスト</h3>

<p>pタグ内の文字</p>

<p class="ui-li-aside">class="ui-li-aside"</p>

</a>

</li>

<!--

ここまで

liタグ内にHTMLタグを書いてみる

-->

<!--

ここから

liタグ内にアイコンを表示する

-->

<li>

</a>

</li>

<li>

</a>

</li>

<li>

text

</a>

</li>

<!--

ここから

liタグ内にアイコンを表示する

-->

<!--

ここから

liタグ内にサムネイルを表示する

画像の大きさを80*80に自動的に変更

-->

<li>

</a>

</li>

<li>

</a>

</li>

<li>

text

</a>

</li>

<!--

ここから

liタグ内にサムネイルを表示する

-->

</ul>

</article>

</footer>

</section>

</body>

</html>