Deep Insider の Tutor コーナー
>>  Deep Insider は本サイトからスピンオフした姉妹サイトです。よろしく! 
jQuery Mobile逆引きリファレンス

jQuery Mobile逆引きリファレンス

jQuery Mobileページにボタンを配置するには?

2014年2月20日

jQuery Mobileページでボタンを設置するには、<button>/<a>/<input>要素などを利用するのが一般的。これらを使ってさまざまなレイアウトを実現する方法を説明。

  • このエントリーをはてなブックマークに追加

jQuery Mobileとは?

 jQuery Mobileは、jQueryを拡張するライブラリ(プラグイン)の一種で、名前のとおり、スマホ/タブレットに代表されるモバイル対応アプリを開発するための機能を提供します。jQuery Mobileの導入方法や使い方、jQuery Mobileが提供する主要機能については、「jQuery Mobile逆引きリファレンス: jQuery Mobileを利用するには?」を参照してください。

 jQuery Mobileページでボタンを設置するには、以下の要素を利用するのが一般的です。

  • <button>要素
  • <a>要素
  • <input>要素(type属性が「submit」「reset」「button」)

 本稿では、これらの要素を使って、さまざまなボタンをレイアウトする方法について紹介していきます。

<button>/<a>要素でボタンをレイアウトする

 <button>/<a>要素でボタンをレイアウトするには、以下のようにclass属性を利用します*1

HTML
<div role="main" class="ui-content">
  <button class="ui-btn">button要素</button>
  <a href="index.html" class="ui-btn">a要素</a>
</div>
ボタンをレイアウトする基本的なコード(button.html)
それぞれの要素をボタンとして表示

 「class="ui-btn"」属性は、要素をボタンとしてレイアウトするための基本的な宣言です。以降、ボタンに関わるスタイルを指定する際の前提となります。

ボタンに関わるスタイル

 ボタンに関わるスタイルには、以下のようなものがあります。

(1)インラインモードで表示

 ボタンはデフォルトでブロック要素(=画面幅いっぱいにレイアウトし、前後に改行)としてレイアウトされます。これをインライン要素(=ブロック内に配置でき、前後に改行はない)として配置するには、ui-btn-inlineスタイルクラスを利用します。

HTML
<button class="ui-btn ui-btn-inline">button要素</button>
<a href="index.html" class="ui-btn ui-btn-inline">a要素</a>
ボタンをインライン要素としてレイアウトするコード
ボタンが横並びに表示される
(2)ボタンを角丸にする

 ui-corner-allスタイルクラスを利用します。

HTML
<button class="ui-btn ui-corner-all">button要素</button>
<a href="index.html" class="ui-btn ui-corner-all">a要素</a>
ボタンに角丸効果を適用するコード
ボタンの角が丸く
(3)ボタンに影を付与する

 ui-shadowスタイルクラスを利用します。

HTML
<button class="ui-btn ui-shadow">button要素</button>
<a href="index.html" class="ui-btn ui-shadow">a要素</a>
ボタンに影効果を適用するコード
ボタンに影を付与
(4)ボタンにテーマを付与する

 ui-btn-*スタイルクラスを利用します。「*」はスウォッチを意味する「a」~「z」のいずれかの値を指定します。デフォルトのテーマで提供されるスウォッチは「a」「b」のみです。

HTML
<button class="ui-btn ui-btn-b">button要素</button>
<a href="index.html" class="ui-btn ui-btn-b">a要素</a>
ボタンにテーマを適用するコード
ボタンにスウォッチbを適用
(5)ボタンを利用不可にする

 ui-state-disabledスタイルクラスを利用します。<button>要素では、単にHTMLのdisabled属性を付与します。

HTML
<a href="index.html" class="ui-btn ui-state-disabled">a要素</a>
<button disabled>button要素</button>
ボタンを利用不可にするコード
ボタンがグレーアウトし、利用不可に
(6)ボタンをよりコンパクトに表示する

 ui-miniスタイルクラスを利用することで、サイズをコンパクトにしたミニバージョンのボタンを作成できます。

