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

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

※2014/3/13現在、最新バージョンはjQueryMobile1.4.2となります。
※詳しい説明などは他サイト・書籍を見てください。

 

タブパネル(jQueryMobile1.4)

jQueryUIのタブを使う方法もご紹介してますが、
jQueryMobile1.4で新たに追加された「data-role="tabs"」のタブパネルを使う方がカンタンです。
このタブパネルで表示する内容を切り替える事ができるようになります。

まず、head内にjQueryMobile1.4用の記述をしてください。
※2014/3/13現在、最新バージョンはjQueryMobile1.4.2となります。

 


						<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.css" />
						<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
						<script type="text/javascript" src="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.js"></script>
					

 

(1)タブパネルの基本的な使い方

画像1

画像2

画像3

 

タブの記述ですが、カンタンです。
data-role="tabs"のdivの中に、タブ部分、各タブの内容部分の記述をします。

 


						<div data-role="tabs">
							<!---タブ部分--->
							<ul>
								<li><a href="#tab1">tab1</a></li>
								<li><a href="#tab2">tab2</a></li>
								<li><a href="#tab3">tab3</a></li>
							</ul>

							<!---各タブの内容部分--->
							<div id="tab1">
								<p>tab1です</p>
							</div>

							<div id="tab2">
								<p>tab2です</p>
							</div>

							<div id="tab3">
								<p>tab3です</p>
							</div>
						</div>
					

 

tab1~3をクリックすると、tab1~3の内容を切り替えて表示することができます(画像1~3)。
ただこのままだとカッコよくないので、タブ部分でナビゲーションバーを使います。

 

(2)タブ部分の装飾:ナビゲーションバー

画像4

画像5

画像6

						<div data-role="tabs">
							<!---タブ部分--->
							<div data-role="navbar">
								<ul>
									<li><a href="#tab1">tab1</a></li>
									<li><a href="#tab2">tab2</a></li>
									<li><a href="#tab3">tab3</a></li>
								</ul>
							</div>

							<!---各タブの内容部分--->
							<div id="tab1">
								<p>tab1です</p>
								<p>テキストテキストテキスト</p>
								<p>テキストテキストテキスト</p>
								<p>テキストテキストテキスト</p>
							</div>

							<div id="tab2">
								<p>tab2です</p>
								<p>テキストテキストテキスト</p>
								<p>テキストテキストテキスト</p>
								<p>テキストテキストテキスト</p>
							</div>

							<div id="tab3">
								<p>tab3です</p>
								<p>テキストテキストテキスト</p>
								<p>テキストテキストテキスト</p>
								<p>テキストテキストテキスト</p>
							</div>
						</div>
					

 

という感じで、完全に見た目がイイ感じになりました。
最初の状態が画像4、tab2をクリックすると画像5のように切り替わります。
ちなみにタブを4つにすると画像6のような見た目になります。

次にタブ部分をリストビューにしてみます。

 

(3)タブ部分の装飾:リストビュー

画像7

画像8

画像9

 


						<div data-role="tabs">
							<!---タブ部分--->
							<ul data-role="listview" data-inset="true">
								<li><a href="#tab1">tab1</a></li>
								<li><a href="#tab2">tab2</a></li>
								<li><a href="#tab3">tab3</a></li>
							</ul>

							<!---各タブの内容部分--->
							<div id="tab1">
								<p>tab1です</p>
								<p>テキストテキストテキスト</p>
								<p>テキストテキストテキスト</p>
								<p>テキストテキストテキスト</p>
							</div>

							<div id="tab2">
								<p>tab2です</p>
								<p>テキストテキストテキスト</p>
								<p>テキストテキストテキスト</p>
								<p>テキストテキストテキスト</p>
							</div>

							<div id="tab3">
								<p>tab3です</p>
								<p>テキストテキストテキスト</p>
								<p>テキストテキストテキスト</p>
								<p>テキストテキストテキスト</p>
							</div>
						</div>
					

 

という感じで、tab2をクリックすると画像7のように内容部分が切り替わります。
また下記のようなCSSを記述すると、画像8、9のように右側に内容部分が表示されるようになります。

 

