Gruppo di controllo verticale, icona a sinistra, menu Select di dimensioni ridotte

Descrizione

Includere l' attributo data-mini = "true" nel fieldset per creare il menu di selezione del gruppo orizzontale nella dimensione mini.

Esempio

L'esempio seguente mostra l'uso del gruppo di controllo orizzontale, menu di selezione di dimensioni ridotte in 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>Horizontal Controlgroup mini size Example</h2>
      <fieldset data-role = "controlgroup" data-type = "horizontal" data-mini = "true">
         
         <label for = "select">Select</label>
         <select id = "select" data-native-menu = "false">
            <option value = "#">Maharastra</option>
            <option value = "#">Thane</option>
            <option value = "#">Mumbai</option>
            <option value = "#">Pune</option>
         </select>

         <label for = "select1">Select</label>
         <select id = "select1" data-native-menu = "false">
            <option value = "#">Karnataka</option>
            <option value = "#">Hubli</option>
            <option value = "#">Bangalore</option>
            <option value = "#">Belgaum</option>
         </select>

         <label for = "select2">Select</label>
         <select id = "select2" data-native-menu = "false">
            <option value = "#">Tamil Nadu</option>
            <option value = "#">Madurai</option>
            <option value = "#">Chennai</option>
            <option value = "#">Ooty</option>
         </select>
         
      </fieldset>
   </body>
</html>

Produzione

Eseguiamo i seguenti passaggi per vedere come funziona il codice sopra:

  • Salva il codice html sopra come selectmenu_custom_horizontal_controlgroup_mini.html file nella cartella principale del server.

  • Apri questo file HTML come http: //localhost/selectmenu_custom_horizontal_controlgroup_mini.html e verrà visualizzato il seguente output.