jQueryMobile追加機能まとめ page 1 | 2 |

このページではjQueryMobile1.2.0以降で新たに追加された機能などを紹介していきます。
head内には新しいバージョンのjQuery、jQueryMobileを読み込ませておいてください。

※2014/3/13現在、最新バージョンはjQueryMobile1.4.2となります。
※下のグレー矢印の内容は次のページに掲載してます。

 

ポップアップ表示(jQueryMobile1.2)



画像1

画像2

画像3

 

【HTMLコード】

						<div id="home" data-role="page">
							<div data-role="header">
								<h1>popup</h1>
							</div>
							<div data-role="content">
								<!----ポップアップ表示させる設定------->
								<a href="#popup1" data-rel="popup">ポップアップ表示</a> 
								<p>&nbsp;</p>
								<a href="#popup2" data-rel="popup"><img src="images/small/sumaho01_s.png"></a>

								<!-----ポップアップ表示する内容--------------->
								<div data-role="popup" id="popup1">
									<p>こんにちは</p>
								</div>
								<div data-role="popup" id="popup2">
									<img src="images/popup/sumaho01.png">
								</div>
							</div>
						</div>
					

 

ポップアップ表示させる方法はカンタンです。

  • (1)まず、ポップアップ表示させる設定を記述します。
      aタグに「data-rel="popup"」「href="#ポップアップ表示する内容のid"」を追加して、テキスト・画像を囲みます。

  • (2)次に、同一ページ内にポップアップ表示する内容を記述します。
      divに「data-role="popup"」「id="(1)で指定したid名"」を追加して、ポップアップ表示するテキスト・画像などを囲んで終了。

閉じるときは、ポップアップウィンドウ以外のところをタップしてください。
またこのポップアップのその他いろいろな使い方やオプションを下記にご紹介します。
とりあえず参考にどうぞ。

 

 

 


画像4

画像5

画像6

 

 

画像4:テーマ・表示位置の変更、シャドウ無し
【HTMLコード】

						<!----ポップアップ表示させる設定------->
						<a href="#popup1" data-rel="popup" data-position-to="#sita">ポップアップ表示</a> 

						<!-----ポップアップ表示する内容--------------->
						<div data-role="popup" id="popup1" data-theme="e" data-shadow="false">
							<p>こんにちは</p>
						</div>
						<p>&nbsp;</p>
						<p>&nbsp;</p>
						<p>&nbsp;</p>
						<p>&nbsp;</p>
						<p>&nbsp;</p>
						<p>&nbsp;</p>
						<p>&nbsp;</p>
						<p id="sita">&nbsp;</p>
						<p>&nbsp;</p>
						<p>&nbsp;</p>
						<p>&nbsp;</p>
					

 

aタグに「data-position-to="window"」を追加すると中央に表示できます。
また上記htmlのように「data-position-to="#表示させたいところのid"」を指定して、
表示させたい位置にある要素に「id="さっき指定したid"」を追加すると、
その要素の中央でポップアップ表示されます。

テーマ変更の際は「data-theme="テーマ"」を、
ポップアップのシャドウ(影)を無くす場合は「data-shadow="false"」を追加します。

 

 

画像5:階層化リスト表示
【HTMLコード】

						<!----ポップアップ表示させる設定------->
						<a href="#popup1" data-rel="popup">階層化リスト表示</a>
						<!-----ポップアップ表示する内容--------------->
						<div data-role="popup" id="popup1">
							<div data-role="collapsible-set" data-collapsed-icon="arrow-r" data-expanded-icon="arrow-d" style="margin:0px;width:250px;">
								<div data-role="collapsible" data-theme="b">
									<h2>menu1</h2>
									<ul data-role="listview">
										<li><a href="#">menu1_1</a></li>
										<li><a href="#">menu1_2</a></li>
										<li><a href="#">menu1_3</a></li>
									</ul>
								</div>
								<div data-role="collapsible" data-theme="b">
									<h2>menu2</h2>
									<ul data-role="listview">
										<li><a href="#">menu2_1</a></li>
										<li><a href="#">menu2_2</a></li>
										<li><a href="#">menu2_3</a></li>
									</ul>
								</div>
								<div data-role="collapsible" data-theme="b">
									<h2>menu2</h2>
									<ul data-role="listview">
										<li><a href="#">menu2_1</a></li>
										<li><a href="#">menu2_2</a></li>
										<li><a href="#">menu2_3</a></li>
									</ul>
								</div>
							</div>
						</div>
					

 

