jQuery Mobile - Controlli del modulo di scorrimento

Descrizione

Il dispositivo di scorrimento consente di scegliere un valore numerico da un intervallo di valori. Il dispositivo di scorrimento ti fornisce una maniglia per scorrere e selezionare un valore.

Esempio

L'esempio seguente dimostra l'uso del controllo del dispositivo di scorrimento del modulo 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>
      <div data-role = "page">
         <div data-role = "header">
            <h2>Form Multiple Selection</h2>
         </div>
         
         <div data-role = "main" class = "ui-content">
            <form method = "POST" action = "sliderdemo.php">
               <label for = "slider1">Simple Slider</label>
               <input type = "range" name = "slider1" id = "slider1" min = "0" max = "100" value = "60">

               <label for = "range-1">Show Value:</label>
               <input type = "range" name = "range-1" id = "range-1" min = "0" max = "100" value = "20" data-show-value = "true">

               <label for = "range-2">Popup Value:</label>
               <input type = "range" name = "range-2" id = "range-2" min = "0" max = "100" value = "60" data-popup-enabled = "true">

               <label for = "range-3">Highlight slider:</label>
               <input type = "range" name = "range-3" id = "range-3" min = "0" max = "100" value = "30" data-highlight = "true">

               <input type = "submit" value = "Submit" name = "submit" data-inline = "true">
            </form>
         </div>
      </div>
      
   </body>
</html>

Produzione

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

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

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