From 95da5192e09b5fca694493c7f5afcae96b6690d6 Mon Sep 17 00:00:00 2001 From: Maurice Gottlieb Date: Tue, 7 Aug 2012 14:35:09 +0300 Subject: [PATCH 1/6] Select: Add divider theme for non-native optgroup --- 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 9d7ebb8a3e6a391cbe64eea1bb499c197432919d Mon Sep 17 00:00:00 2001 From: Maurice Gottlieb Date: Tue, 7 Aug 2012 14:37:37 +0300 Subject: [PATCH 2/6] Select: Add divider theme for non-native optgroup --- js/widgets/forms/select.custom.js | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) 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 From 01be150d088ea4cba3675951d75283167065484c Mon Sep 17 00:00:00 2001 From: Maurice Gottlieb Date: Tue, 7 Aug 2012 14:49:51 +0300 Subject: [PATCH 3/6] Docs: Add info for list-divider support for optgroups --- 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..9b871d235fd 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 divider & 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 9a303a017fc5a3ecde36bb146f92e16ee26eb77c Mon Sep 17 00:00:00 2001 From: Maurice Gottlieb Date: Sat, 25 Aug 2012 19:10:43 +0300 Subject: [PATCH 4/6] Docs: Correct wording at optgroup paragraph (select/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 9b871d235fd..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 divider & 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:

+

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:

From 5afb1f432c978a4d322c3757eaa43734ba9f5736 Mon Sep 17 00:00:00 2001 From: Maurice Gottlieb Date: Sat, 25 Aug 2012 19:31:23 +0300 Subject: [PATCH 5/6] Docs: Add dividerTheme paragraph (selects/options.html) --- docs/forms/selects/options.html | 14 ++++++++++++-- 1 file changed, 12 insertions(+), 2 deletions(-) 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"

From 1c14ea14dd7c9d20508c26c44ea0abecca3848fa Mon Sep 17 00:00:00 2001 From: Maurice Gottlieb Date: Sat, 25 Aug 2012 20:10:09 +0300 Subject: [PATCH 6/6] Docs: Add data-divider-theme to reference (data-attributes.html) --- docs/api/data-attributes.html | 5 +++++ 1 file changed, 5 insertions(+) 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

+ + + + +
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