buttonMarkup: Fixed the broken link in buttonMarkup API of 1-4 branch.

categories.xml

@@ -2,7 +2,22 @@
 	<category name="Uncategorized" slug="uncategorized"/>
 	<category name="Widgets" slug="widgets">
 		<desc><![CDATA[
-			<p>Widgets are feature-rich, stateful plugins that have a full life-cycle, along with methods and events. Check out the <a href="/jQuery.widget/">widget factory</a> documentation for more details.</p>
+			<p>Widgets are feature-rich, stateful plugins that have a full life-cycle, along with methods and events. Check out the <a href="/jQuery.widget/">widget factory</a> documentation for more details.
+				<div style="padding: 0.5em 1em; margin: 1em; background: #FFF3A5;"><strong>Note</strong>: The base widget (<code>$.mobile.widget</code>) is deprecated as of 1.4 and will be removed in 1.5. It is now sufficient to base your custom jQuery Mobile widgets on the jQuery UI <a href="http://api.jqueryui.com/jQuery.widget">widget factory</a> itself. This means that in your call to <code>$.widget()</code> you can omit the base altogether.
+					<pre><code>
+$.widget( "my.widget", /* NOTE: no base needed */ {
+  options: {
+    /* ... */
+  },
+
+  _create: function() {
+    /* ... */
+  }
+
+  /* ... */
+});</code></pre>
+				</div>
+			</p>
 ]]></desc>
 	</category>
 	<category name="Events" slug="events">
@@ -13,6 +28,11 @@
 		<desc><![CDATA[
 			<p>jQuery Mobile exposes several methods and properties on the $.mobile object for use in your applications.</p>]]></desc>
 	</category>
+	<category name="CSS Framework" slug="css-framework">
+		<desc><![CDATA[
+			<p>jQuery Mobile offers CSS-based enhancements for common user interface elements.</p>]]>
+		</desc>
+	</category>
 	<category name="Miscellaneous" slug="misc">
 		<desc></desc>
 	</category>

entries/checkboxradio.xml

@@ -1,13 +1,13 @@
 <?xml version="1.0"?>
 <?xml-stylesheet type="text/xsl" href="../entries2html.xsl" ?>
-<entry name="checkboxradio" namespace="fn" type="widget" widgetnamespace="mobile" event-prefix="checkboxradio">
+<entry name="checkboxradio" namespace="fn" type="widget" widgetnamespace="mobile" event-prefix="checkboxradio" init-selector="input:not( :jqmData(role='flipswitch' ) )[type='checkbox'],input[type='radio']:not( :jqmData(role='flipswitch' ))">
 	<title>Checkboxradio Widget</title>
 	<desc>Creates a checkboxradio widget</desc>
 	<longdesc>
 		<h2>Checkboxes</h2>
-		<p>Checkboxes are used to provide a list of options where more than one can be selected. Traditional desktop checkboxes are not optimized for touch input so in jQuery Mobile, we style the <code>label</code> for the checkboxes so they are larger and look clickable. A custom set of icons are added to the label to provide additional visual feedback. </p>
+		<p>Checkboxes are used to provide a list of options where more than one can be selected. Traditional desktop checkboxes are not optimized for touch input so in jQuery Mobile, we style the <code>label</code> for the checkboxes so they are larger and look clickable. A custom set of icons are added to the label to provide additional visual feedback.</p>
 		<p>The checkbox controls below use standard input/label markup, but are styled to be more touch-friendly. The styled control you see is actually the label element, which sits over the real input, so if images fail to load, you'll still have a functional control. In most browsers, clicking the label automatically triggers a click on the input, but we've had to trigger the update manually for a few mobile browsers that don't do this natively. On the desktop, these controls are keyboard and screen-reader accessible.</p>
