Button: Updating for 1.4.0.

entries/button.xml

@@ -1,6 +1,6 @@
 <?xml version="1.0"?>
 <?xml-stylesheet type="text/xsl" href="../entries2html.xsl" ?>
-<entry name="buttonMarkup" namespace="fn" type="widget" widgetnamespace="mobile" event-prefix="button">
+<entry name="button" type="widget" widgetnamespace="mobile" event-prefix="button">
 	<title>Button Widget</title>
     <desc>Creates a button widget</desc>
     <longdesc>
@@ -16,10 +16,10 @@
 		<p>Produces this <strong>link-based</strong> button:
 		<iframe src="/resources/button/example1.html" style="width:100%;height:90px;border:0px"></iframe></p>
 
-		<p><strong>Note:</strong> Links styled like buttons have all the same visual options as true form-based buttons below, but there are a few important differences. Link-based buttons aren't part of the <code>button</code> plugin and only just use the underlying <code>buttonMarkup</code> plugin to generate the button styles so the form button methods (enable, disable, refresh) aren't supported. If you need to disable a link-based button (or any element), it's possible to apply the disabled class ui-disabled yourself with JavaScript to achieve the same effect.</p>
+		<p><strong>Note:</strong> Links styled like buttons have all the same visual options as true form-based buttons below, but there are a few important differences. Link-based buttons aren't part of the <code>button</code> plugin and only just use the underlying <code>buttonMarkup</code> plugin to generate the button styles so the form button methods (enable, disable, refresh) aren't supported. If you need to disable a link-based button (or any element), it's possible to apply the disabled class ui-state-disabled yourself with JavaScript to achieve the same effect.</p>
 
 <pre><code>
-&lt;a href=&quot;index.html&quot; data-role=&quot;button&quot; class=&quot;ui-disabled&quot;&gt;Link button&lt;/a&gt;
+&lt;a href=&quot;index.html&quot; data-role=&quot;button&quot; class=&quot;ui-state-disabled&quot;&gt;Link button&lt;/a&gt;
 </code></pre>
 
 		<p>Produces this disabled <strong>link-based</strong> button:
@@ -43,7 +43,7 @@
 		<p>For ease of styling, the framework automatically converts any <code>button</code> or <code>input</code> element with a <code>type</code> of <code>submit</code>, <code>reset</code>, or <code>button</code> into a custom styled button - there is no need to add the <code> data-role="button"</code> attribute. However, if needed, you can directly call the button plugin on any selector, just like any jQuery plugin:</p>
 
 <pre><code>
-$( "[type="submit"]" ).button();
+$( "[type='submit']" ).button();
 </code></pre>
 
 		<p><strong>Button</strong> based button:</p>
@@ -78,8 +78,7 @@ $( "[type="submit"]" ).button();
         <h2>Adding Icons to Buttons</h2>
 		<p>The jQuery Mobile framework includes a selected set of icons most often needed for mobile apps. To minimize download size, jQuery Mobile includes a single white icon sprite, and automatically adds a semi-transparent black circle behind the icon to ensure that it has good contrast on any background color.</p>
 
-
-			<p>An icon can be added to a button by adding a <code> data-icon</code> attribute on the anchor specifying the icon to display.  For example, the following markup:</p>
+			<p>An icon can be added to a button by adding a <code>data-icon</code> attribute on the anchor specifying the icon to display. For example:</p>
 
 <pre><code>
 &lt;a href=&quot;index.html&quot; data-role=&quot;button&quot; data-icon=&quot;delete&quot;&gt;Delete&lt;/a&gt;
@@ -89,21 +88,21 @@ $( "[type="submit"]" ).button();
 
 			<h3>Icon set</h3>
 
-			<p>The following <code> data-icon</code> attributes can be referenced to create the icons shown below:
+			<p>The following <code>data-icon</code> attributes can be referenced to create the icons shown below:
 			<iframe src="/resources/button/example10.html" style="width:100%;height:1840px;border:0px"></iframe></p>
 
 			<h3>Icon positioning</h3>
 			<p>By default, all icons in buttons are placed to the left of the button text.
 			<iframe src="/resources/button/example11.html" style="width:100%;height:90px;border:0px"></iframe></p>
 