折り畳みグループボタンとリストビューを組み合わせて作成した階層化リストを、ポップアップ表示したような感じです。

「data-role="collapsible-set"」を指定したdivに「data-collapsed-icon="arrow-r"」を追加してアイコンを右向矢印に変更。
メニューをタップし開いた状態になった時のアイコンを「data-expanded-icon="arrow-d"」で下向矢印に変更してます。

また「collapsible-set」のデフォルト設定で余白が「margin:0.5em 0px;」になっており
このままだと変な感じになるのでstyle属性で直接cssを「margin:0px;」と上書き。
幅も文字数分くらいしかないので「width:250px;」にして大きくタップしやすいサイズに上書きしてます。

 

 

画像6:閉じるボタン、オーバーレイ、角丸なし
【HTMLコード】

						<div data-role="content">
							<!----ポップアップ表示させる設定------->
							<a href="#popup2" data-rel="popup" data-position-to="window"><img src="images/small/sumaho01_s.png"></a>

							<!-----ポップアップ表示する内容--------------->
							<div data-role="popup" id="popup2" data-overlay-theme="a" data-corners="false">
								<a href="#" data-rel="back" data-role="button" data-icon="delete" data-iconpos="notext" data-theme="a" class="ui-btn-right"></a>
								<img src="images/popup/sumaho01.png">
							</div>
						</div>
					

 

写真などをポップアップ表示させるときに良いかも的な設定になります。

まず、aタグに「data-position-to="window"」を追加して中央に表示させます。
次に「data-role="popup"のdivタグ」に「data-overlay-theme="a"」のオーバーレイを追加して
ポップアップウィンドウ以外の部分が薄暗い感じ(ダイアログみたいな)にしつつ、
さらに「data-corners="false"」を追加してポップアップウィンドウの丸角をなくします(デフォルトは丸角)。

※「data-overlay-theme="a"」には「"a"以外のテーマでも大丈夫です。ちなみに"e"にすると薄黄色になります。

最後に、「閉じるボタン」を付けます。
ポップアップ表示する画像の前に「data-rel="back"」「data-role="button"」「data-icon="delete"」
「data-iconpos="notext"」「data-theme="テーマ"」「class="ui-btn-right"」を追加したaタグを置いて終了です。
ヘッダーに戻るボタン設置する時と同じ内容です。
また「class="ui-btn-right"」はjQueryMobile用CSSで定義されているクラスで、
これを使うとボタンが右側の良い感じのところに設置されます。

※画像をaタグで囲まないでください。

 


 

 

 

サイドパネル表示(jQueryMobile1.3)



画像7

画像8

画像9

 

【HTMLコード】

						<div id="#home" data-role="page">
							<!--------------パネルの内容-------------------->
							<!---左パネル:画像8---->
							<div data-role="panel" id="leftpanel" data-position="left" data-display="overlay">
								<h3>left panel</h3>
								<p>左パネルです。</p>
							</div>
							<!---右パネル:画像9---->
							<div data-role="panel" id="rightpanel" data-position="right" data-display="overlay">
				        			<h3>right panel</h3>
								<p>右パネルです。</p>
							</div>

							<div data-role="header">
								<h1>side panel</h1>
							</div>
							<div data-role="content">
								<!-------------パネル表示させる設定------------->
								<a href="#leftpanel" data-role="button" data-inline="true">left panel</a>
								<a href="#rightpanel" data-role="button" data-inline="true">right panel</a>

								<p>&nbsp;</p>
								<p>表示方法は「overlay」です。<br>
								コンテンツの上にパネルが重なる感じで表示されます。</p>
							</div>
						</div>
					

 

