Added mini feature to api ref, options tab, button pages.

Author: toddparker

css/structure/jquery.mobile.core.css

@@ -45,7 +45,7 @@ div.ui-mobile-viewport { overflow-x: hidden; }
 .ui-bar h1, .ui-bar h2, .ui-bar h3, .ui-bar h4, .ui-bar h5, .ui-bar h6 { margin: 0; padding: 0; font-size: 16px; display: inline-block; }
 
 .ui-header, .ui-footer { position: relative; overflow: hidden; width: 100%; border-left-width: 0; border-right-width: 0; }
-.ui-header .ui-btn-left { position: absolute; left: 10px; top: .4em;  }
+.ui-header .ui-btn-left { position: absolute; left: 10px; top: .em;  }
 .ui-header .ui-btn-right { position: absolute; right: 10px; top: .4em; }
 .ui-header .ui-title, .ui-footer .ui-title { min-height: 1.1em; text-align: center; font-size: 16px; display: block; margin: .6em 30% .8em;  padding: 0;  text-overflow: ellipsis; overflow: hidden; white-space: nowrap; outline: 0 !important; }
 .ui-footer .ui-title { margin: .6em 15px .8em;  }

docs/api/data-attributes.html

@@ -54,6 +54,10 @@ <h2><a href="../buttons/buttons-types.html">Button</a></h2>
 					<th>data-inline</th>
 					<td>true | <strong>false</strong></td>
 				</tr>
+				<tr>
+					<th>data-mini</th>
+					<td>true | <strong>false</strong> - Compact sized version</td>
+				</tr>
 				<tr>
 					<th>data-shadow</th>
 					<td><strong>true</strong> | false</td>
@@ -73,6 +77,10 @@ <h2><a href="../forms/checkboxes/">Checkbox</a></h2>
 					<th>data-role</th>
 					<td>none (prevents auto-enhancement to use native control)</td>
 				</tr>
+				<tr>
+					<th>data-mini</th>
+					<td>true | <strong>false</strong> - Compact sized version</td>
+				</tr>
 				<tr>
 					<th>data-theme</th>
 					<td>swatch letter (a-z) - Added to the form element</td>
@@ -90,6 +98,10 @@ <h2><a href="../content/content-collapsible.html">Collapsible</a></h2>
 					<th>data-content-theme</th>
 					<td>swatch letter (a-z)</td>
 				</tr>
+				<tr>
+					<th>data-mini</th>
+					<td>true | <strong>false</strong> - Compact sized version</td>
+				</tr>
 				<tr>
 					<th>data-theme</th>
 					<td>swatch letter (a-z)</td>
@@ -103,6 +115,10 @@ <h2><a href="../content/content-collapsible-set.html">Collapsible set</a></h2>
 					<th>data-content-theme</th>
 					<td>swatch letter (a-z) - Sets all collapsibles in set</td>
 				</tr>
+				<tr>
+					<th>data-mini</th>
+					<td>true | <strong>false</strong> - Compact sized version</td>
+				</tr>
 				<tr>
 					<th>data-theme</th>
 					<td>swatch letter (a-z) - Sets all collapsibles in set</td>
@@ -158,6 +174,10 @@ <h2><a href="../forms/switch/">Flip toggle switch</a></h2>
 					<th>data-role</th>
 					<td>none (prevents auto-enhancement to use native control)</td>
 				</tr>
+				<tr>
+					<th>data-mini</th>
+					<td>true | <strong>false</strong> - Compact sized version</td>
+				</tr>
 				<tr>
 					<th>data-theme</th>
 					<td>swatch letter (a-z) - Added to the form element</td>
@@ -354,6 +374,10 @@ <h2><a href="../forms/radiobuttons/">Radio button</a></h2>
 					<th>data-role</th>
 					<td>none (prevents auto-enhancement to use native control)</td>
 				</tr>
+				<tr>
+					<th>data-mini</th>
+					<td>true | <strong>false</strong> - Compact sized version</td>
+				</tr>
 				<tr>
 					<th>data-theme</th>
 					<td>swatch letter (a-z) - Added to the form element</td>
@@ -375,6 +399,10 @@ <h2><a href="../forms/selects/">Select</a></h2>
 					<th>data-inline</th>
 					<td>true | <strong>false</strong></td>
 				</tr>
+				<tr>
+					<th>data-mini</th>
+					<td>true | <strong>false</strong> - Compact sized version</td>
+				</tr>
 				<tr>
 					<th>data-native-menu</th>
 					<td><strong>true</strong> | false</td>
@@ -401,6 +429,14 @@ <h2><a href="../forms/selects/">Select</a></h2>
 			<h2><a href="../forms/slider/">Slider</a></h2>
 			<p>Inputs with <code>type="range"</code> are auto-enhanced, no <code>data-role</code> required</p>
 			<table>
+				<tr>
+					<th>data-highlight</th>
+					<td>true | <strong>false</strong> - Adds an active state fill on track to handle</td>
+				</tr>
+				<tr>
+					<th>data-mini</th>
+					<td>true | <strong>false</strong> - Compact sized version</td>
+				</tr>
 				<tr>
 					<th>data-role</th>
 					<td>none (prevents auto-enhancement to use native control)</td>
