Skip to content
This repository was archived by the owner on Oct 8, 2021. It is now read-only.

Commit 7edbd06

Browse files
committed
Merge pull request #5033 from MauriceG/patch-4
Select: Add optgroup theming for non-native selects - Fix for #4809: optgroup element is not themed
2 parents 59b88ed + 513c876 commit 7edbd06

File tree

5 files changed

+22
-3
lines changed

5 files changed

+22
-3
lines changed

docs/api/data-attributes.html

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -556,6 +556,10 @@ <h2><a href="../forms/radiobuttons/">Radio button</a></h2>
556556
<h2><a href="../forms/selects/">Select</a></h2>
557557
<p>All <code>select</code> form elements are auto-enhanced, no <code>data-role</code> required</p>
558558
<table>
559+
<tr>
560+
<th>data-divider-theme</th>
561+
<td>swatch letter (a-z) - Default "b" - Only applicable if <code>optgroup</code> support is used in non-native selects</td>
562+
</tr>
559563
<tr>
560564
<th>data-icon</th>
561565
<td>home | delete | plus | arrow-u | <strong>arrow-d</strong> | check | gear | grid | star | custom | arrow-r | arrow-l | minus | refresh | forward | back | alert | info | search | false </td>

docs/forms/selects/custom.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -277,7 +277,7 @@ <h3>Multiple selects</h3>
277277

278278

279279
<h3>Optgroup support</h3>
280-
<p>If a select menu contains <code>optgroup</code> elements, jQuery Mobile will create a divider &amp; group items based on the <code>label</code> attribute's text:</p>
280+
<p>If a select menu contains <code>optgroup</code> elements, jQuery Mobile will create a divider and group items based on the <code>label</code> attribute's text. The default theme for group dividers is "b" (blue in the default theme) but can be changed with the <code>data-divider-theme</code> attribute on the select menu:</p>
281281

282282
<div data-role="fieldcontain">
283283
<label for="select-choice-8" class="select">Shipping method:</label>

docs/forms/selects/options.html

Lines changed: 12 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -45,7 +45,18 @@ <h2>Select menus</h2>
4545
<p class="default">default: true</p>
4646
<p>Applies the theme button border-radius to the select button if set to true. This option is also exposed as a data attribute: <code>data-corners=&quot;false&quot;</code></p>
4747
<pre><code>$('select').selectmenu(<strong>{ corners: false }</strong>);</code></pre>
48-
</dd>
48+
</dd>
49+
<dt><code>dividerTheme</code> <em>string</em></dt>
50+
<dd>
51+
<p class="default">default: "b"</p>
52+
<p>Sets the color scheme (swatch) for dividers in popup-based custom select menus when using the <code>optgroup</code> 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 <a href="../../api/globalconfig.html">mobileinit event</a>:</p>
53+
<pre><code>$( document ).bind( "mobileinit", function(){
54+
<strong>$.mobile.listview.prototype.options.dividerTheme = "a";</strong>
55+
});
56+
</code></pre>
57+
<p>This option is also exposed as a data attribute: <code>data-divider-theme=&quot;a&quot;</code>.</p>
58+
</dd>
59+
4960
<dt><code>icon</code> <em>string</em></dt>
5061
<dd>
5162
<p class="default">default: "arrow-down"</p>

js/widgets/forms/select.custom.js

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -46,7 +46,10 @@ define( [
4646
"id": menuId,
4747
"role": "listbox",
4848
"aria-labelledby": buttonId
49-
}).attr( "data-" + $.mobile.ns + "theme", widget.options.theme ).appendTo( listbox ),
49+
}).attr( "data-" + $.mobile.ns + "theme", widget.options.theme )
50+
.attr( "data-" + $.mobile.ns + "divider-theme", widget.options.dividerTheme )
51+
.appendTo( listbox ),
52+
5053

5154
header = $( "<div>", {
5255
"class": "ui-header ui-bar-" + widget.options.theme

js/widgets/forms/select.js

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -20,6 +20,7 @@ $.widget( "mobile.selectmenu", $.mobile.widget, {
2020
shadow: true,
2121
iconshadow: true,
2222
overlayTheme: "a",
23+
dividerTheme: "b",
2324
hidePlaceholderMenuItems: true,
2425
closeText: "Close",
2526
nativeMenu: true,

0 commit comments

Comments
 (0)