jQueryMobileとは
モバイルWEBアプリやスマートフォンサイト用のフレームワーク
ヘッダー部、コンテンツ部、フッター部で構成される
<div data-role=”page”>
<div data-role=”header” data-theme=”a”></div>
<div data-role=”content”></div>
<div data-role=”footer”></div>
</div>
複数ページも可能
<div data-role=”page1″>
<div data-role=”header” data-theme=”a”></div>
<div data-role=”content”></div>
<div data-role=”footer”></div>
</div>
<div data-role=”page2″>
<div data-role=”header” data-theme=”a”></div>
<div data-role=”content”></div>
<div data-role=”footer”></div>
</div>
ポップアップもある
<a href=”a.html” data-rel=”dialog”></a>
<ここで注意点>
基本的にAjaxでのページ遷移でCSS、jsファイルの読込みを行うHEAD部分は読込まれず、
BODY部分のみ置き換わりエフェクトがかかる
画面のid項目の重複が発生したりして挙動がおかしくなる
下記のような指定をするとAjaxを使用せず通常の遷移となり回避できるがエフェクトはかからなくなる
<a href=”a.html” rel=”external”>
<a href=”a.html” data-ajax=”false”>
<form data-ajax=”false”>
代わりにリンククリック時に自前でAjaxローダーのような表示する
<div id=”shadow”></div>
// リンククリックで背景グレーアウト(css作成)
$(“a”).click(function() {
$(‘#shadow’).show();
});
// ページの読込み後に元に戻す
$(window).load(function(){
$(‘#shadow’).show();
});
// ページローディング
$(document).on(‘mobileinit’, function() {
$.mobile.loader.prototype.options.text = ‘loading’;
$.mobile.loader.prototype.options.textonly = false;
$.mobile.loader.prototype.options.textVisible = true;
$.mobile.loader.prototype.options.theme = ‘a’;
});
6種類のテーマ(data-theme)がある
<div data-role=”header” data-theme=”a”>
デフォルト
a:黒
b:青
c:グレイ
d:ライトクレイ
e:黄色
その他にも
レイアウト用のグリッドや
data-role=”none”でテーマを外すなども可能
<input data-role=”none” type=”text” name=”name” id=”name” value=”” size=12>
フォームのactionはフルパス指定が必要
<form action=”/current-directory/abc” method=”get”>
エフェクトを指定
data-transition=”slide”
他に
slideup
slidedown
pop
fade
fillip
turn
flow
slidefade
none
など
他にもいろいろと用意されているみたい
タブウィジェットはjQuery Mobile 1.4から追加されている
テキストエリアの自動拡張機能(テキスト入力欄が不足すると動的に縦幅を広げる機能)は
jQuery Mobile 1.4からdata-autogrow=”false”で抑制できる。
それ以前の場合は下記のようにmax-heightで可。
<textarea style=”height:500px;max-height:500px;box-shadow:none;” readonly></textarea>
jQuery Mobileのスペースや背景色などデフォルトに戻したい場合
jquery.mobile-xxx.cssを変更する。
スペース部分の除去
/*content area*/
.ui-content { border-width: 0; overflow: visible; overflow-x: hidden; padding: 15px; }
背景色を変更
.ui-body-c {
border: 1px solid #B3B3B3;
color:#000;
text-shadow: 0 1px 0 #fff;
background: #FFF;
}
ボタンの角丸を解除するには「data-corners=”false”」
影を解除するには「data-shadow=”false”」