DOMでRSSを使う

トグルスイッチを設定する https://vesna-memo.com/?p=1456 https://vesna-memo.com/?p=1456#respond vesna Fri, 13 May 2016 21:00:11 +0000 jQueryMobile toggleswitch トグルスイッチ http://vesna-memo.com/?p=1456 トグルスイッチ(toggle switch)とは、〇型のつまみを左右にドラッグして２つの値のうちどちらかを選択するウィジェットです。ウィジェットをタップ・クリックするとツマキが現在とは反対の位置に移動 ...

トグルスイッチ(toggle switch)とは、〇型のつまみを左右にドラッグして２つの値のうちどちらかを選択するウィジェットです。ウィジェットをタップ・クリックするとツマキが現在とは反対の位置に移動して、設定される値も変更されます。

ウィジェットにはツマミのほかに選択した内容を示す文字列が表示されますが、その部分の幅全角3文字程度、半角文字で8文字程度です。文字列が長くなってもこの幅は変わりません。文字列が表示しきれない部分は隠れてしまいます。

<!DOCTYPE html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>jQueryMobile トグルスイッチを作成する</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">
		<fieldset data-role="fieldcontain">
			<label for="setting">設定</label>
			<select id="setting" data-role="slider">
				<option value="off">off</option>
				<option value="on">on</option>
			</select>
		</fieldset>
		</article>
		<footer data-role="footer">
			<h1>フッタ</h1>
		</footer>
	</section>
</body>
</html>

トグルスイッチにテーマを設定する

トグルスイッチにテーマを設定できる属性は、data-theme,data-track-themeがあります。data-theme属性はつまみのテーマを設定して、data-track-theme属性は文字列の背景のテーマを設定します。

https://vesna-memo.com/?feed=rss2&p=1456 0

項目選択の複数ウィジェットをグループ化する https://vesna-memo.com/?p=1447 https://vesna-memo.com/?p=1447#respond vesna Thu, 12 May 2016 21:00:51 +0000 jQueryMobile data-overlay-theme data-theme 項目選択 http://vesna-memo.com/?p=1447 年月日など、複数のリストから同時に選択したいとき、ウィジェットのグループ化が有効です。グループ化されたウィジェットは縦、横に密着して設置されて、全体の四隅が丸く表示されます。縦に並べてグループ化する ...

年月日など、複数のリストから同時に選択したいとき、ウィジェットのグループ化が有効です。グループ化されたウィジェットは縦、横に密着して設置されて、全体の四隅が丸く表示されます。

縦に並べてグループ化するには、ウィジェットを囲む<fieldset>にdata-role=”controlgroup”を追加し、このとき、ウィジェットの表示はグループ化された全てのウィジェットの横幅がほぼ画面いっぱいに広がります。また、選択された値に対応する文字列がこの幅より長いときは、表示しきれないところが”…”となります。

横に並べてグループ化するには、ウィジェットを囲む<fieldset>にdata-type=”horizontal”を追加し、このとき同じグループのウィジェットを一列に並べた長さが画面の横幅より短いときは、ウィジェットが改行されて表示されます。

テーマの設定

ウィジェットのテーマは２種類あって、それぞれを設定するための属性があります。

・ウィジェット本体には「data-theme」属性
・オーバーレイ(ダイアログの背景)には「data-overlay-theme」属性

ウィジェット本体のデフォルトの設定は、ウィジェットが配置されている領域んものに従います。オーバーレイとはダイアログの背景の事で、デフォルトのテーマは”a”です。サンプルコードでは、「ご希望の弁当は？」の箇所で設定しています。

ラベルの左側に表示する

<label>～</label>は、デフォルトではウィジェットの上に表示されますが、<fieldset>などに「data-role=”fieldcontain”」をの設定を追加すると文字列がウィジェットの左側に追加sれます、ただ、画面の幅が狭いと、この設定があったとしてもラベルがウィジェットの上に表示されます。さらに、<select>に「data-inline=”true”」を合わせて追加すると、ウィジェットの幅が短くなって画面に配置しやすくなります。

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

<!DOCTYPE html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>jQueryMobile 項目選択とトグルスイッチ</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">
		<fieldset data-role="controlgroup">
			<legend>弁当の宅配</legend>
			<label for="bento">弁当名</label>
			<select id="bento" name="bento" data-native-menu="false" data-theme="b" data-overlay-theme="b">
				<option>ご希望の弁当は？</option>
				<option>のり弁</option>
				<option>鮭弁</option>
				<option>鳥弁</option>
			</select>
			<label for="num">個数</label>
			<select id="num" name="num" data-native-menu="false">
				<option>個数</option>
				<option>1</option>
				<option>2</option>
				<option>3</option>
			</select>

		</fieldset>

		<fieldset data-role="controlgroup" data-type="horizontal">
			<legend>お届け日時</legend>
			<!--
			<label for="year">年</label>			
			<select id="year" name="year" data-native-menu="false">
				<option>年</option>
				<option value="2015">2015</option>
				<option value="2016">2016</option>
			</select>
			-->
			<label for="month">月</label>
			<select id="month" name="month" data-native-menu="false">
				<option>月</option>
				<option>10</option>
				<option>11</option>
				<option>12</option>
			</select>
			<label for="day">日</label>
			<select id="day" name="day" data-native-menu="false">
				<option>日</option>
				<option>1</option>
				<option>2</option>
				<option>3</option>
			</select>

			<label for="time">時間</label>
			<select id="time" name="time" data-native-menu="false">
				<option>時間</option>
				<option>10:30</option>
				<option>11:00</option>
				<option>11:30</option>
			</select>
		</fieldset>
		</article>
		<footer data-role="footer">
			<h1>フッタ</h1>
		</footer>
	</section>
