jQueryMobileを使う時によく使う基本コード

jQuery
スポンサーリンク

いろいろな所から毎回調べるのが面倒なので、自分用にコードをメモします。(調べながら記述しています。随時追記予定。)

大枠のひな形

“`<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1, maximum-scale=1">
<meta name="format-detection" content="telephone=no">
<link rel="apple-touch-icon-precomposed" href="img/iphone.png">
<link href="http://code.jquery.com/mobile/latest/jquery.mobile.min.css" rel="stylesheet" type="text/css" />
<script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script src="http://code.jquery.com/mobile/latest/jquery.mobile.min.js"></script>
<title></title>
</head>
<body>

</body>
</html>“`

ページの作成

  • 複数ページを繰り返したい場合は、以下のひな形をコピペして使うと楽。

“`<div data-role="page" id="ページID">
<div data-role="header"><h1>ヘッダー</h1></div>
<div data-role="content">コンテンツ</div>
<div data-role="content"><h4>フッター</h4></div>
</div>“`

ヘッダー

ページは以下のようにいろいろオプションをつけることができます。

“`<div data-role="page" id="ページID" data-theme="b" data-back-btn-text="戻る">
</div>“`

テーマファイルを指定する
data-theme=”b”
他のページから来た時に自動的に「戻るボタン」を表示
data-add-back-btn=”true”
backボタンのテキスト表記をカスタマイズする(デフォルトはBack)
data-back-btn-text=”戻る”
ボタンを右につける
class=”ui-btn-right”
2つ目のa要素は自動的に右側に表示されます。
戻るボタンを非表示にする
data-backbtn=”false”

フッター

フッター要素およびフッター要素の内側に新たな要素(ここではdiv)に対して以下の指定をする
class=”ui-bar”

“`<div data-role="footer" class="ui-bar">
<div class="ui-bar">
<a href="#">ボタン</a>
<a href="#">ボタン</a>
<a href="#">ボタン</a>
</div>
</div>“`

テーマの切り替え

  • a〜eはjQueryMobileの予約テーマ。
  • f〜zを指定すれば、独自のテーマを作ることができる。

“`data-theme="a"“`

エフェクト

“`<!– 右から左へスライド –>
<a href="#" data-transition="slide">

<!– 下から上へスライド –>
<a href="#" data-transition="slideup">

<!– 上から下へスライド –>
<a href="#" data-transition="slidedown">

<!– 拡大しながらポップアップ –>
<a href="#" data-transition="pop">

<!– フェード –>
<a href="#" data-transition="fade">

<!– フリップ(3D横回転) –>
<a href="#" data-transition="flip">

<!– オフ –>
<a href="#" data-transition="none">

<!– 逆アニメーション –>
<a href="#" data-transition="reverse">“`

サイト全体で同じエフェクトを設定したい時は、head要素内に以下のように記述

“`<script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script>
$(document).bind("mobileinit", function(){
$.mobile.defaultTransition = "flip";
});
</script>
<script src="http://code.jquery.com/mobile/latest/jquery.mobile.min.js"></script>“`

テキストの…を省略したくない場合

CSSを設定し、htmlに記述する。

“`.wordbreak{
overflow: visible;
white-space: normal;
}“`
“`<p class="wordbreak">文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章</p>“`

フォーム大枠

“`<form action="hoge.php" method="post">
<div data-role="fieldcontain">
<!– ここにフォームコードを入れる –>
</div>
</form>“`

フォーム各部品

“`<!– 1行テキスト –>
<label for="f_name">名前</label>
<input type="text" id="f_name">

<!– テキストエリア –>
<label for="f_comment">お問い合わせ内容</label>
<textarea id="f_comment"></textarea>

<!– ラジオ –>
<label for="f_gender">性別</label>
<select name="f_gender" id="f_gender" data-role="slider">
<option value="男性">男</option>
<option value="女性">女</option>
</select>

<!– チェックボックス –>
<fieldset data-role="controlgroup">
<legend>タイトル</legend>
<input type="checkbox" name="f_type1" id="f_type1" value="項目項目">
<label for="f_type1">項目項目</label>
<input type="checkbox" name="f_type2" id="f_type2" value="項目項目">
<label for="f_type2">項目項目</label>
<input type="checkbox" name="f_type3" id="f_type3" value="項目項目">
<label for="f_type3">項目項目</label>
</fieldset>

<!– ボタン(1行1ボタン表示) –>
<input type="button" value="キャンセル">
<input type="submit" value="送信">

<!– ボタン(横並び表示) –>
<input type="button" value="キャンセル" data-inline="true">
<input type="submit" value="送信" data-inline="true">“`

リストビュー関連

  • 以下のコードを参考に不要な部分を削除する
  • リストを入れ子にすると、親だけ表示→クリック→子リストを表示になる

“`<ul data-role="listview">
<li data-role="list-divider">新着記事</li>
<li><a href="#"><img src="http://placehold.it/77×77" /><h2>見出し</h2><p>説明の内容</p><span class="ui-li-count">10</span></a></li>
</ul>“`

角丸立体リストにする
ul要素に対して、data-inset=”true”
小見出し表現にする
ul>li要素に対して、data-role=”list-divider”
list-dividerにテーマを当てる
list-dividerと同じ箇所に、data-dividertheme=”a”
li要素の右上に表示
ul>li>a要素内に、<p class="ui-li-aside">2012年12月31日</p>
カウント数表示
ul>li>a要素内に、<span class="ui-li-count">カウント数字</span>
カウント表示のテーマを変更
ul要素に、data-count-theme=”a”
左側に画像をつける
ul>li>a要素内にimgタグで画像を配置
画像を40*40pxにして左に表示(ただし表示を調整する必要がある)
ul>li>a>img要素に、class=”ui-li-icon”
絞り込み用入力枠を追加出来る
ul要素に、data-filter=”true”
絞り込み用入力枠にプレースホルダーを設定
data-filterと同じ箇所に、data-filter-placeholder=”キーワード入力”