To create a popup, add the data-role="popup" attribute to a div with the popup contents. Then create a link with the href set to the id of the popup div, and add the attribute data-rel="popup" to tell the framework to open the popup when the link is tapped. This is a similar markup pattern to the dialog widget. A popup div has to be nested inside the same page as the link.
- Scaling images: Lightbox examples
+ Scaling images: Lightbox examples
The framework CSS contains rules that make images that are immediate children of the popup scale to fit the screen. Because of the absolute positioning of the popup container and screen, the height is not adjusted to screen height on all browsers. You can prevent vertical scrolling with a simple script that sets the max-height of the image.
@@ -47,7 +47,7 @@ $( document ).on( "pagecreate", function() {
});
]]>You may need to embed an iframe into a popup to use a 3rd party widget. Here, we'll walk through a few real-world examples of working with iframes: videos and maps.
@@ -397,6 +397,36 @@ $( document ).on( "pageinit", function() { +The
]]>-placeholder]]>-screen]]>-popupFor example, creating a
+ To use this feature, enable it from Settings.
+
+]]>will result in the following markup:
+
+
+
+
+
+
+
+]]>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.
-For a more compact version that is useful in toolbars and tight spaces, add the data-mini="true" attribute to the element to create a mini version.
This will produce a select that a not as tall as the standard version and has a smaller text size.
-Optionally wrap the selects in a container with class ui-field-contain to help visually group it in a longer form.
An example of a select with a long list of options:
-The following example organizes the options into optgroup elements. Support for this feature in mobile selects is a bit spotty, but is improving.
- Vertically grouped select inputs
+ Vertically grouped select inputs
To create a grouped set of select inputs, first add select and a corresponding label. Set the for attribute of the label to match the id of the select so they are semantically associated.
@@ -133,7 +133,7 @@
- Horizontally grouped select inputs
+ Horizontally grouped select inputs
Select inputs can also be used for grouped sets with more than one related selections. To make a horizontal button set, add the data-type="horizontal" to the fieldset. Note that the buttons which trigger the select will resize depending on the currently selected option’s value.
- Theming selects
+ Theming selects
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:
- Custom select menus
+ Custom select menus
The framework is capable of building a custom menu based on the select 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.
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 optgroup 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.
@@ -170,13 +170,13 @@ $(document).on( "mobileinit", function() {
Note: 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.
- Disabled options
+ Disabled options
jQuery Mobile will automatically disable and style option tags with the disabled attribute. In the demo below, the second option "Rush: 3 days" has been set to disabled.
- Placeholder options
+ Placeholder options
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:
- An option with no value attribute
@@ -194,7 +194,7 @@ $.mobile.selectmenu.prototype.options.hidePlaceholderMenuItems = false;
Examples of various placeholder options:
- Multiple selects
+ Multiple selects
If the multiple attribute is present in your markup, jQuery Mobile will enhance the element with a few extra considerations:
@@ -215,12 +215,12 @@ $.mobile.selectmenu.prototype.options.hidePlaceholderMenuItems = false;
- Optgroup support
+ Optgroup support
If a select menu contains optgroup elements, jQuery Mobile will create a divider & group items based on the label attribute's text:
- Theming selects
+ Theming selects
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:
@@ -229,12 +229,79 @@ $.mobile.selectmenu.prototype.options.hidePlaceholderMenuItems = false;
- Calling the select menu plugin
+ Calling the select menu plugin
The select menu plugin will auto initialize on any page that contains a select menu, without any need for a data-role attribute in the markup. However, you can directly call the select menu plugin on any selector, just like any normal jQuery plugin:
+
+ ID generation
+
+ The select- 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
+
+ - button
+ -
+
]]>
+
+ - popup
+ -
+
]]>
+ This id is only assigned to an element when the nativeMenu set to false.
+ Since the menu is implemented as a popup it will assign IDs to its generated elements. See the popup widget's id generation for details.
+
+ - listview
+ -
+
]]>
+ This id is only assigned to an element when the nativeMenu set to false.
+
+
+ For example, creating a non-native
+
+
+
+
+
+
+]]>
+ will result in the following markup:
+
+
+ Caracas
+
+
+
+