【CSS】

						.tab_left {
						    width: 40%;
						    display: inline-block;
						}
						.tab_content {
						    width: 45%;
						    display: inline-block;
						    vertical-align: top;
						    margin-left: 5%;
						}
					

※widthは調整してください。

 

【HTML】

						<div data-role="tabs">
							<ul data-role="listview" data-inset="true" class="tab_left">
								<li><a href="#tab1">tab1</a></li>
								<li><a href="#tab2">tab2</a></li>
								<li><a href="#tab3">tab3</a></li>
							</ul>

							<div id="tab1" class="tab_content">
								<h3>tab1です</h3>
								<p>テキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
								<p>テキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
							</div>

							<div id="tab2" class="tab_content">
								<p>tab2です</p>
								<p>テキストテキストテキスト</p>
								<p>テキストテキストテキスト</p>
								<p>テキストテキストテキスト</p>
							</div>

							<div id="tab3" class="tab_content">
								<p>tab3です</p>
								<p>テキストテキストテキスト</p>
								<p>テキストテキストテキスト</p>
								<p>テキストテキストテキスト</p>
							</div>
						</div>
					

 

今回はすべて「data-role="content"」内にタブを置いてみましたが、page内に置いたり
タブ部分にタブっぽい画像使うなどいろいろと試してみてください。


 

 

テーマ「light」「dark」(jQueryMobile1.4)



画像10

画像11

画像12

 


						<!---画像10 テーマ「light」の場合------>
						<div data-role="page" data-theme="a">
							<div data-role="header">
								<a href="#" data-role="button" data-icon="home">HOME</a>
								<h1>light</h1>
							</div>                   
							<div data-role="content">
								<ul data-role="listview" data-inset="true" data-filter="true">
									<li data-role="list-divider">メニューA</li>
									<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>
								</ul>
								<a href="#" data-role="button" data-icon="info">info</a>
							</div>
							<div data-role="footer">
								<h3>footer</h3>
							</div>
						</div>
					

 

いままでは「a~e」まで5種類のテーマが用意されていましたが、
jQueryMobile1.4では「light」「dark」の2種類のみになりました。

「data-theme="a"」でテーマ「light」(画像10)、
「data-theme="b"」でテーマ「dark」(画像11)

またデフォルトで「light」に設定されているので「light」を使う場合は何も書かなくても大丈夫です。
画像12はページ全体は「dark」で、リストビューとボタンだけ「light」にしてみました。

もちろんテーマローラーを使えば独自のテーマを作成できます。
いろいろと試してみてください。


 

 

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