-		<p>To create a single checkbox, add an <code>input</code> with a <code>type="checkbox"</code> attribute and a corresponding <code>label</code>. If the <code>input</code> isn’t wrapped in its corresponding <code>label</code>, be sure to set the <code>for</code> attribute of the <code>label</code> to match the <code>id</code> of the <code>input</code> so they are semantically associated.</p>
+		<p>To create a single checkbox, add an <code>input</code> with a <code>type="checkbox"</code> attribute and a corresponding <code>label</code>. If the <code>input</code> isn't wrapped in its corresponding <code>label</code>, be sure to set the <code>for</code> attribute of the <code>label</code> to match the <code>id</code> of the <code>input</code> so they are semantically associated.</p>
 
 <pre><code>
 &lt;label&gt;&lt;input type="checkbox" name="checkbox-0" /&gt; I agree &lt;/label&gt;
@@ -20,7 +20,7 @@
 
 		<h3>Mini version</h3>
 
-		<p>For a more compact version that is useful in toolbars and tight spaces, add the <code>data-mini="true"</code> attribute to the element to create a mini version. </p>
+		<p>For a more compact version that is useful in toolbars and tight spaces, add the <code>data-mini="true"</code> attribute to the element to create a mini version.</p>
 
 <pre><code>
 &lt;input type="checkbox" name="checkbox-mini" id="checkbox-mini-1" class="custom" data-mini="true" /&gt;
@@ -32,10 +32,13 @@
 
 		<h3>Field containers &amp; Legends</h3>
 
+		<p>Optionally wrap the checkboxes in a container with class <code>ui-field-contain</code> to help visually group it in a longer form.</p>
+		<p><strong>Note: The <code>data-</code> attribute <code>data-role="fieldcontain"</code> is deprecated as of jQuery Mobile 1.4.0 and will be removed in 1.5.0. Add class <code>ui-field-contain</code> instead.</strong></p>
+
 		<p>Because checkboxes use the <code>label</code> element for the text displayed next to the checkbox form element, we recommend wrapping the checkbox in a <code>fieldset</code> element that has a <code>legend</code> which acts as the title for the question. Add the <code>data-role="controlgroup"</code> attribute to the <code>fieldset</code> so it can be styled in a parallel way as text inputs, selects or other form elements.</p>
 
 <pre><code>
-&lt;div data-role="fieldcontain"&gt;
+&lt;div class="ui-field-contain"&gt;
 	&lt;fieldset data-role="controlgroup"&gt;
 		&lt;legend&gt;Agree to the terms:&lt;/legend&gt;
 		&lt;input type="checkbox" name="checkbox-2" id="checkbox-2" class="custom" /&gt;
@@ -47,7 +50,7 @@
 
 		<h3>Vertically grouped checkboxes</h3>
 
-		<p>Checkboxes can also be used for grouped button sets where more than one button can be selected at once, such as the bold, italic and underline button group seen in word processors. To make a horizontal button set, add the <code>data-type="horizontal"</code> to the <code>fieldset</code>. 
+		<p>Checkboxes can also be used for grouped button sets where more than one button can be selected at once, such as the bold, italic and underline button group seen in word processors. To make a horizontal button set, add the <code>data-type="horizontal"</code> to the <code>fieldset</code>.
 		<iframe src="/resources/checkbox/example4.html" style="width:100%;height:220px;border:0px"></iframe></p>
 
 <pre><code>
@@ -57,11 +60,11 @@
 		<p>The framework will float the labels so they sit side-by-side on a line, hide the checkbox icons and only round the left and right edges of the group.<iframe src="/resources/checkbox/example5.html" style="width:100%;height:100px;border:0px"></iframe></p>
 
 		<h2>Radio buttons</h2>
