Permalink
Browse files

Added documentation and demos for the new data-native="true" option t…

…hat speeds up performance of selects by using the browser's native menu (thanks John Bender!)
  • Loading branch information...
1 parent b1d356b commit 5b7201ef48ea0b9ed51c0e98d10991a1a064e815 @toddparker toddparker committed Jan 27, 2011
Showing with 134 additions and 13 deletions.
  1. +58 −1 docs/forms/forms-all.html
  2. +76 −12 docs/forms/forms-selects.html
View
@@ -127,6 +127,7 @@
<div data-role="fieldcontain">
<label for="select-choice-3" class="select">Your state:</label>
<select name="select-choice-3" id="select-choice-3">
+ <option>Custom menu...</option>
<option value="AL">Alabama</option>
<option value="AK">Alaska</option>
<option value="AZ">Arizona</option>
@@ -179,7 +180,63 @@
<option value="WY">Wyoming</option>
</select>
</div>
-
+
+ <div data-role="fieldcontain">
+ <label for="select-choice-3" class="select">Your state:</label>
+ <select name="select-choice-3" id="select-choice-3" data-native="true">
+ <option>Native menu...</option>
+ <option value="AL">Alabama</option>
+ <option value="AK">Alaska</option>
+ <option value="AZ">Arizona</option>
+ <option value="AR">Arkansas</option>
+ <option value="CA">California</option>
+ <option value="CO">Colorado</option>
+ <option value="CT">Connecticut</option>
+ <option value="DE">Delaware</option>
+ <option value="FL">Florida</option>
+ <option value="GA">Georgia</option>
+ <option value="HI">Hawaii</option>
+ <option value="ID">Idaho</option>
+ <option value="IL">Illinois</option>
+ <option value="IN">Indiana</option>
+ <option value="IA">Iowa</option>
+ <option value="KS">Kansas</option>
+ <option value="KY">Kentucky</option>
+ <option value="LA">Louisiana</option>
+ <option value="ME">Maine</option>
+ <option value="MD">Maryland</option>
+ <option value="MA">Massachusetts</option>
+ <option value="MI">Michigan</option>
+ <option value="MN">Minnesota</option>
+ <option value="MS">Mississippi</option>
+ <option value="MO">Missouri</option>
+ <option value="MT">Montana</option>
+ <option value="NE">Nebraska</option>
+ <option value="NV">Nevada</option>
+ <option value="NH">New Hampshire</option>
+ <option value="NJ">New Jersey</option>
+ <option value="NM">New Mexico</option>
+ <option value="NY">New York</option>
+ <option value="NC">North Carolina</option>
+ <option value="ND">North Dakota</option>
+ <option value="OH">Ohio</option>
+ <option value="OK">Oklahoma</option>
+ <option value="OR">Oregon</option>
+ <option value="PA">Pennsylvania</option>
+ <option value="RI">Rhode Island</option>
+ <option value="SC">South Carolina</option>
+ <option value="SD">South Dakota</option>
+ <option value="TN">Tennessee</option>
+ <option value="TX">Texas</option>
+ <option value="UT">Utah</option>
+ <option value="VT">Vermont</option>
+ <option value="VA">Virginia</option>
+ <option value="WA">Washington</option>
+ <option value="WV">West Virginia</option>
+ <option value="WI">Wisconsin</option>
+ <option value="WY">Wyoming</option>
+ </select>
+ </div>
<div class="ui-body ui-body-b">
<fieldset class="ui-grid-a">
@@ -114,20 +114,71 @@
</div>
- <h2>Data attribute support</h2>
- <p>You can specify any jQuery Mobile button data- attribute on a select element too.</p>
-
- <div data-role="fieldcontain">
- <label for="select-choice-11" class="select">Actions</label>
- <select name="select-choice-11" id="select-choice-11" data-theme="a" data-icon="gear" data-inline="true">
- <option value="edit">Edit</option>
- <option value="delete">Delete</option>
- </select>
- </div>
-
+
+ <h2>Option to use native menus</h2>
+ <p>The custom select menus add the ability to theme the select and provide visual consistency across platforms In addition, it fixes over some missing functionality on certain platforms: <code>optgroup</code> support on Android, multi-select capability on WebOS, and adds an elegant way to handle placeholder values (explained below).</p>
+ <p>However, there is overhead involved in parsing the native select to build a custom menu and if the number of selects or options within are fairly large, this can impact the performance of the page. By adding the <code>data-native="true"</code> attribute to the <code>select</code>, the framework will use the browesr's native select menu when the select button is clicked. Because this option doesn't use any of the custom menu parsing and menu generation logic, it is significantly faster than the custom menu version.</p>
+
+ <div data-role="fieldcontain">
+ <label for="select-choice-3" class="select">Your state:</label>
+ <select name="select-choice-3" id="select-choice-3" data-native="true">
+ <option value="AL">Alabama</option>
+ <option value="AK">Alaska</option>
+ <option value="AZ">Arizona</option>
+ <option value="AR">Arkansas</option>
+ <option value="CA">California</option>
+ <option value="CO">Colorado</option>
+ <option value="CT">Connecticut</option>
+ <option value="DE">Delaware</option>
+ <option value="FL">Florida</option>
+ <option value="GA">Georgia</option>
+ <option value="HI">Hawaii</option>
+ <option value="ID">Idaho</option>
+ <option value="IL">Illinois</option>
+ <option value="IN">Indiana</option>
+ <option value="IA">Iowa</option>
+ <option value="KS">Kansas</option>
+ <option value="KY">Kentucky</option>
+ <option value="LA">Louisiana</option>
+ <option value="ME">Maine</option>
+ <option value="MD">Maryland</option>
+ <option value="MA">Massachusetts</option>
+ <option value="MI">Michigan</option>
+ <option value="MN">Minnesota</option>
+ <option value="MS">Mississippi</option>
+ <option value="MO">Missouri</option>
+ <option value="MT">Montana</option>
+ <option value="NE">Nebraska</option>
+ <option value="NV">Nevada</option>
+ <option value="NH">New Hampshire</option>
+ <option value="NJ">New Jersey</option>
+ <option value="NM">New Mexico</option>
+ <option value="NY">New York</option>
+ <option value="NC">North Carolina</option>
+ <option value="ND">North Dakota</option>
+ <option value="OH">Ohio</option>
+ <option value="OK">Oklahoma</option>
+ <option value="OR">Oregon</option>
+ <option value="PA">Pennsylvania</option>
+ <option value="RI">Rhode Island</option>
+ <option value="SC">South Carolina</option>
+ <option value="SD">South Dakota</option>
+ <option value="TN">Tennessee</option>
+ <option value="TX">Texas</option>
+ <option value="UT">Utah</option>
+ <option value="VT">Vermont</option>
+ <option value="VA">Virginia</option>
+ <option value="WA">Washington</option>
+ <option value="WV">West Virginia</option>
+ <option value="WI">Wisconsin</option>
+ <option value="WY">Wyoming</option>
+ </select>
+ </div>
+
+
<h2>Placeholder options</h2>
- <p>It's common for developers to include a &quot;null&quot; option in their select element to force a user to choose an option. If a placeholder option is present in your markup, jQuery Mobile will hide them in the overlay menu, showing only valid choices to the user, and display the placeholder text inside the menu as a header. Examples of null options are either:</p>
+ <p>It's common for developers to include a &quot;null&quot; option in their select element to force a user to choose an option. If a placeholder option is present in your markup, jQuery Mobile will hide them in the overlay menu, showing only valid choices to the user, and display the placeholder text inside the menu as a header. A placeholder option is added when the framework finds:</p>
<ul>
<li>An option with no value attribute (or an empty value attribute)</li>
<li>An option with no text node</li>
@@ -296,6 +347,19 @@
</select>
</div>
+
+
+
+ <h2>Data attribute support</h2>
+ <p>You can specify any jQuery Mobile button data- attribute on a select element too. In this example, we're setting the theme, icon and inline properties though data- attributes.</p>
+
+ <div data-role="fieldcontain">
+ <label for="select-choice-11" class="select">Actions</label>
+ <select name="select-choice-11" id="select-choice-11" data-theme="a" data-icon="gear" data-inline="true">
+ <option value="edit">Edit user</option>
+ <option value="delete">Delete user</option>
+ </select>
+ </div>
</form>
</div><!-- /content -->
</div><!-- /page -->

0 comments on commit 5b7201e

Please sign in to comment.