Marcado pre-renderizado de Controlgroup

Descripción

Puede utilizar el atributo renderizado previamente para ahorrar el tiempo de inicio en el grupo de control.

Ejemplo

El siguiente ejemplo describe el uso del marcado pre-renderizado de controlgroup en jQuery Mobile Framework.

<!DOCTYPE html>
<html>
   <head>
      <title>Controlgroup Pre-rendered Markup</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">
      <link rel = "stylesheet" href = "style.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>Pre-rendered Controlgroup</h2>
      <div data-role = "controlgroup" data-enhanced = "true" 
         class = "ui-controlgroup-controls ui-controlgroup-vertical ui-corner-all">
         <label for = "pre-rendered1">Checkbox 1</label>
         <input type = "checkbox" id = "pre-rendered1"  value = "val1" />
         
         <label for = "pre-rendered2">Checkbox 2</label>
         <input type = "checkbox" id = "pre-rendered2" value = "val2" />
      </div>
      
   </body>
</html>

Salida

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

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

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