コンポーネントまとめ2

前回、ダイアログ・ラジオボタン・チェックボックスの作成方法をご紹介しましたが、今回はナビゲーションバー、スライダー、セレクトメニュー、トグルスイッチ、グリッドレイアウトについてです。
※詳しい説明などは他サイト・書籍を見てください。

 

ナビゲーションバー



画像1

画像2

画像3

 


					<body>
						<!---画像1---------------------->
						<div id="home" data-role="page">
							<div data-role="header">
								<h1>ヘッダー</h1>
								<div data-role="navbar">
									<ul>
										<li><a href="#">nav1</a></li>
										<li><a href="#">nav2</a></li>
										<li><a href="#">nav3</a></li>
									</ul>
								</div>
							</div>
							<div data-role="content">
								<p>コンテンツ</p>
								<div data-role="navbar">
									<ul>
										<li><a href="#">nav1</a></li>
										<li><a href="#">nav2</a></li>
									</ul>
								</div>
								<p>&nbsp;</p>
							</div>
							<div data-role="footer">
								<div data-role="navbar">
									<ul>
										<li><a href="#">nav1</a></li>
										<li><a href="#">nav2</a></li>
										<li><a href="#">nav3</a></li>
										<li><a href="#">nav4</a></li>
										<li><a href="#">nav5</a></li>
									</ul>
								</div>
								<h1>フッター</h1>
							</div>
						</div>
					</body>
					

ナビゲーションバーは、ヘッダー・フッター・コンテンツ内に配置できます。またナビゲーションバー上のボタンは最大5つです。
画像1ではヘッダーに3つ、コンテンツ内に2つ、フッターに5つ、ナビゲーションバー上にボタンを配置してます。
使い方は「data-role="navbar"属性を追加したdivでul・li・aタグを囲む」だけで、liタグの分(ボタンの数)だけ自動的に幅が等倍になり表示されます。

 


					<body>
						<!---画像2---------------------->
						<div id="home" data-role="page" data-theme="d">
							<div data-role="header" data-theme="b">
								<h1>ヘッダー</h1>
								<div data-role="navbar" data-iconpos="top">
									<ul>
										<li><a href="#" data-icon="info">nav1</a></li>
										<li><a href="#" data-icon="grid">nav2</a></li>
										<li><a href="#" data-icon="search">nav3</a></li>
									</ul>
								</div>
							</div>
							<div data-role="content">
								<p>コンテンツ</p>
								<div data-role="navbar" data-iconpos="left">
									<ul>
										<li><a href="#" data-icon="check">nav1</a></li>
										<li><a href="#" data-icon="star">nav2</a></li>
									</ul>
								</div>
								<p>&nbsp;</p>
							</div>
							<div data-role="footer" data-theme="b">
								<div data-role="navbar">
									<ul>
										<li><a href="#" data-icon="info"></a></li>
										<li><a href="#" data-icon="info"></a></li>
										<li><a href="#" data-icon="info"></a></li>
										<li><a href="#" data-icon="info"></a></li>
										<li><a href="#" data-icon="info"></a></li>
									</ul>
								</div>
								<h1>フッター</h1>
							</div>
						</div>
					</body>
					

data-iconposで位置を決め、data-icon属性を追加してアイコンをつけることも可能です。
また画像2ではdata-theme(テーマ)属性を追加してヘッダー・フッターを青色、コンテンツ内を白色に変えています。

 


					<body>
						<!---画像3---------------------->
						<div id="home" data-role="page">
							<div data-role="header">
								<h1>ヘッダー</h1>
								<div data-role="navbar">
									<ul>
										<li><a href="#" class="ui-btn-active">nav1</a></li>
										<li><a href="#">nav2</a></li>
										<li><a href="#">nav3</a></li>
									</ul>
								</div>
							</div>
							<div data-role="content">
								<p>コンテンツ</p>
								<div data-role="navbar">
									<ul>
										<li><a href="#">nav1</a></li>
										<li><a href="#" class="ui-btn-active">nav2</a></li>
									</ul>
								</div>
								<p>&nbsp;</p>
							</div>
							<div data-role="footer">
								<div data-role="navbar">
									<ul>
										<li><a href="#">nav1</a></li>
										<li><a href="#">nav2</a></li>
										<li><a href="#">nav3</a></li>
										<li><a href="#" class="ui-btn-active">nav4</a></li>
										<li><a href="#">nav5</a></li>
									</ul>
								</div>
								<h1>フッター</h1>
							</div>
						</div>
					</body>
					

