jQuery Mobile - Widget de posición del icono de radio

Descripción

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

Ejemplo

El siguiente ejemplo demuestra el uso de la posición del icono del botón de radio 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>
      <form>
         <h2>Radio Icon Position Example</h2>
         <fieldset data-role = "controlgroup" data-iconpos = "right">
            <input type = "radio" id = "radio1" name = "radio-choice-0" checked = "checked" />
            <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>

Salida

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

  • Guarde el código html anterior como radio_icon.html archivo en la carpeta raíz de su servidor.

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