-			<p>This default may be overridden using the <code> data-iconpos</code> attribute to set the icon to the right, above (top) or below (bottom) the text. For example, the markup:</p>
+			<p>This default may be overridden using the <code>data-iconpos</code> attribute to set the icon to the right, above (top) or below (bottom) the text. For example:</p>
 <pre><code>
 &lt;a href=&quot;index.html&quot; data-role=&quot;button&quot; data-icon=&quot;delete&quot; data-iconpos=&quot;right&quot;&gt;Delete&lt;/a&gt;
 </code></pre>
 
 			<iframe src="/resources/button/example12.html" style="width:100%;height:360px;border:0px"></iframe>
 
-			<p>You can also create an icon-only button, by setting the <code> data-iconpos</code> attribute to <code>notext</code>. The button plugin will hide the text on-screen, but add it as a <code>title</code> attribute on the link to provide context for screen readers and devices that support tooltips. For example, replacing <code> data-iconpos="right"</code> on the previous example with <code> data-iconpos="notext"</code>:</p>
+			<p>You can also create an icon-only button, by setting the <code>data-iconpos</code> attribute to <code>notext</code>. The button plugin will hide the text on-screen, but add it as a <code>title</code> attribute on the link to provide context for screen readers and devices that support tooltips. For example, replacing <code> data-iconpos="right"</code> on the previous example with <code>data-iconpos="notext"</code>:</p>
 
 <pre><code>
 &lt;a href=&quot;index.html&quot; data-role=&quot;button&quot; data-icon=&quot;delete&quot; data-iconpos=&quot;notext&quot;&gt;Delete&lt;/a&gt;
@@ -117,7 +116,7 @@ $( "[type="submit"]" ).button();
 			<iframe src="/resources/button/example16.html" style="width:100%;height:90px;border:0px"></iframe></p>
 
 			<h3>Custom Icons</h3>
-			<p>To use custom icons, specify a <code>data-icon</code> value that has a unique name like <code>myapp-email</code> and the button plugin will generate a class by prefixing <code>ui-icon-</code> to the <code> data-icon</code> value and apply it to the button: <code>ui-icon-myapp-email</code>. </p>
+			<p>To use custom icons, specify a <code>data-icon</code> value that has a unique name like <code>myapp-email</code> and the button plugin will generate a class by prefixing <code>ui-icon-</code> to the <code>data-icon</code> value and apply it to the button: <code>ui-icon-myapp-email</code>.</p>
 			<p>You can then write a CSS rule in your stylesheet that targets the <code>ui-icon-myapp-email</code> class to specify the icon background source. To maintain visual consistency with the rest of the icons, create a white icon 18x18 pixels saved as a PNG-8 with alpha transparency.</p>
 			<p>In this example, we're just pointing to a standalone icon image, but you could just as easily use an icon sprite and specify the positioning instead, just like the icon sprite we use in the framework.</p>
 
@@ -147,15 +146,13 @@ $( "[type="submit"]" ).button();
 		<p>By default, all buttons in the body content are styled as block-level elements so they fill the width of the screen:
 		<iframe src="/resources/button/example20.html" style="width:100%;height:250px;border:0px"></iframe></p>
 
-
-		<p>If you have multiple buttons that should sit side-by-side on the same line, add the <code> data-inline="true"</code> attribute to each button. This will style the buttons to be the width of their content and float the buttons so they sit on the same line. </p>
+		<p>If you have multiple buttons that should sit side-by-side on the same line, add the <code>data-inline="true"</code> attribute to each button. This will style the buttons to be the width of their content and float the buttons so they sit on the same line.</p>
 
 <pre><code>
 &lt;a href=&quot;index.html&quot; data-role=&quot;button&quot; data-inline=&quot;true&quot;&gt;Cancel&lt;/a&gt;
 &lt;a href=&quot;index.html&quot; data-role=&quot;button&quot; data-inline=&quot;true&quot; data-theme=&quot;b&quot;&gt;Save&lt;/a&gt;
 </code></pre>
 