</body>
</html>

アイコンの種類と位置を変更

アイコンの種類はdata-icon、位置はdata-iconposの各属性で変更できます。デフォルトの値は、data-icon=”arrow-d”(下向きのアイコン)、data-iconpos=”right”(ウィジェットの右端の設置)です。

https://vesna-memo.com/?feed=rss2&p=1447 0

<select>関連属性一覧
要素	属性	設定	補足
<select>	data-role=”fieldcontain”	複数ウィジェットをグループ化
	data-inline=”true\|false“	ウィジェットをラベルの右に表示
	data-native-menu=”true\|false”	リストをウィジェットの下に表示
<option>	data-placeholder=”true\|false”	先頭の選択肢をプレースホルダーとして扱う
アイコン	data-icon=”アイコン名称”	表示するアイコンの種類
アイコン	data-iconpos=”left\|right\|top\|bottom\|notext”	iconの表示位置
テーマ	data-theme=”a～b”	ウィジェットのテーマ	“a”～”b”まで設定できる
	data-overlay-theme=”a～b”	ダイアログの背景のテーマ
	data-track-theme=”a～b”	トグルスイッチのテーマ

選択項目(selectmenuウィジェット)

<select>は、複数の値から１つか複数を選択する操作を行う部品を表すタグです。jQueryMobileでは、この操作を行うウィジェットを２種類作成できます。

選択肢のポップアップ

ウィジェットのデフォルトでは、値を選択する時、選択肢はウィジェットの下に表示されますが、この部分のデザインはウィジェットの部分とは大きく違います。そこでdata-native-menu=”false”を設定し選択肢とウィジェットのデザインを統一できます。ポップアップはウィジェットがクリックされた時だけウィジェットを覆うように表示されます。値を設定済み(selected)のときは、その選択肢だけ異なった色で表示されます。

その後、選択肢のどれかが、ポップアップの外側をタップかクリックされたときに、ポップアップが消えます。選択肢がクリックされた時は、ポップアップが消えるのと同時にウィジェットの表示が選択肢の文字列に変わります。

サンプルコードの実行結果でポップアップの項目選択に表示されている「選択してください」という項目を選択すると良くないので、data-placeholder属性を設定します。ただ、data-placeholder属性がないときは、<select>内の先頭にvalue属性が<option>があれば、それがplaceholderとしてみなされます。またplaceholderが<option></option>のように作成されていて、タグ間に文字列が存在しない場合は、選択肢の表示が空欄となります。

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

<!DOCTYPE html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>jQueryMobile 項目選択とトグルスイッチ</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">

		<!-- デフォルトのウィジェット -->
		<label for="city">都市名</label>
		<select id="city" name="city" data-native-menu="false">
			<option value="#" data-placeholder="true">選択してください</option>
			<option value="#tokyo">東京</option>
			<option value="#osaka">大阪</option>
			<option value="#yokohama">横浜</option>
		</select>

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

jQueryMobile 項目を複数選択したり、見出しをつける
項目,複数選択,data-native-menu=”false”

複数選択の場合

<select multiple>のときは、値を同時に複数選択することができます。だた、ポップアップにより選択できるようにしたいときはdata-native-menu=”false”を同じ<select>タグに設定する必要があります。

値を選択すると右端にレ印が表示されて、同じ値をまたクリックするとレ印が消えます。選択が終了したら左上の×印かポップアップの外側をクリックかタップして消去できます。ポップアップが消去されたあとは、選択されたあチアがカンマ区切りで表示され、値が選択された数も小さい数値で表示されます。

<!DOCTYPE html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>jQueryMobile 項目選択とトグルスイッチ</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">

		<label for="city">都市名</label>
		<select id="city" name="city" data-native-menu="false" multiple>
			<option value="#" data-placeholder="true">選択してください</option>
			<option value="#tokyo">東京</option>
			<option value="#osaka">大阪</option>
			<option value="#yokohama">横浜</option>
		</select>

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

見出しによるグループ分け

選択肢が多く、見出しによるグループ分けが必要な時は、同じグループに属する<option>を<optgroup>タグで囲みます。グループの名称はlabel属性に設定します。

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

