You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: entries/selectmenu.xml
+80-13Lines changed: 80 additions & 13 deletions
Original file line number
Diff line number
Diff line change
@@ -23,7 +23,7 @@
23
23
<p>This will produce a basic select menu. The default styles set the width of the input to 100% of the parent container and stacks the label on a separate line.
<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 mini version. </p>
29
29
@@ -40,7 +40,7 @@
40
40
<p>This will produce a select that a not as tall as the standard version and has a smaller text size.
<p>The following example organizes the options into <code>optgroup</code> elements. Support for this feature in mobile selects is a bit spotty, but is improving.</p>
<p>To create a grouped set of select inputs, first add <code>select</code> and a corresponding <code>label</code>. Set the <code>for</code> attribute of the <code>label</code> to match the <code>id</code> of the <code>select</code> so they are semantically associated.</p>
<p>Select inputs can also be used for grouped sets with more than one related selections. To make a horizontal button set, add the <code>data-type="horizontal"</code> to the fieldset. Note that the buttons which trigger the select will resize depending on the currently selected option’s value.</p>
<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>The framework is capable of building a custom menu based on the <code>select</code> element's list of options. We recommend using a custom menu when multiple selections are required, or when the menu itself must be styled with CSS.</p>
153
153
154
154
<p>You can optionally use custom-styled select menus instead of the native OS menu. The custom menu supports disabled options and multiple selection (whereas native mobile OS support for both is inconsistent), adds an elegant way to handle placeholder values, and restores missing functionality on certain platforms such as <code>optgroup</code> support on Android (all explained below). In addition, the framework applies the custom button's theme to the menu to better match the look and feel and provide visual consistency across platforms. Lastly, custom menus often look better on desktop browsers because native desktop menus are smaller than their mobile counterparts and tend to look disproportionate.</p>
<pclass="warning"><strong>Note:</strong> The behavior whereby the custom select menu creates a new page when the list of options is long is deprecated as of jQuery Mobile 1.4.0. Starting with 1.5.0, the custom select menu will fall back to utilizing the select menu's native behavior when the list of options is too long.</p>
172
172
173
-
<h3>Disabled options</h3>
173
+
<h2id="disabled-options">Disabled options</h2>
174
174
175
175
<p>jQuery Mobile will automatically disable and style option tags with the <code>disabled</code> attribute. In the demo below, the second option "Rush: 3 days" has been set to disabled.
<p>It's common for developers to include a "null" 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>
<p>If a select menu contains <code>optgroup</code> elements, jQuery Mobile will create a divider & group items based on the <code>label</code> attribute's text:
<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:
<h2id="calling-the-select-menu-plugin">Calling the select menu plugin</h2>
234
234
235
235
<p>The select menu plugin will auto initialize on any page that contains a select menu, without any 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>
236
236
237
237
<pre><code><![CDATA[
238
238
$( "select" ).selectmenu();
239
+
]]></code></pre>
240
+
241
+
<h2id="id-generation">ID generation</h2>
242
+
243
+
<p>The <placeholdername="name"/> widget adds an ID to the elements it generates. If it doesn't itself have an ID, it will use a prefix consisting of <code>select-</code> and a unique number for the elements. If it does have an ID, it will use its ID as the prefix. The ID for the various elements generated by the <placeholdername="name"/> widget is then constructed as follows:</p>
<p>This id is only assigned to an element when the <placeholdername="name"/> widget is constructed with the option <code>nativeMenu</code> set to <code>false</code>.</p>
253
+
<p>Since the menu is implemented as a popup it will assign IDs to its generated elements. See the popup widget's <ahref="/popup/#id-generation">id generation</a> for details.</p>
<p>This id is only assigned to an element when the <placeholdername="name"/> widget is constructed with the option <code>nativeMenu</code> set to <code>false</code>.</p>
259
+
</dd>
260
+
</dl>
261
+
<p>For example, creating a non-native <placeholdername="name"/> with</p>
0 commit comments