モバイルアプリケーションは、あなたが表示したいと思うものをタップするのシンプルさに基づいて構築されています。
jQueryのモバイルでのボタンの作成
jQueryのモバイルでのボタンは、次の3つの方法で作成できます。
- 使用して<input>要素を
- 使用して<button>を持つ要素をclass="ui-btn"
- 使用<a>を持つ要素をclass="ui-btn"
jQueryのモバイルのボタンが自動的にモバイルデバイスとデスクトップコンピュータの両方で、彼らは魅力的で使用可能となっています。 私たちは、あなたが使用することをお勧めし 、スタイルを作られている<a>を持つ要素をclass="ui-btn"ページ間のリンクする、と<input>または<button>フォーム送信するための要素。
注：バージョン1.4の前に、我々が使用しdata-role="button" jQueryのモバイルでのボタンを作成する属性を。 （以外のスタイルのボタンに1.4のように、フレームワークを使用するCSSクラス<input>ボタン）。
ナビゲーションボタン
、ボタンでページ間のリンクを使用するには<a>持つ要素をclass="ui-btn" ：
グループ化されたボタン
jQueryのモバイルは、一緒にボタンをグループ化するための簡単な方法を提供します。
使用するdata-role="controlgroup"と一緒に属性data-type="horizontal|vertical" ：コンテナ要素で、かどうかを水平方向または垂直方向のグループボタンに指定します
例
<div data-role="controlgroup" data-type="horizontal" >
<a href="#" class="ui-btn">Button 1</a>
<a href="#"
class="ui-btn">Button 2</a>
<a href="#"
class="ui-btn">Button 3</a>
</div>
»それを自分で試してみてください デフォルトでは、グループ化されたボタンは、それらの間のマージンなしスペースで上下にグループ化されています。 そして、最初と最後のボタンが一緒にグループ化されたときに素敵な外観を作成コーナーを丸くしています。
戻るボタン
[戻る]ボタンを作成するには、使用するdata-rel="back"属性（：これはアンカーの無視します。注 href値を）：
インラインボタン
デフォルトでは、ボタンが画面の全幅を取ります。 あなただけの幅、その内容としてあるボタンをしたい、またはあなたが並べて表示されるように二つ以上のボタンをしたい場合は、追加であれば"ui-btn-inline"クラス：
リンクボタンの詳細CSSクラス
| クラス | 説明 | 例 |
|---|---|---|
| ui-btn-b | 白い文字が黒の背景にあるボタンの色を変更します（デフォルトは黒のテキストと灰色の背景です）。 | それを試してみてください |
| ui-corner-all | ボタンに丸みを帯びた角を追加します。 | それを試してみてください |
| ui-mini | ボタンを小さくします | それを試してみてください |
| ui-shadow | ボタンに影を追加します。 | それを試してみてください |
あなたは、複数のクラスを使用するように、スペースで各クラスを分離したい場合は、次のclass="ui-btn ui-btn-inline ui-btn-corner-all ui-shadow"
デフォルトでは、 <input>ボタンは、シャドウと丸みを帯びた角を持っています。 <a>と<button>要素にはありません。
一般的なスタイルのためのCSSクラスの完全なリファレンスについては、私たちの訪問のjQueryモバイルCSSクラス参照を 。
次の章では、ボタンにアイコンを付加する方法を示しています。