画像13

 


						<a href="#" data-role="button" data-icon="action">action</a>
						<a href="#" data-role="button" data-icon="alert">alert</a>
						<a href="#" data-role="button" data-icon="arrow-d-l">arrow-d-l</a>
						<a href="#" data-role="button" data-icon="arrow-d-r">arrow-d-r</a>
						<a href="#" data-role="button" data-icon="arrow-d">arrow-d</a>
						<a href="#" data-role="button" data-icon="arrow-l">arrow-l</a>
						<a href="#" data-role="button" data-icon="arrow-r">arrow-r</a>
						<a href="#" data-role="button" data-icon="arrow-u-l">arrow-u-l</a>
						<a href="#" data-role="button" data-icon="arrow-u-r">arrow-u-r</a>
						<a href="#" data-role="button" data-icon="arrow-u">arrow-u</a>
						<a href="#" data-role="button" data-icon="audio">audio</a>
						<a href="#" data-role="button" data-icon="back">back</a>
						<a href="#" data-role="button" data-icon="bars">bars</a>
						<a href="#" data-role="button" data-icon="bullets">bullets</a>
						<a href="#" data-role="button" data-icon="calendar">calendar</a>
						<a href="#" data-role="button" data-icon="camera">camera</a>
						<a href="#" data-role="button" data-icon="carat-d">carat-d</a>
						<a href="#" data-role="button" data-icon="carat-l">carat-l</a>
						<a href="#" data-role="button" data-icon="carat-r">carat-r</a>
						<a href="#" data-role="button" data-icon="carat-u">carat-u</a>
						<a href="#" data-role="button" data-icon="check">check</a>
						<a href="#" data-role="button" data-icon="clock">clock</a>
						<a href="#" data-role="button" data-icon="cloud">cloud</a>
						<a href="#" data-role="button" data-icon="comment">comment</a>
						<a href="#" data-role="button" data-icon="delete">delete</a>
						<a href="#" data-role="button" data-icon="edit">edit</a>
						<a href="#" data-role="button" data-icon="eye">eye</a>
						<a href="#" data-role="button" data-icon="forbidden">forbidden</a>
						<a href="#" data-role="button" data-icon="forward">forward</a>
						<a href="#" data-role="button" data-icon="gear">gear</a>
						<a href="#" data-role="button" data-icon="grid">grid</a>
						<a href="#" data-role="button" data-icon="heart">heart</a>
						<a href="#" data-role="button" data-icon="home">home</a>
						<a href="#" data-role="button" data-icon="info">info</a>
						<a href="#" data-role="button" data-icon="location">location</a>
						<a href="#" data-role="button" data-icon="lock">lock</a>
						<a href="#" data-role="button" data-icon="mail">mail</a>
						<a href="#" data-role="button" data-icon="minus">minus</a>
						<a href="#" data-role="button" data-icon="navigation">navigation</a>
						<a href="#" data-role="button" data-icon="phone">phone</a>
						<a href="#" data-role="button" data-icon="plus">plus</a>
						<a href="#" data-role="button" data-icon="power">power</a>
						<a href="#" data-role="button" data-icon="recycle">recycle</a>
						<a href="#" data-role="button" data-icon="refresh">refresh</a>
						<a href="#" data-role="button" data-icon="search">search</a>
						<a href="#" data-role="button" data-icon="shop">shop</a>
						<a href="#" data-role="button" data-icon="star">star</a>
						<a href="#" data-role="button" data-icon="tag">tag</a>
						<a href="#" data-role="button" data-icon="user">user</a>
						<a href="#" data-role="button" data-icon="video">video</a>
					

 

jQueryMobile1.4よりボタンアイコンの種類がいろいろ増えました(画像13)。
上記はaタグに「data-role="button"」「data-icon="○○"」を入れた今までの記述ですが
下記のようなbuttonタグかつCSSクラスでの記述でもボタン、ボタン装飾、アイコンを使うことができます(画像14、15)。
CSSクラスでアイコンを入れる時は「ui-icon-〇〇」のような感じで、〇〇にはアイコン名(アラートマークなら「alert」)が入ります。

 


画像14

画像15

 


						<p>buttonタグを使用</p>
						<button class="ui-btn ui-btn-icon-left ui-icon-action">action</button>

						<p>アイコンの位置変更</p>
						<button class="ui-btn ui-btn-icon-left ui-icon-action">left</button>
						<button class="ui-btn ui-btn-icon-right ui-icon-action">right</button>
						<button class="ui-btn ui-btn-icon-top ui-icon-action">top</button>
						<button class="ui-btn ui-btn-icon-bottom ui-icon-action">bottom</button>

						<p>影あり</p>
						<button class="ui-btn ui-shadow ui-btn-icon-left ui-icon-action">shadow</button>

						<p>コーナー丸く</p>
						<button class="ui-btn ui-corner-all ui-btn-icon-left ui-icon-action">corner-all</button>

						<p>アイコンのみ</p>
						<button class="ui-btn ui-btn-icon-notext ui-icon-action">notext</button>

						<p>アイコン背景透明、ボタンテーマ「dark」</p>
						<button class="ui-btn ui-nodisc-icon ui-btn-b ui-btn-icon-left ui-icon-action">nodisc & btn-b</button>

						<p>アイコンカラー黒</p>
						<button class="ui-btn ui-alt-icon ui-btn-icon-left ui-icon-action">alt-icon</button>
					

 

こんな感じでbuttonタグにclassの「ui-○○」を追加すると、影あり、アイコンのみ、アイコンのカラー黒色など
変更することができます。また下記リンクは以前のバージョンの時に紹介した内容となります。

jQueryMobile1.2の時のボタンアイコン・使い方
jQueryMobile1.3で追加されたアイコン