最初から選択された状態にしておくにはaタグにjQueryMobile用スタイルシートのクラス"ui-btn-active"を追加します。
画像3ではヘッダーのnav1、コンテンツのnav2、フッターのnav4に"ui-btn-active"を追加しています。

 

 

【2013/5/13 追記】-----------------------

ナビゲーションバーの右端が飛び出てしまって全体的に右側に余白が出来て若干崩れることがあるかもなので、 下記の様にCSS上書きして修正してください。


					.ui-navbar ul {
						overflow: hidden;
					}
					

 

 

スライダー

スライダーを左右にドラッグして各項目の値を決めます(画像5)。
確認ボタンを押すと、各項目の値がダイアログで表示される(画像6)、というような内容です。



画像4

画像5

画像6

 

【HTMLソースコード】

						<!DOCTYPE html>
						<html>
							<head>
								<meta charset="utf-8">
								<title>sample</title>
								<meta name="viewport" content="width=device-width, initial-scale=1">
								<link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.css" />
								<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.1.min.js"></script>
								<script type="text/javascript" src="test3.js"></script>
								<script type="text/javascript" src="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.js"></script>
							</head>
							<body>
								<!---画像4-------------------->
								<div id="home" data-role="page">
									<div data-role="header">
										<h1>テスト</h1>
									</div>
									<div data-role="content">
										<p>あなたのステータスを教えてください</p>
										<div data-role="fieldcontain">
											<label for="slider1">レベル</label>
											<input type="range" name="slider" id="slider1" value="0" min="0" max="100" data-highlight="true"/>
											<label for="slider2">力(STR)</label>
											<input type="range" name="slider" id="slider2" value="0" min="0" max="100" />
											<label for="slider3">素早さ(AGI)</label>
											<input type="range" name="slider" id="slider3" value="0" min="0" max="100" />
											<label for="slider4">体力(VIT)</label>
											<input type="range" name="slider" id="slider4" value="0" min="0" max="100" />
										</div>
										<input type="button" value="確認" onclick="kakunin();" />
									</div>
								</div>

								<!---画像6:ダイアログ----------------->
								<div id="dialog1" data-role="dialog">
									<div data-role="header">
										<h1>確認</h1>
									</div>
									<div data-role="content">
										<p id="d_content"></p>
									</div>
								</div>
							</body>
						</html>
					

 

【test3.jsファイルに記述するコード】

						//確認ボタンを押した時の処理内容
						function kakunin(){
							var slider1 = $('#slider1').val();
							var slider2 = $('#slider2').val();
							var slider3 = $('#slider3').val();
							var slider4 = $('#slider4').val();

							$('#d_content').text('あなたのステータスは「レベル:' +slider1+ '、力:'+slider2+ '、素早さ:' +slider3+ '、体力:' +slider4+ '」ですね。');
							$.mobile.changePage("#dialog1",{transition:"pop"});
						}
					

※作成したjavascript外部ファイル(test3.js)は、htmlソースコード9行目のようにhead内の「jQuery」と「jQueryMobile」の間に置くようにしてください。

 

input要素に「type="range"」を追加するだけでスライダーを作成することができます。
タグ内のvalueは「現在の値」、minは「最小値」、maxは「最大値」となるので好きな値を設定してください。
また「data-highlight="true"」を追加するとスライダーの値部がハイライトされて見やすくなります。
上記HTMLコードではレベル項目のタグ内にのみ「data-highlight="true"」を追加してみました。