-		<p>Radio buttons are used to provide a list of options where only a single item can be selected. Traditional desktop radio buttons are not optimized for touch input so jQuery Mobile styles the <code>label</code> for the radio buttons so they are larger and look clickable. A custom set of icons are added to the label to provide additional visual feedback. </p>
+		<p>Radio buttons are used to provide a list of options where only a single item can be selected. Traditional desktop radio buttons are not optimized for touch input so jQuery Mobile styles the <code>label</code> for the radio buttons so they are larger and look clickable. A custom set of icons are added to the label to provide additional visual feedback.</p>
 		<p>The radio button controls below use standard input/label markup, but are styled to be more touch-friendly. The styled control you see is actually the label element, which sits over the real input, so if images fail to load, you'll still have a functional control. In most browsers, clicking the label automatically triggers a click on the input, but we've had to trigger the update manually for a few mobile browsers that don't do this natively. On the desktop, these controls are keyboard and screen-reader accessible.</p>
 
 		<h3>Vertically grouped radio buttons</h3>
-		
+
 		<p>To create a set of radio buttons, add an input with a type="radio" attribute and a corresponding label. Set the for attribute of the label to match the id of the input so they are semantically associated.</p>
 		<p>The label element is displayed next to the radio form element. Wrap the radio buttons in a fieldset element that has a legend which acts as the title for the question.</p>
 		<p>To visually integrate multiple radio buttons into a vertically grouped button set, the framework will automatically remove all margins between buttons and round only the top and bottom corners of the set if there is a data-role="controlgroup" attribute on the container.</p>
@@ -108,10 +111,11 @@
 
 		<h3>Field containers</h3>
 
-		<p>Optionally wrap the radiobuttons in a container with the <code>data-role="fieldcontain"</code> attribute to help visually group it in a longer form.</p>
+		<p>Optionally wrap the radio buttons in a container with class <code>ui-field-contain</code> to help visually group it in a longer form.</p>
+		<p><strong>Note: The <code>data-</code> attribute <code>data-role="fieldcontain"</code> is deprecated as of jQuery Mobile 1.4.0 and will be removed in 1.5.0. Add class <code>ui-field-contain</code> instead.</strong></p>
 
 <pre><code>
-&lt;div data-role="fieldcontain"&gt;
+&lt;div class="ui-field-contain"&gt;
 	&lt;fieldset data-role="controlgroup"&gt;
 		&lt;legend&gt;Choose a pet:&lt;/legend&gt;
 		&lt;input type="radio" name="radio-choice-2" id="radio-choice-21" value="choice-1" checked="checked" /&gt;
@@ -142,46 +146,50 @@
 		<iframe src="/resources/radiobutton/example4.html" style="width:100%;height:90px;border:0px"></iframe>
 
 		<p>The labels float so they sit side-by-side on a line. The radio button icons are hidden and only the left and right edges of the group are rounded.</p>
-
+
+		<xi:include href="../includes/pre-rendered-common.xml" xmlns:xi="http://www.w3.org/2003/XInclude"/>
+		<p>The checkboxradio widget wraps the <code>input</code> element in a <code>div</code> and prepends the <code>label</code> element to the <code>div</code>.</p>
+		<p>In the example below, pre-rendered markup for a checkbox is provided. The attribute <code>data-corners="false"</code> is explicitly specified, since the absence of the <code>ui-corner-all</code> class on the <code>label</code> element indicates that the value of the "corners" widget option is to be false.</p>
+
+<pre><code>
+&lt;div class="ui-checkbox"&gt;
+	&lt;label for="my-checkbox" class="ui-btn ui-btn-inherit ui-btn-icon-left ui-checkbox-off"&gt;My Checkbox&lt;/label&gt;
+	&lt;input type="checkbox" id="my-checkbox" data-corners="false" data-enhanced="true"&gt;&lt;/input&gt;
+&lt;/div&gt;
+</code></pre>
+
+<iframe src="/resources/checkbox/example6.html" style="width:100%;height:90px;border:0px"></iframe>
+
 	</longdesc>
 	<added>1.0</added>
 	<options>
