jQuery Mobile - Widget radio di base

Descrizione

I pulsanti di opzione possono essere creati utilizzando il <input>elemento con un attributo type = "radio" e un'etichetta corrispondente. Imposta l'elemento di input confor attributo per abbinare l'etichetta id in modo che siano associati semanticamente.

Esempio

L'esempio seguente mostra l'uso del pulsante di opzione di base 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>
      <form>
         <h2>Basic Radio Example</h2>
         <fieldset data-role = "controlgroup">
            <input type = "radio" id = "radio1" name = "radio-choice-0" />
            <label for = "radio1">Radio 1</label>

            <input type = "radio" id = "radio2" name = "radio-choice-0" />
            <label for = "radio2">Radio 2</label>

            <input type = "radio" id = "radio3" name = "radio-choice-0" />
            <label for = "radio3">Radio 3</label>
         </fieldset>
      </form>
   </body>
</html>

Produzione

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

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

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