@@ -418,6 +454,10 @@ <h2><a href="../forms/slider/">Slider</a></h2>
 			<h2><a href="../forms/textinputs/">Text input &amp; Textarea</a></h2>
 			<p>Input <code>type="text|number|search|etc."</code> or <code>textarea</code> elements are auto-enhanced, no <code>data-role</code> required</p>
 			<table>
+				<tr>
+					<th>data-mini</th>
+					<td>true | <strong>false</strong> - Compact sized version</td>
+				</tr>
 				<tr>
 					<th>data-role</th>
 					<td>none (prevents auto-enhancement to use native control)</td>

docs/buttons/buttons-inline.html

@@ -43,6 +43,11 @@ <h1>Inline buttons</h1>
 
 			<a href="index.html" data-role="button" data-inline="true">Cancel</a>
 			<a href="index.html" data-role="button" data-theme="b" data-inline="true">Save</a>
+			
+		<p>Adding the <code>data-mini="true"</code> to the inline buttons creates a more compact version:</p>
+
+			<a href="index.html" data-role="button" data-inline="true" data-mini="true">Cancel</a>
+			<a href="index.html" data-role="button" data-theme="b" data-inline="true" data-mini="true">Save</a>
 
 
 		<p>If you want buttons to sit side-by-side but stretch to fill the width of the screen, you can use the <a href="../content/content-grids.html">content column grids</a> to put normal full-width buttons into 2- or 3-columns.</p>	

docs/buttons/buttons-options.html

@@ -75,6 +75,14 @@ <h2>Button basics</h2>
 				<a href="#" data-role="button" data-inline="true">Inline</a>
 			</dd>
 
+			<dt><code>mini</code> <em>boolean</em></dt>
+			<dd>
+				<p class="default">default: null (false)</p>
+				<p>If set to true, this will display a more compact version of the button that uses less vertical height. Possible values: true, false. This option is also exposed as a data attribute: <code>data-mini=&quot;true&quot;</code></p>
+				<pre><code>$('a').buttonMarkup(<strong>{ mini: "true" }</strong>);</code></pre>
+				<a href="#" data-role="button" data-mini="true">Inline</a>
+			</dd>
+			
 			<dt><code>shadow</code> <em>boolean</em></dt>
 			<dd>
 				<p class="default">default: true</p>

docs/buttons/buttons-types.html

@@ -45,7 +45,20 @@ <h2>Styling links as buttons</h2>
 		<p>Produces this <strong>link-based</strong> button:</p>
 		<a href="index.html" data-role="button">Link button</a>
 
-		<p>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-disabled yourself with JavaScript to achieve the same effect.</p>
+		
+		<h2>Mini size</h2>
+
+		<p>For a more compact version that is useful in toolbars and tight spaces, add the <code>data-mini="true"</code> attribute to the button to create a <a href="../forms/forms-all-mini.html">mini version</a>. </p>
+
+<pre><code>	
+	&lt;a href=&quot;index.html&quot; data-role=&quot;button&quot;&gt;Link button&lt;/a  <strong>data-mini=&quot;true&quot;</strong> &gt;
+</code></pre>
+
+		<p>This will produce a search input that a not as tall as the standard version and has a smaller text size.</p>
+         <a href="index.html" data-role="button" data-mini="true">Link button</a>
+		
+		
 
 		<h2>Form buttons</h2>
 		<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>, <code>button</code>, or <code>image</code> into a custom styled button &mdash; 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>

docs/content/content-collapsible-set.html

@@ -53,25 +53,41 @@ <h3>Section 1</h3>
 			<div data-role="collapsible">
 				<h3>Section 2</h3>
 				<p>I'm the collapsible content in a set so this feels like an accordion. I'm hidden by default because I have the "collapsed" state; you need to expand the header to see me.</p>
-
 			</div>
 			<div data-role="collapsible">
 				<h3>Section 3</h3>
 				<p>I'm the collapsible content in a set so this feels like an accordion. I'm hidden by default because I have the "collapsed" state; you need to expand the header to see me.</p>
-
 			</div>
 			<div data-role="collapsible">
 				<h3>Section 4</h3>
 				<p>I'm the collapsible content in a set so this feels like an accordion. I'm hidden by default because I have the "collapsed" state; you need to expand the header to see me.</p>
-
 			</div>
 			<div data-role="collapsible">
 				<h3>Section 5</h3>
 				<p>I'm the collapsible content in a set so this feels like an accordion. I'm hidden by default because I have the "collapsed" state; you need to expand the header to see me.</p>
-
 			</div>
 		</div>
 
