Hopiu/jquery-mobile
1
0
Fork 0
mirror of https://github.com/Hopiu/jquery-mobile.git synced 2026-04-04 14:50:24 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

Added overlay-theme attr info for selects

Browse source
This commit is contained in:
Todd Parker 2011-11-07 22:47:47 -05:00
parent 2b618a1215
commit 82b7dcc1d1
1 changed files with 70 additions and 3 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

73
docs/forms/selects/index.html
View file

@ -583,18 +583,85 @@ $.mobile.selectmenu.prototype.options.hidePlaceholderMenuItems = false;
</div>
<h2>Styling with data attributes</h2>
<h2>Theming selects</h2>
<p>You can specify any jQuery Mobile button <code>data-</code> attribute on a select element, too. In this example, we're setting the theme, icon and inline properties:</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" data-native-menu="false">
<select name="select-choice-11" id="select-choice-11" data-theme="e" data-icon="gear" data-inline="true" data-native-menu="false">
<option value="edit">Edit user</option>
<option value="delete">Delete user</option>
</select>
</div>
<p>The <code>data-overlay-theme</code> attribute can be added a select element to set the color of the overlay layer that the dialog-based custom select menus and the outer border of the smaller custom menus. By default, the content block colors for swatch A will be used for the overlays.</p>
<div data-role="fieldcontain">
<label for="select-choice-15" class="select">Size</label>
<select name="select-choice-15" id="select-choice-15" data-theme="b" data-overlay-theme="d" data-native-menu="false">
<option value="t">Tall</option>
<option value="g">Grande</option>
<option value="v">Vente</option>
</select>
</div>
<div data-role="fieldcontain">
<label for="select-choice-13" class="select">Choose state(s):</label>
<select name="select-choice-13" id="select-choice-13" data-native-menu="false" data-theme="a" data-overlay-theme="e">
<option>Choose options</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>
<h2>Calling the select menu plugin</h2>
<p>The select menu plugin will auto initialize on any page that contains a select menu, no need for a <code>data-role</code> attribute in the markup. However, you can directly call the select menu plugin on any selector, just like any normal jQuery plugin:</p>