解 説

mob1
完成例サンプル

リンクボタンの作成

リンクボタンの作成は簡単です。a要素にclass=”ui-btn”というクラスを指定するだけです。
リンクボタンの作成は旧バージョンから1.4になってから大きく変更されていますので注意してください。
data-属性からクラスでの指定に変更されています。
リンクボタンはブロックレベル要素でできています。インライン要素のリンクボタンを作成するにはクラス名にui-btn-inlineを追加します。インライン状態にするとfloatされて横並びになります。

ブロック要素のボタン class=”ui-btn”
インライン要素ボタン class=”ui-btn ui-btn-inline”

ブロックレベルのリンクボタンでサイズを小さくする場合はui-miniというクラス名を追加します。

旧記法 新記法 意味
data-role=button class=ui-btn ボタン作成
data-theme=a class=ui-btn-a テーマ指定
data-corners=true class=ui-corner-all 角を丸める
data-shadow=true class=ui-shadow 影をつける
data-mini=true class=ui-mini 小さいボタン
data-icon=home class=ui-icon-home アイコン指定
data-iconpos=right class=ui-btn-icon-right アイコン表示位置
data-iconshadow=true class=ui-shadow-icon アイコンの影
data-inline=true class=ui-btn-inline インラインにする

戻るボタンの作成

header部分にdata-add-back-btn=”true” を付加すると「Backボタン」が作成されます。data-back-btn-text=”戻る”を追加するとBackが「戻る」と変更されて「戻るボタン」が作成されます。
戻るボタン」は別ページから遷移してきた場合のみ表示される仕組みになっています。もし、直接該当ページにアクセスした場合は「戻るボタン」は表示されません。

Backボタン作成
data-add-back-btn=”true”

戻るボタン作成例

ボタンのグループ化

ボタンをグループ化するにはdata-role=”controlgroup”を使います。

縦並びのグループ化

横並びのグループ化

ナビゲーションバーの作成

ナビゲーションバーは複数のページを行き来するためのグローバルナビの役目をします。
ナビゲーションバーの作成方法は data-role=”navbar”をdivなどに付加するだけです。
そして、ナビの中のボタンはliがボタンになります。
アクティブなページは ” class=”ui-btn-active”を使います。

ナビゲーションの作成
data-role=”navbar”

ページ切り替え効果

ページ切り替えのアニメーションは a要素にdata-transition=”アニメーション効果”を付加します。

アニメーション効果 内容
fade フェードイン
pop 中央から広がるようにポップイン
flip 回転
turn 左端を軸にして回転
flow 縮小してスライドイン
slidefade スライドしてフェードイン
slide 横方向にスライド
slideup 上にスライド
slidedown 下にスライド
none なし