+		<h2>Mini collapsible sets</h2>
+
+		<p>For a more compact version that is useful in tight spaces, add the <code>data-mini="true"</code> attribute to the element to create a <a href="../forms-all-mini.html">mini version</a>. </p>
+		
+		<div data-role="collapsible-set" data-theme="c" data-content-theme="d" data-mini="true">
+			<div data-role="collapsible">
+				<h3>Section 1</h3>
+				<p>Collapsible content</p>
+			</div>
+			<div data-role="collapsible">
+				<h3>Section 2</h3>
+				<p>Collapsible content</p>
+
+			</div>
+			<div data-role="collapsible">
+				<h3>Section 3</h3>
+				<p>Collapsible content</p>
+			</div>
+		</div>
+		
 		<h2>Theming collapsible content</h2>
 		<p>The standard <code>data-theme</code> attribute can be used to set the color of each collapsible in a set. To provide a clearer visual grouping of the content with the headers, add the <code>data-content-theme</code> attribute with a swatch letter. This adds a themed background color and border to the content block. For consistent theming, add these attributes to the parent collapsible set.</p>
 

docs/content/content-collapsible.html

@@ -45,11 +45,11 @@ <h3>I'm a header</h3>
 
 	<h2>Expanding collapsibles on load</h2>
 
-		<p>To expand the content when the page loads, add the <code>data-collapsed="false"</code> attribute to the wrapper.</p>
+	<p>To expand the content when the page loads, add the <code>data-collapsed="false"</code> attribute to the wrapper.</p>
 
-	<code>		
-	&lt;div data-role=&quot;collapsible&quot; <strong>data-collapsed=&quot;false&quot;&gt;</strong>
-	</code>
+<code>		
+&lt;div data-role=&quot;collapsible&quot; <strong>data-collapsed=&quot;false&quot;&gt;</strong>
+</code>
 
 		<p>This code will create a collapsible widget like this:</p>
 
@@ -59,6 +59,21 @@ <h3>I'm a header</h3>
 				<p>I'm the collapsible content. I'm expanded by default because I have the "collapsed" state set to false.</p>
 			</div>
 
+			<h2>Mini collapsibles</h2>
+
+			<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 <a href="../forms-all-mini.html">mini version</a>. </p>
+
+		<code>		
+		&lt;div data-role=&quot;collapsible&quot; <strong>data-mini=&quot;true&quot;&gt;</strong>
+		</code>
+
+		<p>This code will create a mini collapsible widget:</p>
+
+		<div data-role="collapsible" data-mini="true">
+			<h3>I'm a mini header</h3>
+			<p>I'm the collapsible content. I'm expanded by default because I have the "collapsed" state set to false.</p>
+		</div>
+					
 	<h2>Theming collapsible content</h2>
 
 

docs/forms/forms-all-mini.html

@@ -26,7 +26,7 @@ <h1>Mini forms</h1>
 
 			<h2>Mini form elements</h2>
 
-			<p>All form controls accept a <code>data-mini="true"</code> attribute that renders a smaller version of the enhanced element. In the case of grouped buttons, the <code>data-mini="true"</code> attribute can be added to the containing controlgroup. <a href="forms-all-compare.html">Compare mini and normal form elements</a></p>
+			<p>All form controls accept a <code>data-mini="true"</code> attribute that renders a smaller version of the <a href="forms-all.html">standard-sized</a> form elements. In the case of grouped buttons, the <code>data-mini="true"</code> attribute can be added to the containing controlgroup. <a href="forms-all-compare.html">Compare mini and normal</a> form elements side-by-side.</p>
 
 			<div data-role="fieldcontain">
 	         <label for="name">Text Input:</label>

docs/forms/forms-all.html

@@ -26,9 +26,9 @@ <h1>Forms</h1>
 
 			<h2>Form elements</h2>
 
-			<p>This page contains various progressive-enhancement driven form controls. Native elements are sometimes hidden from view, but their values are maintained so the form can be submitted normally. </p>
-
-			<p>Browsers that don't support the custom controls will still deliver a usable experience, because all are based on native form elements.</p>
+			<p>This page contains various progressive-enhancement driven form controls. Native elements are sometimes hidden from view, but their values are maintained so the form can be submitted normally.Browsers that don't support the custom controls will still deliver a usable experience, because all are based on native form elements.</p>
+			
+			<p>There is a complete set of <a href="forms-all-mini.html">mini-sized</a> form elements which are useful for toolbars or tighter spaces. <a href="forms-all-compare.html">Compare mini and normal</a> form elements side-by-side.</p>
 
 			<div data-role="fieldcontain">
 	         <label for="name">Text Input:</label>

docs/forms/slider/index.html

@@ -82,7 +82,7 @@ <h2>Mini version</h2>
 
 <pre><code>
 &lt;label for=&quot;slider-0&quot;&gt;Input slider:&lt;/label&gt;
-&lt;input type=&quot;range&quot; name=&quot;slider&quot; id=&quot;slider-0&quot; value=&quot;25&quot; min=&quot;0&quot; max=&quot;100&quot; <strong>data-mini=&quot;true&quot;</strong> /&gt;
+&lt;input type=&quot;range&quot; name=&quot;slider&quot; id=&quot;slider-0&quot; value=&quot;25&quot; min=&quot;0&quot; max=&quot;100&quot; data-highlight=&quot;true&quot; <strong>data-mini=&quot;true&quot;</strong> /&gt;
 </code></pre>
 
 				<p>This will produce an input that a not as tall as the standard version and has a smaller text size.</p>