From 438004bda08514d8fae67115df6073ca4a385b88 Mon Sep 17 00:00:00 2001 From: Maurice Gottlieb Date: Wed, 19 Sep 2012 13:34:23 +0300 Subject: [PATCH 1/5] Select: Add optgroup theming for non-native select - #1 Fix for #4812 --- js/widgets/forms/select.js | 1 + 1 file changed, 1 insertion(+) 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, From bb592adf77367f97bd76ad33154703d6f23eda6c Mon Sep 17 00:00:00 2001 From: Maurice Gottlieb Date: Wed, 19 Sep 2012 14:25:30 +0300 Subject: [PATCH 2/5] Select: Add optgroup theming for non-native select #2 --- js/widgets/forms/select.custom.js | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/js/widgets/forms/select.custom.js b/js/widgets/forms/select.custom.js index 98d2fe62ff3..03256befd2a 100644 --- a/js/widgets/forms/select.custom.js +++ b/js/widgets/forms/select.custom.js @@ -46,7 +46,10 @@ 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 From 69fc980d0bffe360709a5b255bce5d3b61870a8f Mon Sep 17 00:00:00 2001 From: Maurice Gottlieb Date: Wed, 19 Sep 2012 14:35:50 +0300 Subject: [PATCH 3/5] Docs: Add info for themeable optgroups (forms/selects/custom.html) --- docs/forms/selects/custom.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/forms/selects/custom.html b/docs/forms/selects/custom.html index 2952bb3a51a..7ad596541b0 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 label attribute's text. The default theme for group dividers is "b" (blue in the default theme) but can be changed with the data-divider-theme attribute on the select menu:

From f504e1a54d6008b89739d88d6c51e72c8fd9291f Mon Sep 17 00:00:00 2001 From: Maurice Gottlieb Date: Wed, 19 Sep 2012 14:45:42 +0300 Subject: [PATCH 4/5] Docs: Add dividerTheme paragraph for optgroup support (selects/options.html) --- docs/forms/selects/options.html | 13 ++++++++++++- 1 file changed, 12 insertions(+), 1 deletion(-) diff --git a/docs/forms/selects/options.html b/docs/forms/selects/options.html index 00d60a05c02..42c08eae323 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"

From 513c8767d273bc6dd3b686e7b5ed1f507c5deb7a Mon Sep 17 00:00:00 2001 From: Maurice Gottlieb Date: Wed, 19 Sep 2012 14:53:46 +0300 Subject: [PATCH 5/5] Docs: Add data-divider-theme to reference (data-attributes.html) --- docs/api/data-attributes.html | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/docs/api/data-attributes.html b/docs/api/data-attributes.html index 71e70dd2454..1fcb94b4c66 100644 --- a/docs/api/data-attributes.html +++ b/docs/api/data-attributes.html @@ -547,6 +547,10 @@

Radio button

Select

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

+ + + +
data-divider-themeswatch letter (a-z) - Default "b" - Only applicable if optgroup support is used 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