<!DOCTYPE html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>jQueryMobile 項目選択とトグルスイッチ</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">

		<label for="city">日本の都市名</label>
		<select id="city" name="city" data-native-menu="false" multiple>
			<option value="#" data-placeholder="true">選択してください</option>
			<optgroup label="関東">
				<option value="#tokyo">東京</option>
				<option value="#yokohama">横浜</option>
			</optgroup>
			<optgroup label="近畿">
				<option value="#osaka">大阪</option>
				<option value="#kyoto">京都</option>
			</optgroup>
	<!--
	選択肢が多くなると、ダイアログに切り替わる。
			<optgroup label="中国">
				<option value="#osaka">岡山</option>
				<option value="#tottori">鳥取</option>
				<option value="#izumo">出雲</option>
				<option value="#hiroshima">広島</option>
				<option value="#hagi">萩</option>
				<option value="#simonoseki">下関</option>
			</optgroup>
			<optgroup label="四国">
				<option value="#tokushima">徳島</option>
				<option value="#ehime">愛媛</option>
				<option value="#kochi">高知</option>
				<option value="#takamatsu">高松</option>
			</optgroup>
	-->
		</select>
		</article>
		<footer data-role="footer">
			<h1>フッタ</h1>
		</footer>
	</section>
</body>
</html>

選択肢をダイアログ表示

サンプルコードのコメントアウトを消して、選択肢が多くなったとき、ポップアップが画面全体を覆う場合は、ダイアログによる表示に切り替わります。ウィジェットがクリック・タップされると画面が遷移することになります。このダイアログではタイトルが表示される文字列に対応す<label>～<label>間の文字列になります。placeholderは表示されません。

ダイアログで値を選択すると前のページに戻ります。値を選択しないで戻るには、×印をクリック・タップするか、端末で戻る操作をします。

https://vesna-memo.com/?feed=rss2&p=1449 0

値を選択するボタンを表示する https://vesna-memo.com/?p=1445 https://vesna-memo.com/?p=1445#respond vesna Tue, 10 May 2016 21:00:08 +0000 jQueryMobile チェックボタンボタンラジオボタン http://vesna-memo.com/?p=1445 値を選択するボタンは以下の２つがあります。・複数の値から1つだけを選択するウィジェット　ラジオボタン・いくつかの値を同時に選択できるウィジェット　チェックボックスこれらによる値の選択はクリックか ...

値を選択するボタンは以下の２つがあります。

・複数の値から1つだけを選択するウィジェット　ラジオボタン
・いくつかの値を同時に選択できるウィジェット　チェックボックス

これらによる値の選択はクリックかタップでします。デスクトップ画面で表示しているときは、マウスのカーソルが重なると、その位置の選択肢の表示に変化が起きます。これらは同じ種類でのグループ化が可能で、縦、横それぞれに並べて表示できます。レイアウトをするときに必須なのが、<legend>と<label>タグです。<legend>タグは、フィールドのグループ(<fieldset>)を表す名前を設定するもので、表示位置は画面のレイアウト次第ですが、変更することもできます。<label>は、ラジオボタンとチェックボックスにせっていされた選択肢を表す文字列を設定します。

ラジオボタン(<input type=”radio”>)

ラジオボタンは、name属性の値が同じものが複数集まり同じグループの選択肢となります。同じグループ同士の物をひとつのものとし表示すれば、選択肢のグループを分かりやすく表示できます。

チェックボックス(<input type=”checkbox”>)

チェックボックスもラジオボタンと同じようにボタンで表示されてグループ化できます。
選択されている状態はレ印のアイコンで表します。横一列でグループ化したときは、選択されたことをレ印ではなくて色で表します。このとき見た目ではラジオボタンと判別ができないので複数選択が可能であることを<legend>で見出しをつけると良いです。

<legend>の表示位置を設定する

同じグループに属するラジオボタン、チェックボックスを<fieldset>～</fieldset>で囲むとき、その部分の見出しを<legend>によって表示できます。デフォルトでは<legend>～</legend>間の文字列はウィジェットのすぐ上にひゅおじされますが、data-role=”fieldcontain”が設定されると、その文字列がウィジェットの左に表示されます。

テーマを設定する

ラジオボタン、チェックボックスにテーマを設定するには、それ自身の<input>にdata-theme属性を設定します。

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

<!DOCTYPE html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>jQueryMobile ラジオボタンを表示する</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">
		<!--
		グループ化ありのラジオボタンはお互いにくっついて配置され、
		四隅が丸く表示されます。このグループ化を表すのが
		data-role="controlgroup"です。これはラジオボタンそのものではなくて
		同じグループをラジオボタンを囲むdivやfieldsetタグに追加します。
		-->
		<fieldset data-role="controlgroup">
			<label for="HTML">HTML</label>
			<input id="HTML" name="lang" type="radio" value="1" checked>
			<label for="CSS">CSS</label>
			<input id="CSS" name="lang" type="radio" value="2">
			<label for="JavaScript">JavaScript</label>
			<input id="JavaScript" name="lang" type="radio" value="3">
		</fieldset>

		<!-- 
		横一列でグループ化するには 下記のように
		data-type="horizontal"という設定を追加する。
		このときは、選択された状態は〇で表示するのではなく
		色で選択されている状態を表しています。
		 -->
		<fieldset data-role="controlgroup" data-type="horizontal">
			<label for="HTML2">HTML</label>
			<input id="HTML2" name="lang2" type="radio" value="1" checked>
			<label for="CSS2">CSS</label>
			<input id="CSS2" name="lang2" type="radio" value="2">
			<label for="JavaScript2">JavaScript</label>
			<input id="JavaScript2" name="lang2" type="radio" value="3">
		</fieldset>

		<fieldset data-role="controlgroup">
			<label for="japanese">日本語</label>
			<input id="japanese" name="language" type="checkbox" value="1" checked>
			<label for="english">英語</label>
			<input id="english" name="language" type="checkbox" value="2">
			<label for="spanish">スペイン語</label>
			<input id="spanish" name="language" type="checkbox" value="3">
		</fieldset>

		<div data-role="fieldcontain">
			<fieldset data-role="controlgroup" data-type="horizontal">
				<legend>fieldcontain</legend>
				<label for="japanese_hori">日本語</label>
				<input id="japanese_hori" name="language" type="checkbox" value="1" checked>
				<label for="english_hori">英語</label>
				<input id="english_hori" name="language" type="checkbox" value="2" data-theme="b">
				<label for="spanish_hori">スペイン語</label>
				<input id="spanish_hori" name="language" type="checkbox" value="3">
			</fieldset>
		</div>

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