HTML
<button class="ui-btn ui-mini">button要素</button>
<a href="index.html" class="ui-btn ui-mini">a要素</a>
ボタンをコンパクト表示するコード
ミニバージョンのボタンを表示
(7)ボタンに対するスタイルを除去する

 jQuery Mobile 1.4の時点では、<button>要素には自動的にjQuery Mobileのスタイルが適用されます。よって、スタイルが一切適用されないネイティブなボタンを生成するには、「data-role="none"」属性を付与します(<a>要素については、明示的にスタイル付しない限り、リンクを表示しますので、不要です)。

HTML
<button data-role="none">button要素</button>
ボタンの自動スタイル付を無効化
ネイティブなボタンを表示

<input>要素でボタンをレイアウトする

 <input>要素(「type="submit"」「"reset"」「"button"」であるもの)では、内部的にButtonウィジェットが適用されます*2。もろもろのスタイル付けもdata-xxxxx属性を使って行います。以下に、Buttonウィジェットで利用できるdata-xxxxx属性をまとめます。用法は、上で紹介したスタイルクラスに対応していますので、併せて参照してください。

  • *2 この挙動は「data-role="none"」属性を付与することで無効化できます。
属性概要デフォルト値
data-corners ボタンの角を丸めるか true
data-icon ボタンに付与するアイコン
data-iconpos アイコンの表示位置 left
data-iconshadow アイコンに影を付与するか(非推奨) false
data-inline ボタンをインライン要素として表示するか false
data-mini ボタンをミニバージョンで表示するか false
data-shadow ボタンに影効果を付与するか true
data-theme ボタンに適用するテーマ (親要素を継承)
Buttonウィジェットのパラメーター*3
  • *3 アイコンについては、別稿「jQuery Mobileページでアイコン付きのボタンを配置するには?」で後日詳解の予定です。

ボタンをグループ化する

 Controlgroupウィジェットを利用することで、ボタンをグループ化できます。グループ化されたボタンは互いに余白無しに配置され、先頭末尾のボタンにのみ角丸効果が付与されます。

HTML
<div data-role="controlgroup">
  <button class="ui-btn">button要素</button>
  <a href="index.html" class="ui-btn">a要素</a>
  <input type="button" value="input要素" />
</div>
ボタンをまとめるためのコード
グループ化されたボタン

 Controlgroupウィジェットは、ボタンのコンテナー要素(一般的には<div>要素)に対して、「data-role="controlgroup"」属性を付与することで適用できます。

 「data-type="horizontal"」属性を付与することで、ボタンを水平方向にまとめることもできます。ただし、画面の横幅に入りきらない場合、途中で改行されますので注意してください。

HTML
<div data-role="controlgroup" data-type="horizontal">
ボタンを横並びにまとめるためのコード
水平方向にグループ化されたボタン

※以下では、本稿の前後を合わせて5回分(第5回~第9回)のみ表示しています。
 連載の全タイトルを参照するには、[この記事の連載 INDEX]を参照してください。

jQuery Mobile逆引きリファレンス
5. jQuery Mobileページでハイパーリンクを設置するには?

jQuery Mobileにおけるリンクの挙動を解説。また、ページ遷移時のエフェクトやプリフェッチ機能についても説明する。

jQuery Mobile逆引きリファレンス
6. jQuery Mobileページでローディング表示をカスタマイズするには?

jQuery Mobileで、ページ読み込みに際してローディングアイコンを表示する方法と、ローディング表示を制御する基本的なテクニックを解説。

jQuery Mobile逆引きリファレンス
7. 【現在、表示中】≫ jQuery Mobileページにボタンを配置するには?

jQuery Mobileページでボタンを設置するには、<button>/<a>/<input>要素などを利用するのが一般的。これらを使ってさまざまなレイアウトを実現する方法を説明。

jQuery Mobile逆引きリファレンス
8. jQuery Mobileページでアイコン付きのボタンを配置するには?

jQuery Mobileページでボタンを設置する方法について説明。今回は、アイコン付きのボタンをレイアウトする方法を解説する。

jQuery Mobile逆引きリファレンス
9. Navbarウィジェットでナビゲーションバーを作成するには?

アプリ共通のリンクやコマンドボタンなどを配置するために使われるナビゲーションバーを、jQuery MobileのNavbarウィジェットで手軽に作成する方法を解説する。

サイトからのお知らせ

Twitterでつぶやこう!