jquery.mobile.jsを利用して携帯用ページをhtml5対応のスマホ用に変更。
- </head>から上の基本のタグをhtml5用に変更。charsetは、"utf-8"に。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
- jQuery Mobile用のマークアップに変更。"header"と"footer"部分にh1〜h6で内容記述。
<body>
<div data-role="page">
<div data-role="header">ヘッダ部分 </div>
<div data-role="content"> 本文部分</div>
<div data-role="footer">フッタ部分</div>
</div>
</body>
- リンクボタンは、アンカータグに、data-role="button"を追加するだけ。
文字数が長いと省略されるので注意が必要。標準文字サイズで13文字程度まで。下画像の下が標準文字サイズ、上がスタイルでsamllerを指定したもの。
自分で作成したボタン画像も使用可能。
- リンク付きリストをスマホ用らしくする。
<ul data-role="listview" data-inset="true">
<li data-role="list-divider">……</li>
<li><a href="……">……</a>
・
・
・
</ul>
- フッターにボタンを追加。
・アンカータグを追加していけば左詰めに自動配置されたボタンに。
・上のボタンに余白を持たせる。class="ui-bar"を追加。
<div data-role="footer" class="ui-bar">フッタ部分</div>
・上のボタンをアイコン付きに。
data-role="button" data-icon="home"などをアンカータグに追加。
・ボタンのグループ化する。並べたアンカータグを<div >でくくり、data指定を追加。
<div data-role="controlgroup" data-type="horizontal"> などに。
- ボタンアイコンの内容。
|
data-icon="arrow-l"
|
左矢印
|
data-icon="arrow-r"
|
右矢印
|
|
data-icon="arrow-u"
|
上矢印
|
data-icon="arrow-d"
|
下矢印
|
|
data-icon="delete"
|
×マーク
|
data-icon="plus"
|
＋マーク
|
|
data-icon="minus"
|
−マーク
|
data-icon="check"
|
レ（チェック）
|
|
data-icon="gear"
|
ギアマーク
|
data-icon="refresh"
|
リロード
|
|
data-icon="forward"
|
進む
|
data-icon="back"
|
戻る
|
|
data-icon="grid"
|
グリッド
|
data-icon="star"
|
星
|
|
data-icon="alert"
|
アラート
|
data-icon="info"
|
i（インフォ）
|
|
data-icon="home"
|
家マーク
|
data-icon="search"
|
ルーペ
|
- スクロールされても常にフッターを表示、固定化する方法。
フッターを指定した<div>に、data-position="fixed" を追加。
