Demos: Controlgroup: Adding example of a pre-rendered controlgroup.

Author: Gabriel Schulhof

demos/widgets/controlgroups/index.php

@@ -350,6 +350,22 @@
 					</form>
 				</div><!--/demo-html -->
 
+		<h2>Pre-rendered markup</h2>
+		<p>You can supply pre-rendered markup for any controlgroup to save startup time. The example below illustrates the markup you have to provide for a pre-rendered controlgroup. Note that the widgets inside the controlgroup need not necessarily be pre-rendered.</p>
+		<div data-demo-html="true">
+			<div data-role="controlgroup" data-enhanced="true" data-theme="b" data-corners="true" data-shadow="true" class="ui-controlgroup ui-controlgroup-vertical ui-group-theme-b ui-corner-all">
+				<div role="heading" class="ui-controlgroup-label">
+					<legend>Pre-rendered controlgroup</legend>
+				</div>
+				<div class="ui-controlgroup-controls ui-shadow">
+					<label for="pre-rendered-cb-1" class="ui-first-child">Checkbox 1</label>
+					<input type="checkbox" id="pre-rendered-cb-1" name="pre-rendered-cb-1" value="1"></input>
+					<label for="pre-rendered-cb-2" class="ui-last-child">Checkbox 2</label>
+					<input type="checkbox" id="pre-rendered-cb-2" name="pre-rendered-cb-2" value="2"></input>
+				</div>
+			</div>
+		</div>
+
 	</div><!-- /content -->
 
     <div data-role="footer" class="jqm-footer">