今回はスライダーを4つ作りそれをfieldcontainでまとめています。
各スライダーを左右にドラッグして値を決めたあとボタンを押すと、ダイアログが表示され各項目の値が確認できます。
あらかじめtest3.jsファイルをつくり、確認ボタンを押した時の処理内容を記述し、HTMLのhead内に読み込ませておいてください。
ボタンを押した時の処理内容については、下記のダイアログに関する記事をご参照ください。

 

 

セレクトメニュー



画像7

画像8

画像9

 

【HTMLソースコード】

					<body>
					<!---画像7---------------------->
					<div id="home" data-role="page">
						<div data-role="header">
							<h1>テスト</h1>
						</div>
						<div data-role="content">
							<div data-role="fieldcontain">
								<label for="select1">セレクトメニュー:</label>
								<select id="select1" data-native-menu="false" multiple>
									<option value="menu1">menu1</option>
									<option value="menu2">menu2</option>
									<option value="menu3">menu3</option>
									<option value="menu4">menu4</option>
								</select>
							</div>
						</div>
					</div>
					</body>
					

上記コードの様にselect、optionタグを使用すると画像のようなセレクトメニューを作成できます。

selectタグ内にdata-native-menu="false"を追加することでjQueryMobile独自のセクトメニューになり(画像7)、
falseをtrueまたはdata-native-menu属性を記述しない場合は普通のプルダウンメニューになります(画像8)。
またmultipleを追加することで複数選択可能になります。

複数選択したあとは画像9のように選択項目名と選択項目数が表示される形になります。


 

 

セレクトメニュー例1(選択したものをダイアログで表示)

セレクトメニューの中からセックスピストルズのメンバーを選択。ボタンを押して選択した項目をダイアログで表示し確認する、という内容です。



画像10

画像11

画像12

 

【HTMLソースコード】

						<!DOCTYPE html>
						<html>
							<head>
								<meta charset="utf-8">
								<title>sample</title>
								<meta name="viewport" content="width=device-width, initial-scale=1">
								<link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.css" />
								<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.1.min.js"></script>
								<script type="text/javascript" src="test3.js"></script>
								<script type="text/javascript" src="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.js"></script>
							</head>
							<body>

								<div id="home" data-role="page">
									<div data-role="header">
										<h1>テスト</h1>
									</div>
									<div data-role="content">
										<div data-role="fieldcontain">
											<label for="select1">sex pistolsのメンバーは?</label>
											<select id="select1" name="select1" data-native-menu="false" multiple>
												<option value="ジョニー・ロットン">ジョニー・ロットン</option>
												<option value="シド・ビシャス">シド・ビシャス</option>
												<option value="グレン・マトロック">グレン・マトロック</option>
												<option value="ジョー・ストラマー">ジョー・ストラマー</option>
											</select>
										</div>
										<input type="button" value="確認" onclick="kakunin();">
									</div>
								</div>

								<!---ダイアログ---------------------->
								<div id="dialog1" data-role="dialog">
									<div data-role="header">
										<h1>確認</h1>
									</div>
									<div data-role="content">
										<p id="d_content"></p>
									</div>
								</div>
							</body>
						</html>
					

 

【test3.jsファイルに記述するコード】

					//ボタンを押した時の処理
					function kakunin(){
						var select = $('#select1 option:selected').map( function() {
					            	return $(this).val(); } ).get().join(",");

						$('#d_content').text('あなたがセレクトしたセックスピストルズのメンバーは「' +select+ '」ですね' );
						$.mobile.changePage("#dialog1",{transition:"pop"});
					}
					

 

htmlソースコードのセレクトメニュー、ダイアログ、ボタンの作成方法については今までと同じです。
ボタンを押した時の処理ですが、まずtest3.jsファイルを作成しておきhtmlのhead内に読み込ませておいてください。
multipleを追加したセレクトメニューの場合、前回作成したチェックボックスと同じで、複数選択されている可能性があるので 下記のようにmap()を使って記述します。

var select = $( '#select1 option:selected').map( function() {return $(this).val();} ).get().join(",")

