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

jQuery Mobileフォームの選択メニュー


jQueryのモバイルの選択メニュー

iPhone上でメニューを選択します。
上のメニューを選択Android/SGS4デバイス:

<select>要素のいくつかのオプションを持つドロップダウンリストを作成します。

<option>内の要素<select>要素のリストで使用できるオプションを定義します。

<form method="post" action="demoform.asp">
  <fieldset class="ui-field-contain">
    <label for="day">Select Day</label>
    <select name="day" id="day">
      <option value="mon">Monday</option>
      <option value="tue">Tuesday</option>
      <option value="wed">Wednesday</option>
    </select>
  </fieldset>
</form>
»それを自分で試してみてください

ヒント:あなたが関連しているオプションの長いリストを持っている場合は、使用<optgroup>内部要素を<select>

<select name="day" id="day">
  <optgroup label="Weekdays">
    <option value="mon">Monday</option>
    <option value="tue">Tuesday</option>
    <option value="wed">Wednesday</option>
  </optgroup>
  <optgroup label="Weekends">
    <option value="sat">Saturday</option>
    <option value="sun">Sunday</option>
  </optgroup>
</select>
»それを自分で試してみてください

カスタム選択メニュー

このページの一番上の画像は、モバイルプラットフォームは、選択メニューを表示する独自の方法を持っているかを示しています。

あなたは選択メニューがすべてのモバイルデバイスで同じように表示したい場合は、jQueryの独自のカスタム選択メニューを使用して、 data-native-menu="false"属性:

<select name="day" id="day" data-native-menu="false" >
»それを自分で試してみてください

複数選択

選択メニューで複数のオプションを選択するには、中に複数の属性を使用し<select>要素を:

<select name="day" id="day" multiple data-native-menu="false">
»それを自分で試してみてください

その他の例

使用するdata-role="controlgroup"
どのグループの一つ以上の選択メニューです。

使用するdata-type="horizontal"
どのようにグループ選択メニューに水平に。

使用するdata-type="mini"
どのように選択メニューを縮小化します。

あらかじめ選択されたオプション
どのように事前に選択したオプションに。

ポップアップ選択
どのようにポップアップ選択メニューを作成します。

折りたたみフォーム
折り畳み可能なフォームを作成する方法。

デフォルトの選択アイコンを変更します
選択メニューのアイコンを変更する方法(デフォルトは"arrow-d" )。

アイコンの位置を変更します
どのように(デフォルトでは、選択メニューのアイコンの位置を変更するright )。