-
 		<iframe src="/resources/button/example22.html" style="width:100%;height:220px;border:0px"></iframe>
 
 		<p>If you want buttons to sit side-by-side but stretch to fill the width of the screen, you can use the content column grids to put normal full-width buttons into 2- or 3-columns.</p>
@@ -166,7 +163,7 @@ $( "[type="submit"]" ).button();
 
 		<h2>Grouped buttons</h2>
 
-		<p>Occasionally, you may want to visually group a set of buttons to form a single block that looks contained like a navigation component. To get this effect, wrap a set of buttons in a container with the <code> data-role="controlgroup"</code> attribute - the framework will create a vertical button group, remove all margins and drop shadows between the buttons, and only round the first and last buttons of the set to create the effect that they are grouped together. </p>
+		<p>Occasionally, you may want to visually group a set of buttons to form a single block that looks contained like a navigation component. To get this effect, wrap a set of buttons in a container with the <code>data-role="controlgroup"</code> attribute - the framework will create a vertical button group, remove all margins and drop shadows between the buttons, and only round the first and last buttons of the set to create the effect that they are grouped together.</p>
 
 <pre><code>
 &lt;div data-role=&quot;controlgroup&quot;&gt;
@@ -189,11 +186,11 @@ $( "[type="submit"]" ).button();
 
 		<h2>Theming buttons</h2>
 
-		<p>jQuery Mobile has a rich theming system that gives you full control of how buttons are styled. When a link is added to a container, it is automatically assigned a theme swatch letter that matches its parent bar or content box to visually integrate the button into the parent container, like a chameleon. So a button placed inside a content container with a theme of "a" (black in the default theme) will be automatically assigned the button theme of "a" (charcoal in the default theme). Here are examples of the button theme pairings in the default theme. All buttons have the same HTML markup:
+		<p>jQuery Mobile has a rich theming system that gives you full control of how buttons are styled. When a link is added to a container, it is automatically assigned a theme swatch letter that matches its parent bar or content box to visually integrate the button into the parent container, like a chameleon. So a button placed inside a content container with a theme of "a" will be automatically assigned the button theme of "a". Here are examples of the button theme pairings in the default theme. All buttons have the same HTML markup:
 		<iframe src="/resources/button/example33.html" style="width:100%;height:640px;border:0px"></iframe></p>
 
 		<h2>Assigning theme swatches</h2>
-		<p>Buttons can be manually assigned any of the button color swatches from the theme to add visual contrast with the container they sit inside by adding the <code> data-theme</code> attribute on the button markup and specifying a swatch letter. </p>
+		<p>Buttons can be manually assigned any of the button color swatches from the theme to add visual contrast with the container they sit inside by adding the <code>data-theme</code> attribute on the button markup and specifying a swatch letter.</p>
 
 <pre><code>
 &lt;a href=&quot;index.html&quot; data-role=&quot;button&quot; data-theme=&quot;a&quot;&gt;Swatch a&lt;/a&gt;
@@ -209,17 +206,6 @@ $( "[type="submit"]" ).button();
 		</longdesc>
 	<added>1.0</added>
 	<options>
-		<option name="initSelector" default="button, [type='button'], [type='submit'], [type='reset']">
-			<desc>This is used to define the selectors (element types, data roles, etc.) that will automatically be initialized as form buttons. To change which elements are initialized, bind this option to the mobileinit event:
-<pre><code>
-$( document ).on( "mobileinit", function() {
-	$.mobile.button.prototype.options.initSelector = ".myButtons";
-});
-</code></pre>
-				<p><b>Note: This option applies only to form buttons, which are automatically initialized by the framework.</b></p>
-			</desc>
-			<type name="CSS selector string" />
-		</option>
 		<option name="corners" default="true" example-value="false">
 			<desc>Applies the theme button border-radius if set to true.
 <pre><code>
