コンポーネントまとめ1

前回、ボタンの作成方法をご紹介しましたが、今回はダイアログ、ラジオボタン、チェックボックスについてです。
※詳しい説明などは他サイト・書籍を見てください。

 

ダイアログ(例1:ボタンを押すとダイアログが表示される)

ダイアログはメッセージなどが表示される一時的なウィンドウですが、ウィンドウというか「ダイアログというページをつくり、そのダイアログページに切り替える」の感覚で作成していきます。



画像1

画像2


					<body>
						<!---画像1---------------------->
						<div id="home" data-role="page">
							<div data-role="header">
								<h1>sample</h1>
							</div>                   
							<div data-role="content">
								<p>このサイトは主に「かっこいい(パンクな)スマホサイトを勝手に集めてまとめたサイト」です。<br>
								スマホサイトデザインの参考としてご活用くださいませ。</p>
								<a href="#dialog1" data-role="button" data-rel="dialog" data-transition="pop">ボタン</a>
							</div>
						</div>


						<!---画像2:ダイアログ------------->
						<div id="dialog1" data-role="dialog">
							<div data-role="header">
								<h1>テスト</h1>
							</div>
							<div data-role="content">
								<p>こんにちは。</p>
							</div>
						</div>
					</body>
					

【コード14行目】
で、まずダイアログ用のページを用意します。
通常、ページは「data-role="page"」ですがコレを「data-role="dialog"」に変更するだけでダイアログ用ページになります。
また、ダイアログページidもテキトーな名前で追加してください。

【コード9行目】
ダイアログ用のページを用意した後、ボタンに 「href="#ダイアログページid"」「data-rel="dialog"」を追加で終了です。
ボタンを押すと背景が暗くなりページ上にダイアログが表示されます(画像2)。
またページ切替効果をpop(ポップアップ)にして、中央から表示されてくる感じにしました。




ダイアログ(例2:ダイアログの中にいろいろ入れる)



画像3

画像4

画像5


					<body>
						<!---画像3---------------------->
						<div id="home" data-role="page">
							<div data-role="header">
								<a href="#dialog1" data-role="button" data-rel="dialog" data-transition="flip">menu</a>
								<h1>sample</h1>
							</div>
							<div data-role="content">
								<p>このサイトは主に「かっこいい(パンクな)スマホサイトを勝手に集めてまとめたサイト」です。<br>
								スマホサイトデザインの参考としてご活用くださいませ。</p>
								<a href="#dialog2" data-role="button" data-rel="dialog" data-transition="pop">ボタン</a>
							</div>
						</div>


						<!---画像4:ダイアログ1(リストビュー)------->
						<div id="dialog1" data-role="dialog">
							<div data-role="header">
								<h1>メニュー</h1>
							</div>
							<div data-role="content">
								<ul data-role="listview">
									<li><a href="#">テスト1</a></li>        	
									<li><a href="#">テスト2</a></li> 
									<li><a href="#">テスト3</a></li> 
									<li><a href="#">テスト4</a></li>       	
									<li><a href="#">テスト5</a></li> 
									<li><a href="#">テスト6</a></li> 
								</ul>
							</div>
						</div>


						<!----画像5:ダイアログ2(ボタン)----->
						<div id="dialog2" data-role="dialog">
							<div data-role="header">
								<h1>ボタン</h1>
							</div>
							<div data-role="content">
								<p>ボタンです</p>
								<a href="#" data-role="button">テスト1</a>
								<a href="#" data-role="button">テスト2</a>
							</div>
						</div>
					</body>
					

ダイアログの中にリストビューやボタンなど入れることもできます。
ダイアログの中にリストビューを入れるとメニューのような感じになるので使えるかもです。

今回は画像3のようにヘッダーのボタンを押すとリストビューが設置されたダイアログ1、
コンテンツ内のボタンを押すとボタンが2つ設置されたダイアログ2を表示するようにしてみました。
またページ切替効果はそれぞれflip(回転)とpop(ポップアップ)にして切替わる感じです。
自分好みにいろいろ試してみてください。





ダイアログ(例3:テキストフィールドに入力した文字をダイアログで表示)



画像6

画像7

【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="test1.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>

								<!---画像6:テキストフィールド---------->
								<div id="home" data-role="page">
									<div data-role="header">
										<h1>sample</h1>
									</div>                   
									<div data-role="content">
										<div data-role="fieldcontain">
											<label for="test0">一言どうぞ:</label>
											<input type="text" name="test0" id="test0" />
										</div>
										<input type="button" value="クリック" onclick="btn1();" />
									</div>
								</div>


								<!---画像7:ダイアログ-------------->
								<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>
						

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

						//ボタンを押した時の処理内容
						function btn1(){
							var test1 = $('#test0').val();
							$('#d_content').text('さっき、' + test1 + 'って入力しましたね');
							$.mobile.changePage("#dialog1", {transition: "pop"});
						}
					

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


