LotosLabo

プログラミング技術とか気になった情報を載せていきます

jQuery Mobileについて

f:id:lo25131:20140402205914p:plain

jQuery Mobileとは

jQueryのMobile版です。


開発環境

公式サイトよりインストールして使うことが出来ます。
http://jquerymobile.com/download/

しかし、今回もCDNを使っていきます。

jquerymobile本体と、テーマが必要になります。
最新版はこちらになります。

jQuery Mobile
https://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.js

テーマ
https://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.css

この二つをhtmlファイルに貼り付けていきます。

あと、jQueryも必要となるので用意しておきます。
http://code.jquery.com/jquery-1.11.0.min.js



そして基本型がこんなかんじになります。

<!doctype html>
<html lang="ja">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width,initial-scale=1">
	<link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.css" />
	<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
	<script src="https://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.js"></script>
	<title>jQueryMobile</title>
</head>
<body>
	<div data-role="page">
		<div data-role="header">
			<h1>ホーム</h1>
		</div>
		<div data-role="content">
				<p>こんにちは</p>
		</div>
		<div data-role="footer">
				<h4>Copyright2014</h4>
		</div>
	</div>

</body>
	
</html>



ちょっといろいろと追加されていますがこれにいろいろ加えていく形になります。
まずいちばん最初のmeta nameですが、これはスマートフォン端末に使う際に入れておくとよいプログラムです。

そしてbodyタグにそれぞれ、ヘッダー、コンテンツ、フッターの役割をもたせます。そこに機能をそれぞれ追加していきます。

jQuery Mobileを始める

リンクの設定

「#」で指定して遷移します。
ただ単にホームからメニューへ移動するだけです。

<div id="home" data-role="page">
		<div data-role="header">
			<h1>ホーム</h1>
		</div>
	<div data-role="content">
		<p>ホームです</p>
		<p><a href="#menu">メニューへ</a></p>
	</div>

	<div data-role="footer">
		<h4>Copyright 2014</h4>
	</div>
</div>

<div id="menu" data-role="page">
		<div data-role="header">
			<h1>メニュー</h1>
		</div>
	<div data-role="content">
		<p>メニューです</p>
		<p><a href="#home">ホームへ</a></p>
	</div>

	<div data-role="footer">
		<h4>Copyright 2014</h4>
	</div>
</div>


遷移するときに若干フェードアウトになるようになっています。ちなみにこの設定は何もしていません。

f:id:lo25131:20140402222813g:plain

様々なリンク

URLリンク、他のファイルリンク等を追加しました。
また、簡単なページングアニメーションも追加しました。

	<div id="home" data-role="page">
		<div data-role="header">
			<h1>ホーム</h1>
		</div>
	<div data-role="content">
		<p>ホームです</p>
		<p><a href="#menu" data-transition="slideup">メニューへ</a></p>
		<p><a href="http:lotoslabo.com" rel="external">LotosLabo</a></p>
		<p><a href="a.html">読み込めないリンク</a></p>
		<p><a href="a.html" data-ajax="false">読み込めるリンク</a></p>
	</div>

	<div data-role="footer">
		<h4>Copyright 2014</h4>
	</div>
</div>

<div id="menu" data-role="page">
		<div data-role="header">
			<h1>メニュー</h1>
		</div>
	<div data-role="content">
		<p>メニューです</p>
		<p><a href="#home" data-transition="flip">ホームへ</a></p>
	</div>

	<div data-role="footer">
		<h4>Copyright 2014</h4>
	</div>
</div>



読み込めないリンク、読み込めるリンクはファイル間はajaxというのjQuery Mobileでは使うので付いてないとページ遷移出来ません。

またページングアニメーションにはflipとslideupというのを使用しました。

f:id:lo25131:20140402224043g:plain

ボタン

通常のボタンと、ボタンをグループとして作りました。
また、ボタンにテーマを付けてちょっとお洒落にしました。

<div id="home" data-role="page">
		<div data-role="header">
			<h1>ホーム</h1>
		</div>
	<div data-role="content">
		<p>ホームです</p>
		<p><a href="#menu" data-role="button" data-icon="gear" data-inline="true" data-transition="slideup">メニューへ</a></p>

		<div data-role="controlgroudp">
		<p><a href="http:lotoslabo.com" rel="external"  data-role="button">LotosLabo</a></p>
		<p><a href="a.html" data-role="button">読み込めないリンク</a></p>
		<p><a href="a.html" data-role="button" data-ajax="false">読み込めるリンク</a></p>
	</div>
	</div>

	<div data-role="footer">
		<h4>Copyright 2014</h4>
	</div>
</div>

<div id="menu" data-role="page">
		<div data-role="header">
			<h1>メニュー</h1>
		</div>
	<div data-role="content">
		<p>メニューです</p>
		<p> <p><a href="#home" data-role="button" data-theme="b" data-transition="flip">ホームへ</a></p>
	</div>

	<div data-role="footer">
		<h4>Copyright 2014</h4>
	</div>
</div>

