Derniers tutoriels de développement web
 

jQuery Mobile Select Menus


jQuery Mobile Sélectionnez Menus

Sélectionnez Menu sur un Iphone:
Sélectionnez Menu sur un Android/SGS4 dispositif:

Le <select> élément crée une liste déroulante avec plusieurs options.

La <option> éléments à l' intérieur du <select> élément définir les options disponibles dans la liste:

Exemple

<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>
Essayez - le vous - même »

Astuce: Si vous avez une longue liste d'options qui sont liés, utilisez le <optgroup> élément à l' intérieur <select> :

Exemple

<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>
Essayez - le vous - même »

Personnalisé Sélectionnez Menus

Les images haut de cette page, montre comment les plates-formes mobiles ont leur propre façon de montrer un menu de sélection.

Si vous voulez que le menu de sélection pour afficher le même sur tous les appareils mobiles, utiliser propre menu de sélection personnalisée de jQuery, le data-native-menu="false" attribut:

Exemple

<select name="day" id="day" data-native-menu="false" >
Essayez - le vous - même »

Sélections multiples

Pour sélectionner plusieurs options dans le menu de sélection, utilisez l'attribut multiple dans le <select> élément:

Exemple

<select name="day" id="day" multiple data-native-menu="false">
Essayez - le vous - même »

Autres exemples

Utilisation de data-role="controlgroup"
Comment un groupe ou plusieurs menus de sélection.

Utilisation data-type="horizontal"
Comment les menus de sélection de groupe à l'horizontale.

Utilisation data-type="mini"
Comment rapetisser un menu de sélection.

Pré-options sélectionnées
Comment pré-sélectionner une option.

Popup Sélections
Comment créer un menu de sélection contextuel.

Formulaires pliables
Comment créer des formes pliables.

Modification de l'icône de sélection par défaut
Comment changer l'icône des menus de sélection (par défaut est "arrow-d" ).

Changement de la position de l' icône
Comment changer la position de l' icône des menus de sélection (par défaut à right ).