jQuery Mobile: posición del icono de casilla de verificación

Descripción

La posición del botón del icono de casilla de verificación se puede establecer en el lado derecho usando data-iconpos = "right"atributo al conjunto de campos . De forma predeterminada, el icono de la casilla de verificación se establece en el lado izquierdo.

Ejemplo

El siguiente ejemplo demuestra el uso de la casilla de verificación de la posición del icono 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>Icon Position Example</h2>
      <form>
         <fieldset data-role = "controlgroup" data-iconpos = "right">
            <input type = "checkbox" id = "checkbox 1" />
            <label for = "checkbox 1">Checkbox 1</label>

            <input type = "checkbox" id = "checkbox 2" />
            <label for = "checkbox 2">Checkbox 2</label>

            <input type = "checkbox" id = "checkbox 3" />
            <label for = "checkbox 3">Checkbox 3</label>
         </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 icon_position.html archivo en la carpeta raíz de su servidor.

  • Abra este archivo HTML como http: //localhost/icon_position.html y se mostrará el siguiente resultado.