メニューをボタン化して横にアイコンを付けました。
そして下の3つのリンクをボタングループ化にしました。
また、ホームへのリンクをボタン化しテーマを付けました。

f:id:lo25131:20140402224906g:plain

ヘッダーを作る

<div data-role="header">
<a href="#menu" data-icon="gear">左</a>
<a href="#menu" data-icon="check">右</a>



headerにこのように書くことでなんと左と右に配置されます。

f:id:lo25131:20140402225912j:plain

今回はhomeの方はヘッダーを特にいじらないで、メニューの方のヘッダーに戻る機能を付けておきます。

フッターを作る

フッターに配置できるウィジェットを試していきます。
まず、追加・削除ボタン的なものが配置できます。

<div data-role="footer" class="ui-bar">
		<h4>Copyright 2014</h4>
		<div data-role-="controlgroup" data-type="horizontal">
			<a href="#menu" data-icon="plus">追加</a>
			<a href="#menu" data-icon="delete">削除</a>
		</div>
	</div>



特に何の機能も持たせていませんが、このようになりました。

f:id:lo25131:20140402230706j:plain


また、フッターとヘッダーを固定する処理があり、それぞれの要素に
data-position="fixed"
をつけることでスクロールされても常に表示されるようになります。

ナビゲーションバーを使う

タブボタンのようなものを作ります。

<div data-role="navbar">
<ul>
<li><a href="http:lotoslabo.com" rel="external">LotosLabo</a></li>
<li><a href="a.html">読み込めないリンク</a></li>
<li><a href="a.html"  data-ajax="false">読み込めるリンク</a></li>
</ul>
</div>

こんなかんじで3つ横に並べました。

f:id:lo25131:20140403002936g:plain


フォームの作成

今回は、テキストボックスを始め、サブミットボタン、検索フィールド、スライダー、
チェックボックスラジオボタン、セレクトボックスを作成していきます。

<div id="home" data-role="page">
		<div data-role="header" data-position="fixed">
			<h1>ホーム</h1>
		</div> <!-- header -->
	
	<!-- テキストボックス -->
	<div data-role="content">
		<form action="mail.php" method="post">
			<div data-role="fieldcontain">
				<label for="name">お名前</label>
				<input type="text" name="name" id="name" value="">
			</div>


			<div data-role="fieldcontain">
				<label for="keywords">検索</label>
				<input type="search" name="keywords" id="keywords" value="">
			</div>

			<div data-role="fieldcontain">
				<label for="amount">数量</label>
				<input type="range" name="amount" min="0" max="100" id="range" value="">
			</div>

			<div data-role="fieldcontain">
				<fieldset data-role="controlgroup" data-type="horizontal"> 
					<legend>色</legend>

					<input type="checkbox" name="color_1" id="color_1">
					<label for="color_1">赤</label>

					<input type="checkbox" name="color_2" id="color_2">
					<label for="color_2">黄</label>

					<input type="checkbox" name="color_3" id="color_3">
					<label for="color_3">青</label>
				</fieldset>
			</div>

			<div data-role="fieldcontain">
				<fieldset data-role="controlgroup">
					<legend>色</legend>

					<input type="radio" name="color" value="1" id="color_1">
					<label for="color_1">赤</label>

					<input type="radio" name="color" value="2" id="color_2">
					<label for="color_2">黄</label>

					<input type="radio" name="color" value="3" id="color_3">
					<label for="color_3">青</label>
				</fieldset>
			</div>
		
			<div data-role="fieldcontain">
		
					<label for="color">色</label>
					<select name="color" id="color" data-native-menu="false">
						<option value="1">赤</option>
						<option value="2">青</option>
						<option value="3">黄</option>
					</select>
			</div>
					<input type="submit" value="送信">
		</form>
		
	</div> <!-- content -->

	<div data-role="footer" data-position="fixed">
		<h4>Copyright 2014</h4>
	</div> <!-- footer -->

</div><!-- #home -->



ちょっと長いですが一気に配置してみました。


f:id:lo25131:20140403012736g:plain

リストビューを作成

よくスマートフォンのサイトで見るようなリストビューを作成します。

<div data-role="content">
			<ul data-role="listview" data-filter="true">
				<li data-role="list-divider">飯テロ1</li>
				<li><a href="#menu">
				<img src="omlet.jpg">
				<h3>オムレツ</h3>
				<p>フォークで中を割ると半熟の卵が溢れでて、チキンライスととても合います。</p>
				</a>
				</li>
				<li><a href="#menu">
				<img src="ramen.jpg">
				<h3>ラーメン</h3>
				<p>ウマすぎる</p>
				</a></li>
				<li><a href="#menu">ハンバーグ</a></li>
				<li data-role="list-divider">飯テロ2</li>
				<li><a href="#menu">ステーキ</a></li>
				<li><a href="#menu">カレーライス</a></li>
				<li><a href="#menu">シュークリーム</a></li>
			</ul>

	</div> <!-- content -->



ちょこっと手抜きです。

f:id:lo25131:20140403010805g:plain