これは「$('セレクトメニューのid 選択されてる項目').map( function(){ 繰り返し処理 } ).値をカンマ区切り」のような感じで、 選択されている項目の値をmap().getですべて取り出しつつ配列に変換し、join()で区切って結合し、変数selectに格納しています。ダイアログの表示方法部分は今までと同じです。

あと全然関係ないですが、セックスピストルズが好きで、ジョンライドンが大好きです。

 

 

トグルスイッチ



画像13

画像14

 

【HTMLソースコード】

						<!DOCTYPE html>
						<html>
							<head>
								<meta charset="utf-8">
								<title>sample</title>
								<meta name="viewport" content="width=device-width, initial-scale=1">
								<link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.css" />
								<link rel="stylesheet" href="test3.css" />
								<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.1.min.js"></script>
								<script type="text/javascript" src="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.js"></script>
							</head>
							<body>
								<div id="home" data-role="page">
									<div data-role="header">
										<h1>テスト</h1>
									</div>
									<div data-role="content">
										<div data-role="fieldcontain">
											<label for="toggle1">トグルスイッチ1:</label>
											<select id="toggle1" name="toggle1" data-role="slider">
												<option value="はい">はい</option>
												<option value="いいえ">いいえ</option>
											</select>
										</div>

										<div data-role="fieldcontain" class="toggle">
											<label for="toggle2">トグルスイッチ2:</label>
											<select id="toggle2" name="toggle2" data-role="slider">
												<option value="はい">はい</option>
												<option value="いいえ">いいえ</option>
											</select>
										</div>

									</div>
								</div>
							</body>
						</html>
					

 

【test3.cssファイルに記述するコード】

						/*---幅250pxに変更する場合---*/
						.toggle .ui-slider-switch {
							width:250px;
						}
					

 

トグルスイッチは、2つのoptionタグをdata-role="slider"属性を追加したselectタグで囲むことで作成できます。
(画像上:トグルスイッチ1)

【トグルスイッチの横幅を変更する場合(画像下:トグルスイッチ2)】
横幅を変更したいトグルスイッチを適当なクラス(HTMLコード26行目:class="toggle")を指定したdivで囲む。 またjQueryMobile用CSS内でトグルスイッチ部分はui-slider-switchというクラス名で定義されているので、このクラスと先ほど指定したものを使って上記コードの様にtest3.cssに記述し、 head内にtest3.cssを読み込ませておいてください。

 

 

[2015/4/27 追記]


画像13-1

画像14-1

2015/4/27現在の最新版(jQuery 2.1.0、jQueryMobile 1.4.5)で上のコードを試したところ、
画像13-1のように横幅が変更されませんでした。
「test3.css」を下記のようにすると画像14-1のように横幅が変更されました。


						/*---幅300pxに変更する場合---*/
						.ui-field-contain.toggle div.ui-slider-switch {
						    width:300px;
						}
					

※「.ui-field-contain div.ui-slider-switch」のデフォルトの横幅は「width: 5.8em;」です。

 

 

グリッドレイアウト

30分でスマホサイト作成」ページの最初に、
「スマホは画面の幅が狭いので基本的に1カラムの縦長な感じにしましょう」と書きましたが、 ページ内容によっては3、4カラムにしたい場合もあると思います… そんな時はグリッドレイアウトを使いましょう。
グリッドレイアウトを使うと要素を均等に分割して並べることができます。



画像15

画像16

画像17

 

【HTMLコード】

						<!DOCTYPE html>
						<html>
							<head>
								<meta charset="utf-8">
								<title>sample</title>
								<meta name="viewport" content="width=device-width, initial-scale=1">
								<link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.css" />
								<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.1.min.js"></script>
								<script type="text/javascript" src="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.js"></script>
							</head>
							<body>
								<!---画像15-------------------->
								<div id="home" data-role="page">
									<div data-role="header">
										<h1>gridlayout</h1>
									</div>
									<div data-role="content">
										<div class="ui-grid-b">
											<div class="ui-block-a">aaaa</div>
											<div class="ui-block-b">bbbb</div>
											<div class="ui-block-c">cccc</div>
										</div>
									</div>
								</div>
							</body>
						</html>
					

 

