Permalink
Browse files

custom selectmenu: markup creation loop improvements

  • Loading branch information...
1 parent 83765f0 commit ca2ada83ac49d05af40d98866cce8acd588f7c7b sgrebnov committed Dec 16, 2011
Showing with 55 additions and 39 deletions.
  1. +55 −39 js/jquery.mobile.forms.select.custom.js
@@ -408,49 +408,65 @@
self.list.empty().filter( ".ui-listview" ).listview( "destroy" );
- // Populate menu with options from select element
- self.select.find( "option" ).each( function( i ) {
- var $this = $( this ),
- $parent = $this.parent(),
- text = $this.getEncodedText(),
- anchor = "<a href='#'>"+ text +"</a>",
- classes = [],
- extraAttrs = [];
-
- // Are we inside an optgroup?
- if ( $parent.is( "optgroup" ) ) {
- var optLabel = $parent.attr( "label" );
-
- // has this optgroup already been built yet?
- if ( $.inArray( optLabel, optgroups ) === -1 ) {
- lis.push( "<li data-" + $.mobile.ns + "role='list-divider'>"+ optLabel +"</li>" );
- optgroups.push( optLabel );
+ var $options = self.select.find("option"),
+ numOptions = $options.length,
+ select = this.select[ 0 ],
+ dataPrefix = 'data-' + $.mobile.ns,
+ dataIndexAttr = dataPrefix + 'option-index',
+ dataIconAttr = dataPrefix + 'icon',
+ dataRoleAttr = dataPrefix + 'role',
+ fragment = document.createDocumentFragment(),
+ optGroup;
+
+ for (var i = 0; i < numOptions;i++){
+ var option = $options[i],
+ $option = $(option),
+ parent = option.parentNode,
+ text = $option.text(),
+ anchor = document.createElement('a');
+ classes = [];
+
+ anchor.setAttribute('href','#');
+ anchor.appendChild(document.createTextNode(text));
+
+ // Are we inside an optgroup?
+ if (parent !== select && parent.nodeName.toLowerCase() === "optgroup"){
+ var optLabel = parent.getAttribute('label');
+ if ( optLabel != optGroup) {
+ var divider = document.createElement('li');
+ divider.setAttribute(dataRoleAttr,'list-divider');
+ divider.setAttribute('role','option');
+ divider.setAttribute('tabindex','-1');
+ divider.appendChild(document.createTextNode(optLabel));
+ fragment.appendChild(divider);
+ optGroup = optLabel;
}
+ }
+
+ if (!placeholder){
+ if ( !option.getAttribute( "value" ) || text.length == 0 || $option.jqmData( "placeholder" ) ) {
+ if ( o.hidePlaceholderMenuItems ) {
+ classes.push( "ui-selectmenu-placeholder" );
+ }
+ placeholder = self.placeholder = text;
+ }
}
-
- // Find placeholder text
- // TODO: Are you sure you want to use getAttribute? ^RW
- if ( !this.getAttribute( "value" ) || text.length == 0 || $this.jqmData( "placeholder" ) ) {
- if ( o.hidePlaceholderMenuItems ) {
- classes.push( "ui-selectmenu-placeholder" );
- }
- placeholder = self.placeholder = text;
- }
-
- // support disabled option tags
- if ( this.disabled ) {
+
+ var item = document.createElement('li');
+ if ( option.disabled ) {
classes.push( "ui-disabled" );
- extraAttrs.push( "aria-disabled='true'" );
+ item.setAttribute('aria-disabled',true);
}
-
- lis.push( "<li data-" + $.mobile.ns + "option-index='" + i + "' data-" + $.mobile.ns + "icon='"+ dataIcon +"' class='"+ classes.join(" ") + "' " + extraAttrs.join(" ") +">"+ anchor +"</li>" );
- });
-
- self.list.html( lis.join(" ") );
-
- self.list.find( "li" )
- .attr({ "role": "option", "tabindex": "-1" })
- .first().attr( "tabindex", "0" );
+ item.setAttribute(dataIndexAttr,i);
+ item.setAttribute(dataIconAttr,dataIcon);
+ item.setAttribute('class',classes.join(" "));
+ item.setAttribute('role','option');
+ item.setAttribute('tabindex','-1');
+ item.appendChild(anchor);
+ fragment.appendChild(item);
+ }
+ fragment.firstChild.setAttribute('tabindex',0);
+ self.list[0].appendChild(fragment);
// Hide header close link for single selects
if ( !this.isMultiple ) {

0 comments on commit ca2ada8

Please sign in to comment.