jQuery Mobile1.4でスマホサイト作成2〜ボタンの作成

HTML&CSS

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”

戻るボタン作成例

<div data-role="header" data-add-back-btn="true" data-back-btn-text="戻る">

ボタンのグループ化

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

縦並びのグループ化

<div data-role="controlgroup">
  <a href="" data-role="button">Yes</a>
  <a href="" data-role="button">No</a>
</div>

横並びのグループ化

<div data-role="controlgroup" data-type="horizontal">
  <a href="" data-role="button">Yes</a>
  <a href="" data-role="button">No</a>
</div>

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

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

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

<div data-role="navbar">
      <ul>
        <li><a href="#top" class="ui-btn-active ui-state-persist ui-icon-home ui-btn-icon-left">Home</a></li>
        <li><a href="#info" data-transition="flip">info</a></li>
        <li><a href="#menu" data-transition="flip">ranking</a></li>
        <li><a href="#recipes" data-transition="flip">recipes</a></li>
      </ul>
    </div>
  </div>

ページ切り替え効果

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

<a href="#recipes"  class="ui-btn ui-corner-all ui-shadow" data-transition="pop">食いしん坊情報</a>
アニメーション効果 内容
fade フェードイン
pop 中央から広がるようにポップイン
flip 回転
turn 左端を軸にして回転
flow 縮小してスライドイン
slidefade スライドしてフェードイン
slide 横方向にスライド
slideup 上にスライド
slidedown 下にスライド
none なし
タイトルとURLをコピーしました