-		<option name="mini" default="false" example-value="true">
-			<desc>Sets the size of the element to a more compact, mini version.
-				<p>This option is also exposed as a data attribute: <code>data-mini="true"</code>.</p>
+		<xi:include href="../includes/widget-option-disabled.xml" xmlns:xi="http://www.w3.org/2003/XInclude"/>
+		<xi:include href="../includes/widget-option-enhanced.xml" xmlns:xi="http://www.w3.org/2003/XInclude"/>
+		<option name="iconpos" default='"left"' example-value='"right"'>
+			<desc>Allows you to specify on which side of the checkbox or radio button the checkmark/radio icon will appear.
+				<p>This option is also exposed as a data attribute: <code>data-iconpos="right"</code>.</p>
 			</desc>
-			<type name="Boolean" />
+			<type name="String" />
 		</option>
-		<option name="theme" default="null, inherited from parent" example-value='"a"'>
-			<desc>Sets the color scheme (swatch) for all instances of this widget. It accepts a single letter from a-z that maps to the swatches included in your theme. By default, it will inherit the same swatch color as its parent container if not explicitly set.
-
-				<p>Possible values: swatch letter (a-z).</p>
-				<p>This option is also exposed as a data attribute: <code>data-theme="a"</code>.</p>
+		<xi:include href="../includes/widget-option-initSelector.xml" xmlns:xi="http://www.w3.org/2003/XInclude"/>
+		<xi:include href="../includes/widget-option-mini.xml" xmlns:xi="http://www.w3.org/2003/XInclude"/>
+		<option name="wrapperClass" default="null" example-value='"custom-class"'>
+			<desc>It is difficult to write custom CSS for the wrapper <code>div</code> around the native <code>input</code> element generated by the framework. This option allows you to specify one or more space-separated class names to be added to the wrapper <code>div</code> element by the framework.
+				<p>This option is also exposed as a data attribute: <code>data-wrapper-class="custom-class"</code>.</p>
 			</desc>
-			<type name="String" />
 		</option>
 	</options>
 	<events>
-		<event name="create">
-			<desc>triggered when a checkboxradio is created</desc>
-			<argument name="event" type="Event">
-			</argument>
-			<argument name="ui" type="Object">
-			</argument>
-		</event>
+		<xi:include href="../includes/widget-event-create.xml" xmlns:xi="http://www.w3.org/2003/XInclude"/>
 	</events>
 	<methods>
-		<method name="enable">
-			<desc>enable a disabled checkboxradio.
-			</desc>
-		</method>
-		<method name="disable">
-			<desc>disable a checkboxradio.
-			</desc>
-		</method>
+		<xi:include href="../includes/widget-method-destroy.xml" xmlns:xi="http://www.w3.org/2003/XInclude"/>
+		<xi:include href="../includes/widget-method-disable.xml" xmlns:xi="http://www.w3.org/2003/XInclude"/>
+		<xi:include href="../includes/widget-method-enable.xml" xmlns:xi="http://www.w3.org/2003/XInclude"/>
+		<xi:include href="../includes/widget-method-option.xml" xmlns:xi="http://www.w3.org/2003/XInclude"/>
 		<method name="refresh">
 		<example>$( ".selector" ).prop( "checked", true ).checkboxradio( "refresh" );</example>
-		 
+
 			<desc>update the checkboxradio.
 				<p>If you manipulate a checkboxradio via JavaScript, you must call the refresh method on it to update the visual styling. </p>
 			</desc>
@@ -193,14 +201,14 @@
 		<h1>jQuery Mobile Example</h1>
 	</div>
 	<div data-role="content">
-		<div data-role="fieldcontain">
+		<div class="ui-field-contain">
 			<form>
 				<fieldset data-role="controlgroup">
 					<legend>Agree to the terms:</legend>
 					<input type="checkbox" name="checkbox-2" id="checkbox-2" class="custom" />
 					<label for="checkbox-2">I agree</label>
 				</fieldset>
-			</form>	
+			</form>
 		</div>
 	</div>	]]></html>
 	</example>
@@ -225,7 +233,7 @@
 
 				<input type="radio" name="radio-choice" id="radio-choice-4" value="choice-4" />
 				<label for="radio-choice-4">Lizard</label>
-			</fieldset> 
+			</fieldset>
 		</form>
 	</div>]]></html>
 	</example>