https://vesna-memo.com/?feed=rss2&p=1445 0

ボタンを設定する https://vesna-memo.com/?p=1442 https://vesna-memo.com/?p=1442#respond vesna Mon, 09 May 2016 21:00:37 +0000 jQueryMobile data-inline="true" ボタン横に並べる http://vesna-memo.com/?p=1442 前回の記事では<a data-role=”button”>によるボタンを取り上げましたが、ここでは以外の<input>、<button>のボ ...

前回の記事では<a data-role=”button”>によるボタンを取り上げましたが、ここでは以外の<input>、<button>のボタンについて記事を書いていきます。ボタンには、「クリックかタップのみのボタン」と「値を選択するボタン」があります。

これらを単独かグループ化してくっつけて表示できます。また空間次第では複数のボタンを横一列に並べて表示することができます。

ボタンに関連する属性一覧
要素	属性名と属性値	設定	補足
ボタン	data-theme=”a～b”	テーマ	デフォルトでは”a”～”b”まで設定済み
ボタン	data-inline=”true”	ボタンをインラインで表示	ボタンの幅は表示するボタンに依存
<fieldset> <div>とか	data-role=”controlgroup”	グループ化	四隅が丸くなり、ボタン同士がくっついて表示
	data-role=”fieldcontain”	ウィジェットの配置	ウィジェットを水平に並べて配置
	data-type=”horizontal”	ボタンの配置	グループ化されたボタンを水平に並べて配置

タップ・クリックのみのボタン

タップ・クリックのみのボタンは、その形状がリンクによるものと同じですが、リンクによるボタンと違う点はdata-属性を追加しなくてもウィジェットとして画面に表示される点です。ボタンのラベルのラベルとして表示されるのは、HTMLと同様、value属性値や<button>～</button>間に書いた文字列です。ウィジェットとして表示されるボタンは以下の物があります。

・フォームの送信ボタン　<input type=”submit”>
・フォームのリセットボタン　<input type=”reset”>
・送信されないボタン　<input type=”button”>
・<button>によるボタン

このボタンを作成すると、デフォルトではフォームの横幅いっぱいに表示されるので、複数ボタンを並べて作成すると、縦に並んで表示されてしまいます。ボタンを横に並べたいときは、それぞれにdata-inline=”true”を追加します。こうすることでボタンをインラインで表示できます。

空間の各ブロックにボタンを配置する方法でも、複数のボタンを横一列に並べて表示できます。

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

<!DOCTYPE html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>jQueryMobile ボタンを表示する</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">
		<fieldset>
			<div class="ui-block-a">
				<input type="submit" value="送信" data-theme="b">
			</div>
			<div class="ui-block-b">
				<input type="submit" value="取消" data-theme="a">
			</div>
		</fieldset>
		</article>
		<footer data-role="footer">
			<h1>フッタ</h1>
		</footer>
	</section>
</body>
</html>

https://vesna-memo.com/?feed=rss2&p=1442 0

jQueryMobileとフォームを組み合わせてみる https://vesna-memo.com/?p=1440 https://vesna-memo.com/?p=1440#respond vesna Sun, 08 May 2016 21:00:37 +0000 jQueryMobile data-ajax data-direction data-transition form フォーム http://vesna-memo.com/?p=1440 フォーム(user-submittable form)は、HTMLタグでは<form>タグで表されます。フォーム自体はウィジェットではないですが、フォーム内にはデータを入力するためのウィジ ...

フォーム(user-submittable form)は、HTMLタグでは<form>タグで表されます。フォーム自体はウィジェットではないですが、フォーム内にはデータを入力するためのウィジェットを表示できます。それとフォームは以下のことを同時に設定できます。

●同時にサーバーへ送信されるデータのまとまり
●データの送信方法

<form>内には、データを入力するためのフィールドが配置されます。例と挙げると、ログイン画面に配置されたユーザーIDとパスワードを入力する部分はテキスト入力フィールドといいます。フィールドは１つのフォーム内に複数配置されることがよくあり、入力フィールドだけではなく、データ送信ボタンを設定することもあります。これらのデザインはいずれも作成されたHTMLをもとにし自動的に設定されます。フォーム内のフィールドに同じテーマを設定したいときは、<form class=”ui-body ui-body-a”>と書きます。

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

