jQueryモバイルフォームの基本
jQuery Mobile は、HTML フォームを自動的にスタイル設定して、より魅力的でタッチしやすいものにします。
jQuery Mobile フォームの構造
jQuery Mobile は、CSS を使用して HTML フォーム要素のスタイルを設定し、より魅力的で使いやすくしています。
jQuery Mobile では、次のフォーム コントロールを使用できます:
テキスト入力ボックス
検索入力ボックス
ラジオボタン
チェックボックス
メニューの選択
スライダー
フリップトグルスイッチ
jQuery Mobile フォームを使用するときは、次のことを知っておく必要があります:
<form> 要素にはメソッドとアクション属性が必要です
各 Form 要素には一意の "id" が必要です" 属性。 ID はサイトのすべてのページで一意である必要があります。これは、jQuery Mobile の単一ページ ナビゲーション メカニズムにより、複数の異なるページを同時にレンダリングできるためです
各フォーム要素にはラベルが必要です。要素の id
インスタンス
タグを非表示にするには、クラス ui-hidden-accessible を使用します。これは、要素のプレースホルダー属性をラベルとして使用する場合によく使用されます: <form method="post" action="demoform.html">
<label for="fname">姓名:</label>
<input type="text" name="fname" id="fname">
</form>
) 入力ボックスをクリアするボタンは、 <input> 要素ですが、<textarea> にはありません。 検索ボックスの data-clear-btn のデフォルト値は「true」です。data-clear-btn="false" を使用してアイコンを削除できます。
jQuery モバイル フォーム アイコン
フォーム内のボタン コードは、標準の HTML <input> 要素 (ボタン、 リセット、送信)。スタイルは自動的にレンダリングされ、モバイル デバイスとデスクトップ デバイスに自動的に適応します:
Example
<form method="post" action="demoform.html"> <label for="fname" class="ui-hidden-accessible">姓名:</label> <input type="text" name="fname" id="fname" placeholder="姓名..."> </form>
<input> ボタンに追加のスタイルを追加する必要がある場合は、次のコマンドを使用できます。 table data-* 属性:
| 属性 | 値 | 説明 |
|---|---|---|
| data-corners | true | ボタンの角が丸いかどうかを指定します | |
| アイコンリファレンス ハンドブック ボタンアイコンを指定します | 左 | 上右 |
| Data-Inline | | かどうかを指定しますリンクされたボタン内にあります | data-mini |
| false | ミニボタンかどうかを指定します | data-shadow |
| true | | falseボタンに影を追加するかどうかを指定します効果 | |
| 例 |
フィールドコンテナ ラベルとフォーム要素をワイドスクリーンに適したものにするには、< を "ui- field-contain" クラス ;div> または <fieldset> 要素がラベル/フォーム要素を囲みます:
インスタンス
<input type="button" value="按钮"> <input type="reset" value="重置按钮"> <input type="submit" value="提交按钮">
ui-field-contain クラスはページ幅に基づいていますラベルとフォーム コントロールの場合 スタイルを追加します。ページ幅が 480 ピクセルを超える場合、ラベルはフォーム コントロールと同じ行に自動的に配置されます。ページ幅が 480px 未満の場合、ラベルはフォーム要素の上に配置されます。
| jQuery Mobile でのフォーム送信 | jQuery Mobile は、AJAX 経由でフォーム送信を自動的に処理し、サーバーの応答をアプリケーションの DOM に統合しようとします。 |
|---|
