最新のWeb開発のチュートリアル
 

jQuery Mobileフォーム

❮前 次の章❯

彼らは魅力的なタッチフレンドリーに見えるようにするjQueryのモバイル自動的スタイルHTMLフォーム。

jQuery Mobile Form構造

jQueryのモバイルは、彼らが魅力的で使いやすい作り、スタイルのHTMLフォーム要素にCSSを使用しています。

jQueryのモバイルでは、次のフォームコントロールを使用することができます。

  • テキスト入力
  • 検索入力
  • ラジオボタン
  • チェックボックス
  • メニューを選択します
  • スライダー
  • フリップトグルスイッチ

jQueryのモバイルフォームで作業する場合、あなたは知っている必要があります：

  • <form>要素には、メソッドとaction属性を持っている必要があります
  • 各フォーム要素は、ユニークな "id"属性を持っている必要があります。 IDはサイト内のページ間で一意でなければなりません。 これは、jQueryのモバイルの単一ページナビゲーションモデルは、多くの異なる「ページ」が同時に存在することができますされているため、
  • 各フォーム要素は、ラベルを持っている必要があります。 要素のidに一致するように、ラベルの属性の設定

例

<form method="post" action="demoform.asp" >
  <label for="fname"> First name: </label>
  <input type="text" name="fname" id="fname" >
</form>
»それを自分で試してみてください

ヒント：入力フィールドの期待値を説明する短いヒントを指定するには、プレースホルダを使用します。

例

<label for="fname">First name:</label>
<input type="text" name="fname" id="fname" placeholder="First name..." >
»それを自分で試してみてください

ヒント：ラベルを非表示にするには、 "ui-hidden-accessible"クラス。 あなたは要素のplaceholder属性は、ラベルとして機能するようにしたいときによく使用されます。

例

<label for="fname" class="ui-hidden-accessible" ">First name:</label>
<input type="text" name="fname" id="fname" placeholder="First name..." >
»それを自分で試してみてください

ヒント：あなたがしたい場合は"clear button" （フィールドの内容をクリアし、入力フィールドの右側にあるXのアイコン）、データクリア-BTN = "true"属性を追加します。

例

<label for="fname">First name:</label>
<input type="text" name="fname" id="fname" data-clear-btn="true" >
»それを自分で試してみてください

"clear button" 、任意に追加することができます<input>を除いて、要素<textarea> 検索フィールドがに設定され、この属性が持っている"true"デフォルトとしてを-単に指定し、それを変更するにはdata-clear-btn="false" 。

jQueryのモバイルフォームのボタン

フォームのボタンは、標準的なHTMLで記述されている<input>要素（ボタン、リセット、提出します）。 これらは自動的には魅力的で使いやすいモバイルデバイスとデスクトップコンピュータの両方になって、スタイルを作られています。

例

<input type="button" value="Button">
<input type="reset" value="Reset Button">
<input type="submit" value="Submit Button">
»それを自分で試してみてください

さらに、<入力>ボタンのスタイルを設定するには、以下の表に記載されているデーター*属性のいずれかを使用します。

太字の値はデフォルト値を示しています。

属性 値 説明
data-corners true | false ボタンは丸い角を持っているかいないかどうかを指定します
data-icon Icons Reference ボタンのアイコンを指定します。
data-iconpos left | right | top | bottom | notext アイコンの位置を指定します。
data-inlinetrue | false ボタンはインラインすべきか否かを指定します
data-minitrue | false ボタンは小さくすべきか否かを指定します
data-shadow true | false ボタンは影を持っているかいないかどうかを指定します

含めるまたは属性（複数可）あなたは/したくないたくを除外：

<input type="submit" value="Submit" data-icon="check" data-iconpos="right" data-inline="true">
»それを自分で試してみてください

Field Containers

ラベルとフォーム要素は、より広い画面上で正しく見えるようにするには、ラップ<div>や<fieldset>を持つ要素を"ui-field-contain"ラベル/フォーム要素の周りのクラス：

例

<form method="post" action="demoform.asp">
  <div class="ui-field-contain" >
    <label for="fname">First name:</label>
    <input type="text" name="fname" id="fname">
    <label for="lname">Last name:</label>
    <input type="text" name="lname" id="lname">
  </div>
</form>
»それを自分で試してみてください

"ui-field-contain"ページの幅に基づいて、クラススタイルのラベルとフォーム・コントロールを。 ページの幅が480PXより大きい場合には、自動的にフォームコントロールと同じ行のラベルを配置します。 480PX未満の場合には、ラベルはフォーム要素の上に配置されます。

ヒント：使用して、自動的にスタイルタップ可能/クリック可能な要素にjQueryのモバイルを防止するためにdata-role="none"属性を：

例

<label for="fname">First name:</label>
<input type="text" name="fname" id="fname" data-role="none" >
»それを自分で試してみてください

jQueryのモバイルでのフォームの送信

jQueryのモバイルは、自動的にAJAXを介して、フォームの送信を処理すると、アプリケーションのDOMへのサーバーの応答を統合しようとします。


❮前 次の章❯