Skip to content
This repository

Select: Add non-native optgroup divider-theme support #4812

Closed
wants to merge 6 commits into from

2 participants

Maurice Gottlieb Jasper de Groot
Maurice Gottlieb

@uGoMibo

Hi,
if you have a moment, I'd like you take a look.
Thanks in advance!

Maurice

Jasper de Groot
Collaborator

hi @MauriceG

The code looks good to me. I suppose you ran the select unit test and created a test page to see if it works as expected?

There is a small typo in the commit for the docs: the adjusted text should start with "a divider" instead of "divider". That & which was already in that line, looks a bit weird. Do you mind replacing that by "and"?

Can you add the option to the data attribute reference?

Thanks!

Jasper de Groot
Collaborator

@MauriceG

I forgot one thing for the docs: "The default theme for group dividers" should be "The default theme swatch for group dividers".

Maurice Gottlieb

Hi @uGoMobi !

Sorry for delay. I was on holiday :-)

Thanks for looking into this. I've added some commits for the docs.

Demo at: http://jsfiddle.net/MauriceG/ULZfw/show/light/

Tests: 54 tests of 54 passed, 0 failed.

Hope you and your hardware are back soon!

Maurice

Jasper de Groot
Collaborator

hi @MauriceG !

I hope you enjoyed your holiday. I have a new computer so my hardware is all fine now :)

@toddparker - As discussed during last thursday's meeting I will merge this PR for 1.2 beta.

@johnbender @gseguin - Can one of you review the first two commits as well? Thanks!

I will add a unit test for this.

Jasper

Jasper de Groot
Collaborator

@MauriceG - Why did you close this PR?

Maurice Gottlieb

Hi @uGoMobi

I did close this accidently because I'm a github jackass ...
And I'm unable to reopen it.

Maurice

Jasper de Groot
Collaborator

@MauriceG

LOL

I cannot re-open it either because you closed it yourself. New PR? :)

Maurice Gottlieb

@uGoMobi

Ok.

  • I've dropped the underlying branch and I did not know, that the PR will be closed then :-/

Maurice

Maurice Gottlieb MauriceG referenced this pull request from a commit in MauriceG/jquery-mobile
Maurice Gottlieb MauriceG Select: Add optgroup theming for non-native select - #1
Fix for #4812
438004b
Jasper de Groot
Collaborator

Replaced by PR #5033

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
This page is out of date. Refresh to see the latest.
5 docs/api/data-attributes.html
@@ -548,6 +548,11 @@
548 548 <p>All <code>select</code> form elements are auto-enhanced, no <code>data-role</code> required</p>
549 549 <table>
550 550 <tr>
  551 + <th>data-divider-theme</th>
  552 + <td>swatch letter (a-z) - Default "b" - Only for <code>optgroup</code> list-dividers in non-native selects</td>
  553 + </tr>
  554 +
  555 + <tr>
551 556 <th>data-icon</th>
552 557 <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>
553 558 </tr>
2  docs/forms/selects/custom.html
@@ -277,7 +277,7 @@
277 277
278 278
279 279 <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>optgroup label</code> attribute's text. The default theme swatch 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>
281 281
282 282 <div data-role="fieldcontain">
283 283 <label for="select-choice-8" class="select">Shipping method:</label>
14 docs/forms/selects/options.html
@@ -45,7 +45,18 @@
45 45 <p class="default">default: true</p>
46 46 <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>
47 47 <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 +
49 60 <dt><code>icon</code> <em>string</em></dt>
50 61 <dd>
51 62 <p class="default">default: "arrow-down"</p>
@@ -55,7 +66,6 @@
55 66 <p>To suppress the icon, a boolean expression must be used:</p>
56 67 <pre><code>$('select').selectmenu(<strong>{ icon: false }</strong>);</code></pre>
57 68 </dd>
58   -
59 69 <dt><code>iconpos</code> <em>string</em></dt>
60 70 <dd>
61 71 <p class="default">default: "right"</p>
4 js/widgets/forms/select.custom.js
@@ -46,7 +46,9 @@ define( [
46 46 "id": menuId,
47 47 "role": "listbox",
48 48 "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 ),
50 52
51 53 header = $( "<div>", {
52 54 "class": "ui-header ui-bar-" + widget.options.theme
1  js/widgets/forms/select.js
@@ -20,6 +20,7 @@ $.widget( "mobile.selectmenu", $.mobile.widget, {
20 20 shadow: true,
21 21 iconshadow: true,
22 22 overlayTheme: "a",
  23 + dividerTheme: "b",
23 24 hidePlaceholderMenuItems: true,
24 25 closeText: "Close",
25 26 nativeMenu: true,

Tip: You can add notes to lines in a file. Hover to the left of a line to make a note

Something went wrong with that request. Please try again.