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

完成例サンプル

リンクボタンの作成

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

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

戻るボタンの作成

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>