<!DOCTYPE html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>jQueryMobile フォームの作成</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">
			<form action="login" class="ui-body ui-body-c">
			<fieldset>
				<legend>Login</legend>
				<label for="username">UserName</label>
				<input id="username" type="text">
				<label for="pw">PassWord</label>
				<input id="pw" type="password">
				<input type="submit" value="送信">
			</fieldset>
			</form>
		</article>
		<footer data-role="footer">
			<h1>フッタ</h1>
		</footer>
	</section>
</body>
</html>

データ送信方法を設定したいときはdata-ajax属性を利用

jQueryMobileのデフォルトでは、<form>によるデータの送信はAjaxで行われ、データ送信後は、<form>のaction属性値で示されたページへ遷移します、なので<form>にはページ遷移のアニメーションを設定するdata-transition,data-direction属性をせっていできます。それとaction属性が<form>に設定されていない場合は、ページに設定されたdata-urlの属性値をもとにして遷移するページが決まります。

このとき、データの送信元(サーバー上で動作しているアプリケーション)からは、次に表示するページの要素を受信しなければなりません、受信した要素は、<form>が書かれているHTML文書に追加されてから表示されます。なので、画面表示の環境は遷移前の状態(CSS、HTMLタグとか、JavaScriptコードとか)が維持されます。

こうしたAjaxページ遷移ではなくて、データ送信後に表示するHTML文書そのものを遷移させたいときは、<form data-ajax=”false”>と書きます。こうすることで、action属性の値で設定された送信元から受信するHTML文書が画面に表示されます。このときは、画面表示の環境が千二語のHTML文書に設定されたものになります。

https://vesna-memo.com/?feed=rss2&p=1440 0

バルーンを表示、項目を分割、折り畳みやポップ内にlistviewを作成する。 https://vesna-memo.com/?p=1438 https://vesna-memo.com/?p=1438#respond vesna Sat, 07 May 2016 21:00:38 +0000 jQueryMobile class="ui-li-count" data-count-theme data-split-theme バルーン http://vesna-memo.com/?p=1438 バルーンとは、円形の囲みのことで、jQueryMobileでは、その内部に文字列を表示するために、実際の形は小さい長円形です。バルーンは<li>内の文字列の右側に表示されます。表示される文 ...

バルーンとは、円形の囲みのことで、jQueryMobileでは、その内部に文字列を表示するために、実際の形は小さい長円形です。バルーンは<li>内の文字列の右側に表示されます。表示される文字列を想定されているのは数値で、フォントサイズは11pxです。

バルーンは<span class=”ui-li-count”>により表示できます。テーマの設定はウィジェットに対して、data-count-theme属性を追加します。なので、同じウィジェットのバルーンは全て同じテーマが適用されます。

●分割表示
<li>の内にリンクを２つ作ると、項目が横２つに分割されて、それぞれの領域が別々のリンクとして設定されます。後のリンクは自動的にアイコンのみのボタンとして設定されるため、data-icon属性によりアイコンの種類を設定します。また、この部分のデフォルトのテーマは”a”で設定されいますが、data-split-theme属性で変更できます。

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

<!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" data-count-theme="a">
				<li><a href="#link1">カテゴリー１<span class="ui-li-count">15</span></a></li>
				<li><a href="#link2">カテゴリー２<span class="ui-li-count">25</span></a></li>
				<li><a href="#link3">カテゴリー３<span class="ui-li-count">50</span></a></li>
			</ul>

			<ul data-role="listview" data-inset="true" data-split-theme="a">
				<li>
					<a href="#link4">CSS<span class="ui-li-count">30記事</span>
					<a href="#" data-icon="search">検索</a>
				</li>
				<li>
					<a href="#link5">HTML<span class="ui-li-count">100記事</span>
					<a href="#" data-icon="check">検索</a>
				</li>
				<li>
					<a href="#link6">JavaScript<span class="ui-li-count">20記事</span>
					<a href="#" data-icon="back">検索</a>
				</li>
			</ul>
		</article>
		<footer data-role="footer">
			<h1>フッタ</h1>
		</footer>
	</section>
</body>
</html>

別のウィジェット内に表示

このlistviewウィジェットは、ポップアップや折り畳みの書くウィジェット内にも表示できますが、CSSで調整が必要なことがあります。

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

<!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">
			<p><a href="#popup" data-rel="popup">POPUP</a></p>

			<div data-role="collapsible" data-content-theme="b">
				<h3>CollapsibleMenu</h3>
				<ul data-role="listview">
					<li><a href="#photo1">画像１</a></li>
					<li><a href="#photo2">画像２</a></li>
					<li><a href="#photo3">画像３</a></li>
				</ul>
			</div>
		</article>
		<div id="popup" data-role="popup">
			<header data-role="header">
				<h1>Menu</h1>
			</header>
			<ul data-role="listview" data-theme="a">
				<li><a href="#popupmenu1">ポップアップメニュー１</a></li>
				<li><a href="#popupmenu2">ポップアップメニュー２</a></li>
				<li><a href="#popupmenu3">ポップアップメニュー３</a></li>
			</ul>
		</div>
		<footer data-role="footer">
			<h1>フッタ</h1>
		</footer>
	</section>
