Grupo vertical, mini menú de selección

Descripción

Incluya el atributo data-mini = "true" en el conjunto de campos para crear el menú de selección de grupo vertical en el tamaño mini.

Ejemplo

El siguiente ejemplo demuestra el uso del mini menú de selección de grupo vertical en jQuery Mobile.

<!DOCTYPE html>
<html>
   <head>
      <meta name = "viewport" content = "width = device-width, initial-scale = 1">
      <link rel = "stylesheet" href = "https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
      <script src = "https://code.jquery.com/jquery-1.11.3.min.js"></script>
      <script src = "https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
   </head>

   <body>
      <h2>Selectmenu vertical group mini Example</h2>
      <form>
         <fieldset data-role = "controlgroup" data-mini = "true">
            <legend>Vertical group menu</legend>

            <label for = "select">Select</label>
            <select data-iconpos = "left" id = "select">
               <option value = "#">Maharastra</option>
               <option value = "#">Mumbai</option>
               <option value = "#">Pune</option>
            </select>

            <label for = "select">Select</label>
            <select data-iconpos = "left" id = "select">
               <option value = "#">Karnataka</option>
               <option value = "#">Bangalore</option>
               <option value = "#">Belgaum</option>
            </select>

            <label for = "select">Select</label>
            <select data-iconpos = "left" id = "select">
               <option value = "#">Tamil Nadu</option>
               <option value = "#">Chennai</option>
               <option value = "#">Ooty</option>
            </select>
            
         </fieldset>
      </form>
   </body>
</html>

Salida

Realicemos los siguientes pasos para ver cómo funciona el código anterior:

Guarde el código html anterior como selectmenu_vertical_group_mini.html archivo en la carpeta raíz de su servidor.
Abra este archivo HTML como http: //localhost/selectmenu_vertical_group_mini.html y se mostrará el siguiente resultado.

↰ Previous page