Showing with 21 additions and 4 deletions.
  1. +20 −4 docs/forms/switch/index.html
  2. +1 −0 js/jquery.mobile.buttonMarkup.js
24 docs/forms/switch/index.html
View file
@@ -57,19 +57,35 @@ <h2>Flip toggle switch</h2>
<option value="on">On</option>
</select>

<p>The control is proportionally scaled, so if you're using longer words with it, you can just add a line of CSS to set it to the width you desire. For example, <code>div.ui-slider-switch { width: 9em }</code> will produce:</p>

<h2>Longer Labels</h2>
<p>The control is proportionally scaled, so to use longer labels one can just add a line of CSS setting the switch to the desired width. For example, given the following markup:</p>
<pre><code>
&lt;div class="containing-element"&gt;
&lt;label for="flip-min">Flip switch:&lt;/label&gt;
&lt;select name="slider" id="flip-min" data-role="slider"&gt;
&lt;option value="off">Switch Off&lt;/option&gt;
&lt;option value="on">Switch On&lt;/option&gt;
&lt;/select&gt;
&lt;/div&gt;
</code></pre>

<p><code>.containing-element .ui-slider-switch { width: 9em }</code> will produce:</p>

<style type="text/css" media="screen">
.switch-longdesc div.ui-slider-switch { width: 9em; }
.containing-element .ui-slider-switch { width: 9em; }
</style>
<div class="switch-longdesc">

<div class="containing-element">
<label for="flip-min">Flip switch:</label>
<select name="slider" id="flip-min" data-role="slider">
<option value="off">Switch Off</option>
<option value="on">Switch On</option>
</select>
</div>

<p>As some default styles hinge on fieldcontains, note that you may have to ensure that custom styles apply to switches within fieldcontains by using <code>.ui-field-contain div.ui-slider-switch { width: […]; }</code>.</p>

<h2>Mini version</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>
@@ -114,7 +130,7 @@ <h2>Field containers</h2>

<h2>Theming the flip switch</h2>

<p>Like all form elements, this widget will automatically inherit the theme from it's parent container. TO choose a specific theme color swatch, specify the <code>data-theme</code> attribute on the select and specify a swatch letter.</p>
<p>Like all form elements, this widget will automatically inherit the theme from its parent container. To choose a specific theme color swatch, specify the <code>data-theme</code> attribute on the select and specify a swatch letter.</p>

<pre><code>
&lt;div data-role=&quot;fieldcontain&quot;&gt;
1 js/jquery.mobile.buttonMarkup.js
View file
@@ -117,6 +117,7 @@ $.fn.buttonMarkup = function( options ) {
if ( buttonIcon ) {
buttonIcon.className = iconClass;
if ( !(buttonElements && buttonElements.icon) ) {
buttonIcon.appendChild( document.createTextNode("\u00a0") );
buttonInner.appendChild( buttonIcon );
}
}