Grupo horizontal, 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 horizontal en el tamaño mini.

Ejemplo

El siguiente ejemplo demuestra el uso del mini menú de selección de grupo horizontal 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 Horizontal Group Mini Example</h2>
      <form>
         <fieldset data-role = "controlgroup" data-type = "horizontal" data-mini = "true">
            <legend>Vertical group menu</legend>

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

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

            <label for = "select">Select</label>
            <select 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_horizontal_group_mini.html archivo en la carpeta raíz de su servidor.
Abra este archivo HTML como http: //localhost/selectmenu_horizontal_group_mini.html y se mostrará el siguiente resultado.

↰ Previous page