上記HTMLコードは3カラムの場合です(画像15)。
記述方法は「class="ui-grid-b"が追加されたdivで囲まれた中に、class="ui-block-a",class="ui-block-b",class="ui-block-c"の順に記述」していくかたちです。
ただ、これだとちょっと均等加減が伝わりにくいので、head内にCDNで読み込ませているjQueryMobile用CSSのクラス「ui-bar」を追加してみます。

 


							<body>
								<!---画像16-------------------->
								<div id="home" data-role="page">
									<div data-role="header">
										<h1>gridlayout</h1>
									</div>
									<div data-role="content">
										<div class="ui-grid-b">
											<div class="ui-block-a"><div class="ui-bar ui-bar-b">aaaa</div></div>
											<div class="ui-block-b"><div class="ui-bar ui-bar-b">bbbb</div></div>
											<div class="ui-block-c"><div class="ui-bar ui-bar-b">cccc</div></div>
										</div>
									</div>
								</div>
							</body>
					

 

上記コードは画像16のようになります。
均等加減を伝えやすくするために今回はクラス「ui-bar」を追加して表示してるだけなので必ずコレを追加する必要はないです。

クラス「ui-bar」はデフォルトのバーの設定に使われているものです。
また「30分でスマホサイト作成」ページでもご紹介した「テーマ」と同じで(data-theme使いませんが)、
クラス「ui-bar-b」は、用意されているテーマのbをツールバーに適用したものになります。
この2つのクラスを同時にclass="ui-bar ui-bar-b"と記述して設定してます。

【グリッドレイアウト 2~5カラムの場合の記述方法】

  • 2カラムの場合
    ui-block-a,bの順に記述し、ui-grid-aのdivで囲む
  • 3カラムの場合
    ui-block-a,b,cの順に記述し、ui-grid-bのdivで囲む
  • 4カラムの場合
    ui-block-a,b,c,dの順に記述し、ui-grid-cのdivで囲む
  • 5カラムの場合
    ui-block-a,b,c,d,eの順に記述し、ui-grid-dのdivで囲む

 

【複数行の場合】

例えば、「4カラムで3行」にする場合は…


							<body>
								<!---画像17-------------------->
								<div id="home" data-role="page">
									<div data-role="header">
										<h1>gridlayout</h1>
									</div>
									<div data-role="content">
										<div class="ui-grid-c">
											<div class="ui-block-a"><div class="ui-bar ui-bar-b">aaaa</div></div>
											<div class="ui-block-b"><div class="ui-bar ui-bar-b">bbbb</div></div>
											<div class="ui-block-c"><div class="ui-bar ui-bar-b">cccc</div></div>
											<div class="ui-block-d"><div class="ui-bar ui-bar-b">dddd</div></div>
											<div class="ui-block-a"><div class="ui-bar ui-bar-b">aaaa</div></div>
											<div class="ui-block-b"><div class="ui-bar ui-bar-b">bbbb</div></div>
											<div class="ui-block-c"><div class="ui-bar ui-bar-b">cccc</div></div>
											<div class="ui-block-d"><div class="ui-bar ui-bar-b">dddd</div></div>
											<div class="ui-block-a"><div class="ui-bar ui-bar-b">aaaa</div></div>
											<div class="ui-block-b"><div class="ui-bar ui-bar-b">bbbb</div></div>
											<div class="ui-block-c"><div class="ui-bar ui-bar-b">cccc</div></div>
											<div class="ui-block-d"><div class="ui-bar ui-bar-b">dddd</div></div>
										</div>
									</div>
								</div>
							</body>
					

 

という感じです(画像17)。
ui-block-a,b,c,d,a,b,c,d,a,b,c,d,a,b,c,dの順に記述し、ui-grid-cのdivで囲みます。
一列目が必ずui-block-aから始まり、4列目がui-block-dで終わり、またui-block-aから始まり…という感じです。


 

 

以上でナビゲーションバー、スライダー、セレクトメニュー、トグルスイッチ、グリッドレイアウトの作成方法は終了です。
次回はタップ・スワイプした時などのイベント処理についてご紹介します。