Latest web development tutorials

jQueryのモバイルボタン

モバイルアプリケーションは、表示したいものをクリックするだけで構築されています。



jQueryのモバイルでボタンを作成します。

jQueryのモバイルでは、ボタンの3つの方法で作成することができます。

  • <ボタン>要素を使用します
  • <input>要素を使用します
  • のデータ役割= "ボタン"と<A>要素を使用します

<ボタン>

<button>按钮</button>

»をお試しください

<入力>

<input type="button" value="按钮">

»をお試しください

<A>

<a href="#" data-role="button" >按钮</a>

»をお試しください

ランプ jQueryのモバイルでは、ボタンが自動的にモバイルデバイス上でそれらをより魅力的と可用性行い、スタイリングします。 私たちは、ページ間の要素が提出を形成するの<input>または<button>を使用して、あなたがリンクのデータ役割= "ボタン"との<a>要素を使用することをお勧めします。

ナビゲーションボタン

ページ間のボタンリンクを介して、データ-役割= "ボタン"プロパティを持つ<A>要素を使用します。

例

< a href="#pagetwo" data-role="button" >访问第二个页面</a>

»をお試しください

インラインボタン

デフォルトでは、ボタンが画面の幅全体を占めています。 あなたはボタンとしてのみなど幅広いコンテンツをしたい、またはあなたが並んで二つ以上のボタン側を表示したい場合は、 "真"のデータインライン=を追加する場合：

例

<a href="#pagetwo" data-role="button" data-inline="true" >访问第二个页面</a>

»をお試しください

ボタンの組み合わせ

jQueryのモバイルは、ボタンを組み合わせるための簡単な方法を提供します。

データ-役割を入れてください= "controlgroupは"属性とデータ型=「水平|垂直」ボタンの水平または垂直の組み合わせかどうかを指定するために一緒に使用：

例

<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>

»をお試しください

ランプ デフォルトでは、ボタンが縦構図、それらの間のマージンなしとスペースの組み合わせです。 それらが組み合わされたときに、美しい外観を作成するようにとだけ最初と最後のボタンは、丸みを帯びています。

[戻る]ボタン

[戻る]ボタンを作成するには、（アンカーのhref値を無視します）= "バック"プロパティデータ-RELを使用します。

例

<a href="#" data-role="button" data-rel="back" >返回</a>

»をお試しください

より多くのリンクボタンインスタンス

カテゴリ 説明 例
UI-BTN-B ボタンの色が黒の変更、フォントが白（デフォルト灰色の背景、黒のフォント）です。 試します
UI-コーナーすべて 丸みを帯びた角を追加するためのボタン 試します
UI-ミニ 小さなボタンを作ります 試します
UI-影 影を追加するためのボタン 試します

ノート あなたは、スペースで区切って、各スタイルクラスをより多くのスタイルが必要な場合は、のような：クラス= "UI-BTN UI-BTN-インラインUI-BTN-コーナー - すべてのUI-影」

デフォルトでは、<入力>ボタンはコーナーと影の効果を四捨五入しています。 <A>と<ボタン>要素にはありません。

より完全なCSSクラスは、私たちを参照してくださいjQueryのモバイルCSSクラスリファレンスマニュアルを 。

次のセクションでは、ボタン上のアイコンを追加する方法を示します。