【HTMLソースコード20行目】
まず、テキストフィールド・ボタン部分をつくっていきます。
labelのfor属性にフォーム部品(テキストフィールド)のidを指定して関連付け、これを data-role="fieldcontain"で囲みます。
fieldcontainを使うとレイアウトが崩れず、下に細い線が入るので各部品などをまとめつつ整理したような感じになります。 あとその下にフォーム部品のボタンを置いてonclick属性をいれておきます(このボタンを押した時にダイアログが出るかたちにします)。

【HTMLソースコード35行目】
ダイアログ部分のコードは今までととくに変わりないのですが、コンテンツ内のpタグにid="d_content"が何気に追加されています (これは、テキストフィールドに入力した文字を表示する場所、という意味で追加しています)。

最後に、テキストフィールド下のボタンを押した時の処理内容を記述します。
(記述場所はtest1.jsファイルを作成しておき、その中に記述。test1.jsファイルはhead内で読み込ませて下さい。)

  • 「var test1 = $('#test0').val();」部分
    jQueryの基本は$()関数です。
    $()の引数に対象のIDをすることで、その対象を操作するためのオブジェクトを作成できます。 この部分では、テキストフィールドのidを指定し、val()で入力内容を取り出し変数のtest1に格納しています。

  • 「$('#d_content').text('さっき、' + test1 + 'って入力しましたね');」部分
    id="d_content"を$()に指定し、text()でダイアログのコンテンツのpタグで囲まれた部分を 「さっき、〇〇〇って入力しましたね」というテキストに変更して表示するようにしています。
    〇〇〇にはtest1に格納したテキストフィールドの入力内容が入ります。

  • 「$.mobile.changePage("#dialog1", {transition: "pop"});」部分
    先ほどの処理でダイアログのコンテンツ内の表示テキストを変更しました。あとはそのダイアログを表示するだけです。
    $.mobileオブジェクトの中にはjQueryMobileのいろんな機能があり、その中のchangePageメソッドで表示切替を行います。
    changePageの引数には( 新たに表示するページのID , 切替に関するオプション )を設定します。
    ここで、表示ページはダイアログなので"#dialog1"、オプションには切替効果のtransitionを設定します。切替効果はpopにしました。




ラジオボタン



画像8

画像9


					<body>
						<!---画像8---------------------->
						<div id="home" data-role="page">
							<div data-role="header">
								<h1>テスト</h1>
							</div>
							<div data-role="content">
								<div data-role="fieldcontain">
									<input type="radio" name="color" id="red" value="あか" checked />
									<label for="red">あか</label>
									<input type="radio" name="color" id="yellow" value="きいろ" />
									<label for="yellow">きいろ</label>
									<input type="radio" name="color" id="green" value="みどり">
									<label for="green">みどり</label>
								</div>
							</div>
						</div>
					</body>
					

					<body>
						<!---画像9---------------------->
						<div id="home" data-role="page">
							<div data-role="header">
								<h1>テスト</h1>
							</div>
							<div data-role="content">
								<div data-role="fieldcontain">
									<fieldset data-role="controlgroup">
										<input type="radio" name="color" id="red" value="あか" checked />
										<label for="red">あか</label>
										<input type="radio" name="color" id="yellow" value="きいろ" />
										<label for="yellow">きいろ</label>
										<input type="radio" name="color" id="green" value="みどり">
										<label for="green">みどり</label>
									</fieldest>
								</div>
							</div>
						</div>
					</body>
					

HTMLのフォーム部品「ラジオボタン」を使います。また、labelタグとセットで使用するようにしてください。
セットで使用する事でinput要素の上に重ねられたlabel要素となり、画像8のように表示されます。
各ラジオボタンのname属性を同じものにしてグループ化し、どれかひとつにchecked属性(選択されている状態)を入れておき、
最後にfieldcontainを指定したdivでまとめます。

画像9のように各ラジオボタンを隙間なくまとめるには data-role="controlgroup"を指定したfieldsetで囲みます。




チェックボックス



画像10

画像11