</body>
</html>

https://vesna-memo.com/?feed=rss2&p=1438 0

アイコンとサムネイルを表示する https://vesna-memo.com/?p=1436 https://vesna-memo.com/?p=1436#respond vesna Fri, 06 May 2016 21:00:35 +0000 jQueryMobile アイコンサムネイル http://vesna-memo.com/?p=1436 各項目のレイアウトを設定する <li>の中には、色々なレイアウトを設定できます。いずれもHTMLタグと属性を追加するだけで大丈夫です。 <li>の中のレイアウト・文字列のレイ ...

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

<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>

https://vesna-memo.com/?feed=rss2&p=1436 0

項目リストを設定する https://vesna-memo.com/?p=1433 https://vesna-memo.com/?p=1433#respond vesna Thu, 05 May 2016 21:00:11 +0000 jQueryMobile data-role="listview" listview 項目リスト項目検索 http://vesna-memo.com/?p=1433 項目リスト(listview)は、ふくすうの項目を列挙するためのウィジェットで、項目には文字列や、画像、数値を出力する部分を設けたり色々な事ができます。 HTMLタグに追加できる属性一覧設定対象名 ...

項目リスト(listview)は、ふくすうの項目を列挙するためのウィジェットで、項目には文字列や、画像、数値を出力する部分を設けたり色々な事ができます。

HTMLタグに追加できる属性一覧
設定対象	名称=”設定値”(太字はデフォルト)	説明
ウィジェット	data-role=”listview”	項目リストの作成
ウィジェット	data-inset=”true\|false”	各項目を角丸で表示
ウィジェット・項目	data-theme=”テーマの名称”	ウィジェットや項目のテーマ
ウィジェット	data-count-theme=”テーマの名称”	数値表示部分のテーマ
	data-header-theme=”テーマの名称”	ネストされたウィジェットの画面遷移後のヘッダのテーマ
	data-split-icon=”アイコンの名称”	リストの右側にアイコンを表示
	data-split-theme=”テーマの名称”	分割部分のテーマ
仕切り	data-role=”list-divider”	仕切り。見出しとか
	data-dividertheme=”テーマの名称”	仕切りのテーマ
	data-autodivider=”true\|false“	仕切りを自動的に作成するか否か
検索フィールド	data-filter=”true\|false“	検索フィールドを表示するか否か
	data-filter-placeholder=”文字列”	検索フィールドに表示する文字列
	data-filter-theme=”テーマの名称”	検索フィールドのテーマ
項目	data-filter-text=”文字列”	検索用文字列
項目	data-icon=”アイコンの名称”	アイコンの表示

ウィジェットの構造

ウィジェットの基本的な作りは、<ul>や<ol>に「data-role=”listview”」を付加します。各項目ごとの詳細なレイアウトは<li>内の各種タグで表します。基本的な構造は以下の３点あります。

１．<li>ネタ<li>のように<li>内に文字列のみが作成され、リンクがなし
２．<li><a href=”#neta”>ネタ</a></li>のみたいに、<li>内にリンクあり
３．ウィジェットとなるタグにdata-inset=”true”を設定して角丸で表示する

それぞれの表示は以下に掲げるようウィジェットが表示されます。。ただ、data-theme属性により色や背景が異なることがあります。
・リンクなし　文字列のみを表示
・リンクあり　文字列と右端に”arrow-r”のアイコン
・角丸で表示(data-inset=”true”)　上端の上側と下端の下側が角丸

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

<!DOCTYPE html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>jQueryMobile listview</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="page1" data-role="page">
		<header data-role="header">
			<h1>ヘッダ</h1>
		</header>
		<article data-role="content">

			<!-- リンクなし -->
			<p>リンクなし</p>
			<ul data-role="listview" data-theme="b">
				<li>東京</li>
				<li>千葉</li>
				<li>静岡</li>
			</ul>

			<!-- リンクあり -->
			<p>リンクあり</p>
			<ul data-role="listview" data-theme="a">
				<li><a href="#tokyo">東京</a></li>
				<li><a href="#chiba">千葉</a></li>
				<li><a href="#shizuoka">静岡</a></li>
			</ul>

			<!-- 角丸で表示 -->
			<p>角丸で表示</p>
			<ul data-role="listview" data-inset="true" data-theme="a">
				<li><a href="#tokyo">東京</a></li>
				<li><a href="#chiba">千葉</a></li>
				<li><a href="#shizuoka">静岡</a></li>
			</ul>
		</article>
		<footer data-role="footer">
			<h1>フッタ</h1>
		</footer>
	</section>
</body>
</html>

仕切りをつける

項目リストにタイトルをつけたり、多くの<li>の間に仕切りを設置したいときは、<li>に「data-role=”list-divider”」を追加します。テーマはウィジェットとなるタグに、data-divider-theme属性を利用することで設定できます。サンプルコードのように途中で仕切りがあることで、複数のリンクをグループ化していることが表現できます。

