jQuery Mobile - Interruptor giratorio Fieldcontain

Descripción

Agregar la clase ui-field-contains al div garantizará que el formulario para mostrar el interruptor flip se renderice de manera receptiva.

Ejemplo

El siguiente ejemplo demuestra el uso de fieldcontain en flip switch en jQuery Mobile.

<!DOCTYPE html>
<html>
   <head>
      <title>Flip Switch Fieldcontain</title>
      <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>
         <div class = "ui-field-contain">
            <label for = "flip">Flip Toggle Switch:</label>
            
            <select name = "flip" id = "flip" data-role = "slider">
               <option value = "off">Off</option>
               <option value = "on">On</option>
            </select>
            
         </div>
      </form>
   </body>
</html>

Salida

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

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

↰ Previous page