@@ -35,7 +35,7 @@ define( [
35
35
"<div class='ui-title'>" + label . getEncodedText ( ) + "</div>" +
36
36
"</div>" +
37
37
"<div data-" + $ . mobile . ns + "role='content'></div>" +
38
- "</div>" ) . appendTo ( $ . mobile . pageContainer ) . page ( ) ,
38
+ "</div>" ) ,
39
39
40
40
listbox = $ ( "<div>" , { "class" : "ui-selectmenu ui-selectmenu-hidden ui-overlay-shadow ui-corner-all ui-body-" + widget . options . overlayTheme + " " + $ . mobile . defaultDialogTransition } ) . insertAfter ( screen ) ,
41
41
@@ -60,9 +60,9 @@ define( [
60
60
"class" : "ui-btn-left"
61
61
} ) . attr ( "data-" + $ . mobile . ns + "iconpos" , "notext" ) . attr ( "data-" + $ . mobile . ns + "icon" , "delete" ) . appendTo ( header ) . buttonMarkup ( ) ,
62
62
63
- menuPageContent = menuPage . find ( ".ui-content" ) ,
64
-
65
- menuPageClose = menuPage . find ( ".ui-header a" ) ;
63
+ menuPageContent ,
64
+
65
+ menuPageClose ;
66
66
67
67
68
68
$ . extend ( widget , {
@@ -333,6 +333,11 @@ define( [
333
333
}
334
334
335
335
if ( menuHeight > screenHeight - 80 || ! $ . support . scrollTop ) {
336
+
337
+ self . menuPage . appendTo ( $ . mobile . pageContainer ) . page ( ) ;
338
+ self . menuPageContent = menuPage . find ( ".ui-content" ) ;
339
+ self . menuPageClose = menuPage . find ( ".ui-header a" ) ;
340
+
336
341
// prevent the parent page from being removed from the DOM,
337
342
// otherwise the results of selecting a list item in the dialog
338
343
// fall into a black hole
@@ -425,49 +430,63 @@ define( [
425
430
426
431
self . list . empty ( ) . filter ( ".ui-listview" ) . listview ( "destroy" ) ;
427
432
428
- // Populate menu with options from select element
429
- self . select . find ( "option" ) . each ( function ( i ) {
430
- var $this = $ ( this ) ,
431
- $parent = $this . parent ( ) ,
432
- text = $this . getEncodedText ( ) ,
433
- anchor = "<a href='#'>" + text + "</a>" ,
434
- classes = [ ] ,
435
- extraAttrs = [ ] ;
436
-
437
- // Are we inside an optgroup?
438
- if ( $parent . is ( "optgroup" ) ) {
439
- var optLabel = $parent . attr ( "label" ) ;
440
-
441
- // has this optgroup already been built yet?
442
- if ( $ . inArray ( optLabel , optgroups ) === - 1 ) {
443
- lis . push ( "<li data-" + $ . mobile . ns + "role='list-divider'>" + optLabel + "</li>" ) ;
444
- optgroups . push ( optLabel ) ;
433
+ var $options = self . select . find ( "option" ) ,
434
+ numOptions = $options . length ,
435
+ select = this . select [ 0 ] ,
436
+ dataPrefix = 'data-' + $ . mobile . ns ,
437
+ dataIndexAttr = dataPrefix + 'option-index' ,
438
+ dataIconAttr = dataPrefix + 'icon' ,
439
+ dataRoleAttr = dataPrefix + 'role' ,
440
+ fragment = document . createDocumentFragment ( ) ,
441
+ optGroup ;
442
+
443
+ for ( var i = 0 ; i < numOptions ; i ++ ) {
444
+ var option = $options [ i ] ,
445
+ $option = $ ( option ) ,
446
+ parent = option . parentNode ,
447
+ text = $option . text ( ) ,
448
+ anchor = document . createElement ( 'a' ) ;
449
+ classes = [ ] ;
450
+
451
+ anchor . setAttribute ( 'href' , '#' ) ;
452
+ anchor . appendChild ( document . createTextNode ( text ) ) ;
453
+
454
+ // Are we inside an optgroup?
455
+ if ( parent !== select && parent . nodeName . toLowerCase ( ) === "optgroup" ) {
456
+ var optLabel = parent . getAttribute ( 'label' ) ;
457
+ if ( optLabel != optGroup ) {
458
+ var divider = document . createElement ( 'li' ) ;
459
+ divider . setAttribute ( dataRoleAttr , 'list-divider' ) ;
460
+ divider . setAttribute ( 'role' , 'option' ) ;
461
+ divider . setAttribute ( 'tabindex' , '-1' ) ;
462
+ divider . appendChild ( document . createTextNode ( optLabel ) ) ;
463
+ fragment . appendChild ( divider ) ;
464
+ optGroup = optLabel ;
445
465
}
446
- }
447
-
448
- // Find placeholder text
449
- // TODO: Are you sure you want to use getAttribute? ^RW
450
- if ( ! this . getAttribute ( "value" ) || text . length == 0 || $this . jqmData ( "placeholder" ) ) {
466
+ }
467
+
468
+ if ( ! placeholder && ( ! option . getAttribute ( "value" ) || text . length == 0 || $option . jqmData ( "placeholder" ) ) ) {
451
469
if ( o . hidePlaceholderMenuItems ) {
452
470
classes . push ( "ui-selectmenu-placeholder" ) ;
453
- }
454
- placeholder = self . placeholder = text ;
471
+ }
472
+ placeholder = self . placeholder = text ;
455
473
}
456
-
457
- // support disabled option tags
458
- if ( this . disabled ) {
474
+
475
+ var item = document . createElement ( 'li' ) ;
476
+ if ( option . disabled ) {
459
477
classes . push ( "ui-disabled" ) ;
460
- extraAttrs . push ( " aria-disabled=' true'" ) ;
478
+ item . setAttribute ( ' aria-disabled' , true ) ;
461
479
}
462
-
463
- lis . push ( "<li data-" + $ . mobile . ns + "option-index='" + i + "' data-" + $ . mobile . ns + "icon='" + dataIcon + "' class='" + classes . join ( " " ) + "' " + extraAttrs . join ( " " ) + ">" + anchor + "</li>" ) ;
464
- } ) ;
465
-
466
- self . list . html ( lis . join ( " " ) ) ;
467
-
468
- self . list . find ( "li" )
469
- . attr ( { "role" : "option" , "tabindex" : "-1" } )
470
- . first ( ) . attr ( "tabindex" , "0" ) ;
480
+ item . setAttribute ( dataIndexAttr , i ) ;
481
+ item . setAttribute ( dataIconAttr , dataIcon ) ;
482
+ item . className = classes . join ( " " ) ;
483
+ item . setAttribute ( 'role' , 'option' ) ;
484
+ item . setAttribute ( 'tabindex' , '-1' ) ;
485
+ item . appendChild ( anchor ) ;
486
+ fragment . appendChild ( item ) ;
487
+ }
488
+ fragment . firstChild . setAttribute ( 'tabindex' , 0 ) ;
489
+ self . list [ 0 ] . appendChild ( fragment ) ;
471
490
472
491
// Hide header close link for single selects
473
492
if ( ! this . isMultiple ) {
0 commit comments