サイドパネルを表示させる方法はカンタンですが、
パネルを表示させる設定とパネルの内容を記述する場所に注意してください。

  • (1)まず、サイドパネルを表示させる設定を「data-role="content"」内に記述します。
      ボタンのaタグに「href="#サイドパネルを表示する内容のid"」を追加します。

  • (2)次に、「data-role="page"」内(header,content,footer以外)にパネルの内容を記述します。
      divに「data-role="panel"」「 id="(1)で指定したid名"」「 data-position="left(左表示) または right(右表示)"」 「data-display="overlay"」を追加して、内容を囲んで終了です。

「data-display」は表示方法で、「overlay」を指定すると画像8、9の様に
コンテンツの上にパネルが重なる感じで表示されます。

閉じるときはパネル以外のところをタップするか、スワイプしてください。
またその他の表示方法やオプションなどを下記にご紹介します。
とりあえず参考にどうぞ。

 

 

 


画像10

画像11

画像12

 

 

画像10・11:表示方法「reveal」「push」
【HTMLコード】

						
<div id="#home" data-role="page"> <!--------------パネルの内容--------------------> <!---左パネル---> <div data-role="panel" id="leftpanel" data-position="left" data-display="reveal または push"> <h3>left panel</h3> <p>左パネルです。</p> </div> <div data-role="header"> <h1>side panel</h1> </div> <div data-role="content"> <!-------------パネル表示させる設定-------------> <a href="#leftpanel" data-role="button" data-inline="true">left panel</a> <p>&nbsp;</p> <p>表示方法は「reveal」です。<br> コンテンツがずれるかたちになります。</p> </div> </div>

 

「reveal」を指定すると、「overlay」のようにパネルが重ならずコンテンツがずれるかたちになります(画像10)。
「push」を指定すると、見た目「reveal」に似てますが、コンテンツを押し出すかたちになります(画像11)。
また「overlay、reveal」の時はパネルに「box-shadow(影)」がついてますが、「push」の時は影が無いです。

 

 

画像12:パネルのテーマ変更、閉じるボタン
【HTMLコード】

						<!--------------パネルの内容-------------------->
						<!---左パネル---->
						<div data-role="panel" id="leftpanel" data-position="left" data-display="overlay" data-theme="a">
							<h3>left panel</h3>
							<p>左パネルです。</p>
							<a href="#" data-rel="close" data-role="button" data-icon="delete" data-inline="true">閉じる</a>
						</div>
					

 

「data-role="panel"」のdivに「data-theme="テーマ"」を追加すると、パネルのテーマを変更できます。
またボタンのaタグに「data-rel="close"」を追加すると、閉じるボタンとなり押すとパネルが閉じます。

 

 

 


画像13

画像14

画像15

 

 

画像13:パネル幅の変更
【CSS】

						.ui-panel { width:10em; }
					

 

jQueryMobile用CSSの「.ui-panel」の幅の値を上書きする事で変更できます(画像13)。
また「.ui-panel」のデフォルト設定は下記の通りです。
デフォルトでは幅は「width: 17em;」となっています。


						.ui-panel {
							width: 17em;
							min-height: 100%;
							border-width: 0;
							position: absolute;
							top: 0;
							display: block;
						}
					

 

 

