diff --git a/docs/api/data-attributes.html b/docs/api/data-attributes.html index f9bb5b61bc9..680c98fd7fb 100644 --- a/docs/api/data-attributes.html +++ b/docs/api/data-attributes.html @@ -547,6 +547,11 @@

Radio button

Select

All select form elements are auto-enhanced, no data-role required

+ + + + + diff --git a/docs/forms/selects/custom.html b/docs/forms/selects/custom.html index 2952bb3a51a..ef24b4e337b 100644 --- a/docs/forms/selects/custom.html +++ b/docs/forms/selects/custom.html @@ -277,7 +277,7 @@

Multiple selects

Optgroup support

-

If a select menu contains optgroup elements, jQuery Mobile will create a divider & group items based on the label attribute's text:

+

If a select menu contains optgroup elements, jQuery Mobile will create a divider and group items based on the optgroup label attribute's text. The default theme swatch for group dividers is "b" (blue in the default theme) but can be changed with the data-divider-theme attribute on the select menu:

diff --git a/docs/forms/selects/options.html b/docs/forms/selects/options.html index 42e0e82c92d..6a4943e421e 100644 --- a/docs/forms/selects/options.html +++ b/docs/forms/selects/options.html @@ -45,7 +45,18 @@

Select menus

default: true

Applies the theme button border-radius to the select button if set to true. This option is also exposed as a data attribute: data-corners="false"

$('select').selectmenu({ corners: false });
- + +
dividerTheme string
+
+

default: "b"

+

Sets the color scheme (swatch) for dividers in popup-based custom select menus when using the optgroup support. It accepts a single letter from a-z that maps to the swatches included in your theme. To set the value for all instances of this widget, bind this option to the mobileinit event:

+
$( document ).bind( "mobileinit", function(){
+    $.mobile.listview.prototype.options.dividerTheme = "a";
+});
+
+

This option is also exposed as a data attribute: data-divider-theme="a".

+
+
icon string

default: "arrow-down"

@@ -55,7 +66,6 @@

Select menus

To suppress the icon, a boolean expression must be used:

$('select').selectmenu({ icon: false });
-
iconpos string

default: "right"

diff --git a/js/widgets/forms/select.custom.js b/js/widgets/forms/select.custom.js index 1debbfc48a8..f59ac59f423 100644 --- a/js/widgets/forms/select.custom.js +++ b/js/widgets/forms/select.custom.js @@ -46,7 +46,9 @@ define( [ "id": menuId, "role": "listbox", "aria-labelledby": buttonId - }).attr( "data-" + $.mobile.ns + "theme", widget.options.theme ).appendTo( listbox ), + }).attr( "data-" + $.mobile.ns + "theme", widget.options.theme ) + .attr( "data-" + $.mobile.ns + "divider-theme", widget.options.dividerTheme ) + .appendTo( listbox ), header = $( "
", { "class": "ui-header ui-bar-" + widget.options.theme diff --git a/js/widgets/forms/select.js b/js/widgets/forms/select.js index 5cb3dd84773..afc76c2778d 100644 --- a/js/widgets/forms/select.js +++ b/js/widgets/forms/select.js @@ -20,6 +20,7 @@ $.widget( "mobile.selectmenu", $.mobile.widget, { shadow: true, iconshadow: true, overlayTheme: "a", + dividerTheme: "b", hidePlaceholderMenuItems: true, closeText: "Close", nativeMenu: true,
data-divider-themeswatch letter (a-z) - Default "b" - Only for optgroup list-dividers in non-native selects
data-icon home | delete | plus | arrow-u | arrow-d | check | gear | grid | star | custom | arrow-r | arrow-l | minus | refresh | forward | back | alert | info | search | false