ちなみにdata-autodividers=”true”と設定すると、liやaタグ内に記述された文字列をもとにして、自動的に仕切りを付すことができます。デフォルトでは、仕切りに文字列の先頭の文字が表示されるので、文字列がアルファベット、ひらがな、カタナカのいずれなら利用できます、デフォルト以外の方法で仕切りを付けたいときは、JavaScriptを用いて設定する必要があります。これはのちにかきます。

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

<!DOCTYPE html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>jQueryMobile listviewに仕切りをつける</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="page1" data-role="page">
		<header data-role="header">
			<h1>ヘッダ</h1>
		</header>
		<article data-role="content">
			<ul data-role="listview" data-divider-theme="a" data-inset="true">
				<li data-role="list-divider">メニュー１</li>
				<li><a href="#">test</a></li>
				<li><a href="#">test</a></li>
				<li data-role="list-divider">メニュー２</li>
				<li><a href="#">test</a></li>
				<li><a href="#">test</a></li>
				<li data-role="list-divider">メニュー３</li>
				<li><a href="#">test</a></li>
				<li><a href="#">test</a></li>
				<li data-role="list-divider"></li>
			</ul>
		</article>
		<footer data-role="footer">
			<h1>フッタ</h1>
		</footer>
	</section>
</body>
</html>

項目リストのネスト

jQueryMobile1.3.0からこの機能は非推奨となり、1.4.0から動きません！

各項目の中に項目リストを設ける構造をネスト(nest)といい、HTMLならliタグの内側にul,olタグは入る構造のことです、

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

<!DOCTYPE html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>jQueryMobile 項目の中に項目を入れる</title>
	<link rel="stylesheet" href="../jsold/jquery.mobile-1.2.0.css">
	<script src="../jsold/jquery-1.8.2.js"></script>
	<script src="../jsold/jquery.mobile-1.2.0.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-header-theme="b" data-inset="true">
				<li data-role="list-divider">関東の都市</li>
				<li>東京
					<ul data-inset="true">
						<li data-role="list-divider">建物</li>
						<li>スカイツリー</li>
					</ul>
				</li>
				<li>横浜
					<ul data-inset="true">
						<li data-role="list-divider">建物</li>
						<li>ランドマークタワー</li>
						<li>赤レンガ倉庫</li>
					</ul>
				</li>
			</ul>
		</article>
		<footer data-role="footer">
			<h1>フッタ</h1>
		</footer>
	</section>
</body>
</html>

項目を検索する

項目のリストにdata-filter=”true”を追加すると、リストの上に項目を検索するフォームが表示されて、入力フィールドにキーワードを入力すると、それを含む項目だけが表示され、含まない項目は非表示となります。

liタグ内の文字列以外を検索したい

liタグ内の文字列以外を検索したいときは、それぞれのliタグにdata-filtertext属性を付加します。この属性がliタグに追加されたら、検索の対象がこの値になります。なので、属性の値に漢字とひらがなを設定すれば、検索対象を漢字とひらがなの両方に広げることができ利便性が向上します。属性の値がアルファベットのときは、大文字でも小文字でも検索対象になります。

仕切りがある時の表示

項目リストに<li data-role=”list-divider”>で表される仕切りがあるときは、検索されたキーワードのすぐ上に位置する仕切りも表示されます。

項目検索とli文字列以外を検索する
サンプルコードの実行結果はこちら

<!DOCTYPE html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>jQueryMobile listviewに仕切りをつける</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="page1" data-role="page">
		<header data-role="header">
			<h1>ヘッダ</h1>
		</header>
		<article data-role="content">
			<ul data-role="listview" data-inset="true" data-filter="true" data-filter-placeholder="都市名検索">
				<li data-role="list-divider">と</li>
				<li data-filtertext="東京 とうきょう">東京</li>
				<li data-role="list-divider">よ</li>
				<li data-filtertext="横須賀 よこすか">横須賀</li>
				<li data-filtertext="横浜 よこはま">横浜</li>
				<li data-role="list-divider">ち</li>
				<li data-filtertext="千葉 ちば">千葉</li>
				<li data-role="list-divider">さ</li>
				<li data-filtertext="埼玉 さいたま">さいたま</li>
				<li data-role="list-divider">う</li>
				<li data-filtertext="宇都宮 うつのみや">宇都宮</li>
				<li data-role="list-divider">は</li>
				<li data-filtertext="浜松 はままつ">浜松</li>
				<li data-role="list-divider">き</li>
				<li data-filtertext="京都 きょうと">京都</li>
				<li data-role="list-divider">せ</li>
				<li data-filtertext="千駄ヶ谷 せんだがや">千駄ヶ谷</li>
			</ul>
		</article>
		<footer data-role="footer">
			<h1>フッタ</h1>
		</footer>
	</section>
</body>
</html>

https://vesna-memo.com/?feed=rss2&p=1433 0

