jQuery Mobile ボタン

モバイルアプリケーションは、タッチ操作の便利性に依存して構築されています。

jQuery Mobileでボタンを作成する

jQuery Mobileのボタンは、以下の3つの方法で作成できます：

  • <button>要素を使用する
  • <input>要素を使用する
  • data-role="button"を使用する<a>要素

<button>

<button>ボタン</button>

亲自试一试

<input>

<input type="button" value="ボタン">

亲自试一试

<a>

<a href="#" data-role="button">ボタン</a>

亲自试一试

ヒント：jQuery Mobile のボタンは自動的にスタイルが適用され、モバイルデバイス上でのインタラクティブ性と利用性が高まります。ページ間のリンクを作成する場合は、data-role="button" の <a> 要素を使用することをお勧めします。一方で、<input> や <button> 要素はフォームの送信に使用されます。

ナビゲーションボタン

ページをリンクするためにボタンを使用する場合は、data-role="button" の <a> 要素を使用してください：

例

<a href="#pagetwo" data-role="button">ページ二に移動</a>

亲自试一试

インラインボタン

デフォルトでは、ボタンはスクリーンの全幅を占めます。ボタンが内容に合わせて調整される必要がある場合、または二つ以上のボタンを並べて表示する必要がある場合、data-inline="true" を追加してください：

例

<a href="#pagetwo" data-role="button" data-inline="true">ページ二に移動</a>

亲自试一试

組み合わせボタン

jQuery Mobile はボタンの組み合わせを簡単に行う方法を提供しています。

data-role="controlgroup" 属性と data-type="horizontal|vertical" を同時に使用して、ボタンの水平または垂直な組み合わせを指定してください：

例

<div data-role="controlgroup" data-type="horizontal">
  <a href="#anylink" data-role="button">ボタン 1</a>
  <a href="#anylink" data-role="button">ボタン 2</a>
  <a href="#anylink" data-role="button">ボタン 3</a>
</div>

亲自试一试

ヒント：デフォルトでは、ボタングループは垂直に配置され、外側マージンや余白はありません。また、最初と最後のボタンのみ角が丸くなっており、組み合わせることで美しい外観が生まれます。

後退ボタン

後退ボタンを作成するには、data-rel="back" 属性を使用してください（アンカーの href 値は無視されます）：

例

<a href="#" data-role="button" data-rel="back">戻る</a>

亲自试一试

更多用于按钮的 data-* 属性

属性 値 説明 例
data-corners true | false ボタンに丸みを帯びているかどうかを決定します。 テスト
data-mini true | false 小型ボタンかどうかを決定します。 テスト
data-shadow true | false ボタンに影があるかどうかを決定します。 テスト

jQuery Mobile data-* 属性に関する詳細情報については、以下のページを訪れてください。 jQuery Mobile Data 属性リファレンスマニュアル.

ボタンにアイコンを追加する方法を説明します。