画像12


					<body>
						<!---画像10---------------------->
						<div id="home" data-role="page">
							<div data-role="header">
								<h1>テスト</h1>
							</div>
							<div data-role="content">
								<div data-role="fieldcontain">
									<input type="checkbox" name="color" id="red" />
									<label for="red">あか</label>
									<input type="checkbox" name="color" id="yellow" />
									<label for="yellow">きいろ</label>
									<input type="checkbox" name="color" id="green" />
									<label for="green">みどり</label>
								</div>
							</div>
						</div>
					</body>
					

					<body>
						<!---画像11---------------------->
						<div id="home" data-role="page">
							<div data-role="header">
								<h1>テスト</h1>
							</div>
							<div data-role="content">
								<div data-role="fieldcontain">
									<fieldset data-role="controlgroup">
										<input type="checkbox" name="color" id="red" />
										<label for="red">あか</label>
										<input type="checkbox" name="color" id="yellow" />
										<label for="yellow">きいろ</label>
										<input type="checkbox" name="color" id="green" />
										<label for="green">みどり</label>
									</fieldset>
								</div>
							</div>
						</div>
					</body>
					

ラジオボタン同様にHTMLのフォーム部品「チェックボックス」を使います。また、labelタグとセットで使用するようにしてください。
各チェックボックスのname属性を同じものにしてグループ化し、最後にfieldcontainを指定したdivでまとめます(画像10)。

画像11のように各チェックボックスを隙間なくまとめるには data-role="controlgroup"を指定したfieldsetで囲みます。
画像12はチェックした状態となります。





このページのまとめ(ダイアログ×ラジオボタン×チェックボックス)


ダイアログ、ラジオボタン、チェックボックスを使ったまとめです。ラジオボタン部分で「探しているアイテム」を選び、チェックボックス部分で「そのアイテムのカラー」を選択します(画像14)。確認ボタンを押すとダイアログで「選択したものを確認するメッセージ」が表示される(画像15)、という内容です。



画像13

画像14

画像15

【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="test2.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>

								<!---画像13、14-------------->
								<div data-role="page">
									<div data-role="header">
										<h1>テスト</h1>
									</div>
									<div data-role="content">
										<div data-role="fieldcontain">
											<fieldset data-role="controlgroup">
												<legend>探してるアイテムは?</legend>	
												<input type="radio" name="item" id="pcoat" value="ピーコート" checked />
												<label for="pcoat">ピーコート</label>
												<input type="radio" name="item" id="riders" value="ライダースジャケット" />
												<label for="riders">ライダースジャケット</label>
												<input type="radio" name="item" id="military" value="ミリタリージャケット" />
												<label for="military">ミリタリージャケット</label>
											</fieldset>
										</div>
										<div data-role="fieldcontain">
											<fieldset data-role="controlgroup">
												<legend>探してるアイテムカラーは?</legend>
												<input type="checkbox" name="color" id="black" value="ブラック" />
												<label for="black">ブラック</label>
												<input type="checkbox" name="color" id="white" value="ホワイト" />
												<label for="white">ホワイト</label>
												<input type="checkbox" name="color" id="red" value="レッド" />
												<label for="red">レッド</label>
											</fieldset>
										</div>
										<input type="button" value="確認" onclick="kakunin();" />

									</div>
								</div>

								<!---画像15:ダイアログ部分--------------------->
								<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>
						

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

						//ボタンを押した時の処理内容
						function kakunin(){
							var item = $('[name=item]:checked').val();
							var color = $( '[name=color]:checked').map( function() {
									return $(this).val();
								     }).get().join("と");

							$('#d_content').text('お探しのアイテムは、' + color + 'の' + item + 'ですね。');
							$.mobile.changePage("#dialog1", {transition: "pop"});
						}
					

【HTMLソースコード】
今までと同じようなコードでとくに変わったところはないですが、labelはラジオボタン・チェックボックスのテキストで使用しているので、 各グループ全体の説明には「legend」を使用しています。

【test2.jsファイルに記述するコード】
まず、test2.jsファイルを作り、HTMLのhead内で読み込ませておいてください。 コードの後半は「ダイアログ(例3:テキストフィールドに入力した文字をダイアログで表示)」と同じです。

  • 「var item = $('[name=item]:checked').val();」部分
    →チェックが入っているラジオボタンの値を取り出し変数itemに格納しています。

  • 「var color = $( '[name=color]:checked').map( function() {return $(this).val();} ).get().join("と");」部分
    →チェックボックスの場合は複数チェックが入っている可能性があるため、map().get()でチェックがあるものの値をすべて取り出し配列に変換します。またjoin()で区切って結合したものを変数colorに格納しています。


以上でダイアログ、ラジオボタン、チェックボックスの作成方法は終了です。
次回は他のコンポーネントの作成方法についてご紹介します。