ナビゲーションバーを表示 https://vesna-memo.com/?p=1431 https://vesna-memo.com/?p=1431#respond vesna Wed, 04 May 2016 21:00:16 +0000 jQueryMobile アイコン表示テーマを設定ナビゲーションバー http://vesna-memo.com/?p=1431 ナビゲーションバーは、ヘッダ、フッタ内の複数のリンクをボタンのようにして表示するウィジェットです、よく利用するコンテンツへのリンクをメニューとして常時表示すれば、操作性の向上になります。ナビゲーショ ...

ナビゲーションバーは、ヘッダ、フッタ内の複数のリンクをボタンのようにして表示するウィジェットです、よく利用するコンテンツへのリンクをメニューとして常時表示すれば、操作性の向上になります。

ナビゲーションバーに設定できる属性一覧
設定対象	名称=”設定値”(太字はデフォルト)	説明
ウィジェット	data-role=”navbar”	ナビゲーションバー
項目	data-icon=”アイコン名称”	リンクに表示するアイコン
項目	data-iconpos=”top\|bottom\|left\|right\|notext”	アイコンの位置
ウィジェット、項目	data-theme=”テーマ名称”	テーマ(ヘッダ、フッタ、リンクに設定できる)

ナビゲーションバーの構造

ナビゲーションバーは画面の幅いっぱいに表示されて、リンク先はその幅を均等に割った範囲内に納まるように表示されます。リンク先を表す文字列が長いときは末尾が”…”と表示されます。
HTML構造は以下の２点です。

１．ウィジェットの全体をdata-role=”navbar”を追加したタグで囲む。
２．その内部に<ul>、<li>、<a>を表示するリンク先の数だけ追加する。

１行に表示できるのは最多で５つまでです。それ以上の数を設置使用すると１行に２つずつ表示されます。

表示中のページを明示する

ナビゲーションバーには、文字通りユーザーにコンテンツを案内する役目があり、その方法としては、リンク先だけではなく表示中のコンテンツを明示することも重要です。表示中のページのリンクを画面上に表すには、それを表すaタグに「class=”ui-btn-active”」を追加します。

このclass属性は、ウィジェットが表示されるページそれぞれに対応させなくてはなりません。下記のサンプルコードのように、page1,page2のそれぞれのページで、ウィジェット内の同じページへのリンクにclass属性を設定する必要があります。この値はリンクをクリック・タップにより削除されて、ほかのリンクと同じ色に変わります。

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

<!DOCTYPE html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>jQueryMobile ナビゲーションバーを設定する</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="page1" data-role="page">
		<header data-role="header">
			<h1>page1</h1>
		</header>
		<article data-role="content">
		</article>
		<footer data-role="footer">
			<nav data-role="navbar">
			<ul>
				<li><a href="#page1">page1</a></li>
				<li><a href="#page2" class="ui-btn-active">page2</a></li>
				<li><a href="#page3">page3</a></li>
				<li><a href="#page4">page4</a></li>
			</ul>
			</nav>
		</footer>
	</section>

	<section id="page2" data-role="page">
		<header data-role="header">
			<h1>page2</h1>
		</header>
		<article data-role="content">
		</article>
		<footer data-role="footer">
			<nav data-role="navbar">
			<ul>
				<li><a href="#page1">page1</a></li>
				<li><a href="#page2">page2</a></li>
				<li><a href="#page3" class="ui-btn-active">page3</a></li>
				<li><a href="#page4">page4</a></li>
			</ul>
			</nav>
		</footer>
	</section>

</body>
</html>

アイコンを表示する

ウィジェット内のリンクにはアイコンを表示することができます。設定時に利用するのは、data-icon,data-iconpos属性です。属性に設定できる値はボタンと同じです。これらは追加するタグが異なるので注意が必要です。

・<a>に追加する。それぞれのリンクに表示するアイコンを設定するのがdata-icon属性
・<nav>(<div>)に追加する。ウィジェット内の全てのリンクにおけるアイコンの表示位置を統一

data-iconpos属性が追加されない時は、アイコンが文字列の上に表示される。

テーマを設定する

ウィジェットのテーマは、それが作成されるヘッダ、フッタに設定する。ウィジェット内のリンクには、また別のテーマを設定できて、デフォルトでは、ウィジェットが配置されている場所(ヘッダ、フッタ、コンテンツ)のテーマと同じ設定となります。

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

<!DOCTYPE html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>jQueryMobile ナビゲーションバーにアイコンを表示させたり、テーマを設定する</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>page1</h1>
		</header>
		<article data-role="content">
		</article>

		<!-- footerでテーマを設定する -->
		<footer data-role="footer" data-theme="b">
			<!-- ウィジェット内リンクのアイコンの位置を統一 -->
			<nav data-role="navbar" data-iconpos="bottom">
			<ul>
				<!-- data-icon属性でアイコンを表示する  -->
				<li><a href="#page1" data-icon="grid" class="ui-btn-active">page1</a></li>
					<!-- リンクでテーマを設定する -->
				<li><a href="#page2" data-icon="info" data-theme="a">page2</a></li>
				<li><a href="#page3" data-icon="gear">page3</a></li>
				<li><a href="#page4" data-icon="check">page4</a></li>
			</ul>
			</nav>
		</footer>
	</section>
</body>
</html>

https://vesna-memo.com/?feed=rss2&p=1431 0