画像14:表示位置固定、スクロールしない
【HTMLコード】

						<div id="#home" data-role="page">
							<!--------------パネルの内容-------------------->
							<!---左パネル---->
							<div data-role="panel" id="leftpanel" data-position="left" data-display="overlay" data-theme="a" data-position-fixed="true">
								<h3>left panel</h3>
								<p>左パネルです。</p>
								<a href="#" data-rel="close" data-role="button" data-icon="delete" data-inline="true">閉じる</a>
							</div>

							<div data-role="header">
								<h1>side panel</h1>
							</div>
							<div data-role="content">
								<!-------------パネル表示させる設定------------->
								<p>表示方法は「overlay」です。<br>
								コンテンツの上にパネルが重なる感じで表示されます。</p>
								<p>&nbsp;</p>
								<p>&nbsp;</p>
								<p>&nbsp;</p>
								<p>&nbsp;</p>
								<p>&nbsp;</p>
								<p>&nbsp;</p>
								<p>&nbsp;</p>
								<p>&nbsp;</p>
								<p>&nbsp;</p>
								<a href="#leftpanel" data-role="button" data-inline="true">left panel</a>
								<p>&nbsp;</p>
								<p>&nbsp;</p>
								<p>&nbsp;</p>
							</div>
						</div>
					

 

サイドパネルを表示させるボタンがページの下の方にあった場合、
一度ページの一番上までスクロールしてからパネルが表示されるかたちになってしまいます。

これを防ぐためには「data-role="panel"」のdivに「data-position-fixed="true"」を追加します。
追加することで、表示させるボタンがある画面でパネルを表示させることができ、スクロールもしません(画像14)。

 

 

画像15:メニュー的な
【HTMLコード】

						<!--------------パネルの内容-------------------->
						<!---左パネル---->
						<div data-role="panel" id="leftpanel" data-position="left" data-display="overlay">
							<h3>left panel</h3>
							<ul data-role="listview">
								<li><a href="#">menu1</a></li>
								<li><a href="#">menu2</a></li>
								<li><a href="#">menu3</a></li>
								<li><a href="#">menu4</a></li>
								<li><a href="#">menu5</a></li>
								<li><a href="#">menu6</a></li>
								<li><a href="#">menu7</a></li>
							</ul>
							<p>&nbsp;</p>
							<a href="#" data-role="button">about</a>
							<a href="#" data-role="button">contact</a>
						</div>
					

リストビューやボタンを使って横から出るメニュー的なこともできます(画像15)。

 

その他、ボタンではなく画像を押してサイドパネル出すとかオッケーなので、いろいろ試してみてください。

 


 

 

ボタンアイコン(jQueryMobile1.3)



画像16

 

【HTMLコード】

						<!---画像16------------->
						<div data-role="content">
							bars<br>
							<a href="#" data-role="button" data-icon="bars">bars</a>
							edit<br>
							<a href="#" data-role="button" data-icon="edit">edit</a>

							<p>&nbsp;</p>

							ui-icon-alt<br>
							<a href="#" data-role="button" data-icon="bars" class="ui-icon-alt">bars</a>
							ui-icon-nodisc<br>
							<a href="#" data-role="button" data-icon="bars" class="ui-icon-nodisc">bars</a>
							ui-icon-altとui-icon-nodisc<br>
							<a href="#" data-role="button" data-icon="bars" class="ui-icon-alt ui-icon-nodisc">bars</a>
						</div>
					

 

新しいアイコン「bars」「edit」が追加されました。
「bars」はメニュー的な、「edit」は編集的な感じのアイコンです。

使い方は「data-icon="bars"」「data-icon="edit"」を追加するだけです。

 

また新しいオプション的なもの「ui-icon-alt」「ui-icon-nodisc」も追加されました。

「class="ui-icon-alt"」を追加で、黒色アイコン(icons-18-black.png)に切り替えつつ、背景は白になります。
「class="ui-icon-nodisc"」を追加で、アイコンの背景が透明になります。
「class="ui-icon-alt ui-icon-nodisc"」2つ追加で、アイコンが黒色で背景が透明になります。

※見やすいように下3つのボタンのテーマを変えています