@@ -229,7 +215,7 @@ $( "a" ).buttonMarkup({ corners: false });
 				<iframe src="/resources/button/example40.html" style="width:100%;height:90px;border:0px"></iframe>
 				</p>
 			</desc>
-            <type name="Boolean" />
+			<type name="Boolean" />
 		</option>
 		<option name="icon" default="null" example-value='"star"'>
 			<desc>Applies an icon from the icon set.
@@ -240,7 +226,7 @@ $( "a" ).buttonMarkup({ icon: "star" });
 				<iframe src="/resources/button/example41.html" style="width:100%;height:90px;border:0px"></iframe>
 				</p>
 			</desc>
-            <type name="String" />
+  		<type name="String" />
 		</option>
 		<option name="iconpos" default='"left"'>
 			<desc>Positions the icon in the button. Possible values: left, right, top, bottom, none, notext. The notext value will display an icon-only button with no text feedback.
@@ -251,7 +237,7 @@ $( "a" ).buttonMarkup({ iconpos: "right" });
 				<iframe src="/resources/button/example42.html" style="width:100%;height:90px;border:0px"></iframe>
 				</p>
 			</desc>
-            <type name="String" />
+			<type name="String" />
 		</option>
 		<option name="iconshadow" default="true">
 			<desc>Applies the theme shadow to the button's icon if set to true.
@@ -262,7 +248,7 @@ $( "a" ).buttonMarkup({ iconshadow: false });
 				<iframe src="/resources/button/example43.html" style="width:100%;height:90px;border:0px"></iframe>
 				</p>
 			</desc>
-            <type name="Boolean" />
+			<type name="Boolean" />
 		</option>
 		<option name="inline" default="null (false)">
 			<desc>If set to true, this will make the button act like an inline button so the width is determined by the button's text. By default, this is null (false) so the button is full width, regardless of the feedback content. Possible values: true, false.
@@ -273,7 +259,7 @@ $( "a" ).buttonMarkup({ inline: true });
 				<iframe src="/resources/button/example44.html" style="width:100%;height:90px;border:0px"></iframe>
 				</p>
 			</desc>
-            <type name="Boolean" />
+			<type name="Boolean" />
 		</option>
 		<option name="mini" default="null (false)">
 			<desc>If set to true, this will display a more compact version of the button that uses less vertical height. Possible values: true, false.
@@ -283,7 +269,7 @@ $( "a" ).buttonMarkup({ mini: true });
 				<p>This option is also exposed as a data attribute: <code>data-mini="true"</code>.
 				<iframe src="/resources/button/example45.html" style="width:100%;height:90px;border:0px"></iframe></p>
 			</desc>
-            <type name="Boolean" />
+			<type name="Boolean" />
 		</option>
 		<option name="shadow" default="true">
 			<desc>Applies the drop shadow style to the button if set to true.
@@ -294,10 +280,10 @@ $( "a" ).buttonMarkup({ shadow: false });
 				<iframe src="/resources/button/example46.html" style="width:100%;height:90px;border:0px"></iframe>
 				</p>
 			</desc>
-            <type name="Boolean" />
+			<type name="Boolean" />
 		</option>
 		<option name="theme" default="null, inherited from parent">
-			<desc><p>Sets the color scheme (swatch) for all instances of this widget. It accepts a single letter from a-z that maps to one of the swatches included in your theme. By default, it will inherit the same swatch color as its parent container if not explicitly set. </p>
+			<desc><p>Sets the color scheme (swatch) for all instances of this widget. It accepts a single letter from a-z that maps to one of the swatches included in your theme. By default, it will inherit the same swatch color as its parent container if not explicitly set.</p>
 <pre><code>
 $( "a" ).buttonMarkup({ theme: "a" });
 </code></pre>

resources/button/example2.html

@@ -25,7 +25,7 @@
 <body>
 <div data-role="page" style="max-height:90px; min-height:90px;">
 	<div data-role="content" >
-		<a href="index.html" data-role="button" class="ui-disabled">Link button</a>
+		<a href="index.html" data-role="button" class="ui-state-disabled">Link button</a>
 	</div>
 </div>
 </body>