5 (function( $, undefined ) {
7 $.widget( "mobile.selectmenu", $.mobile.widget, {
19 hidePlaceholderMenuItems: true,
22 initSelector: "select:not(:jqmData(role='slider'))"
29 _setDisabled: function( value ) {
30 this.element.attr( "disabled", value );
31 this.button.attr( "aria-disabled", value );
32 return this._setOption( "disabled", value );
35 _focusButton : function() {
38 setTimeout( function() {
43 _selectOptions: function() {
44 return this.select.find( "option" );
47 // setup items that are generally necessary for select menu extension
48 _preExtension: function(){
49 this.select = this.element.wrap( "<div class='ui-select'>" );
50 this.selectID = this.select.attr( "id" );
51 this.label = $( "label[for='"+ this.selectID +"']" ).addClass( "ui-select" );
52 this.isMultiple = this.select[ 0 ].multiple;
53 if ( !this.options.theme ) {
54 this.options.theme = $.mobile.getInheritedTheme( this.select, "c" );
61 // Allows for extension of the native select for custom selects and other plugins
62 // see select.custom for example extension
63 // TODO explore plugin registration
64 this._trigger( "beforeCreate" );
66 this.button = this._button();
70 options = this.options,
72 // IE throws an exception at options.item() function when
73 // there is no selected item
74 // select first in this case
75 selectedIndex = this.select[ 0 ].selectedIndex == -1 ? 0 : this.select[ 0 ].selectedIndex,
77 // TODO values buttonId and menuId are undefined here
79 .text( $( this.select[ 0 ].options.item( selectedIndex ) ).text() )
80 .insertBefore( this.select )
84 iconpos: options.iconpos,
85 inline: options.inline,
86 corners: options.corners,
87 shadow: options.shadow,
88 iconshadow: options.iconshadow
91 // Opera does not properly support opacity on select elements
92 // In Mini, it hides the element, but not its text
93 // On the desktop,it seems to do the opposite
94 // for these reasons, using the nativeMenu option results in a full native select in Opera
95 if ( options.nativeMenu && window.opera && window.opera.version ) {
96 this.select.addClass( "ui-select-nativeonly" );
99 // Add counter for multi selects
100 if ( this.isMultiple ) {
101 this.buttonCount = $( "<span>" )
102 .addClass( "ui-li-count ui-btn-up-c ui-btn-corner-all" )
104 .appendTo( button.addClass('ui-li-has-count') );
107 // Disable if specified
108 if ( options.disabled || this.element.attr('disabled')) {
112 // Events on native select
113 this.select.change( function() {
124 .appendTo( self.button )
125 .bind( "vmousedown", function() {
126 // Add active class to button
127 self.button.addClass( $.mobile.activeBtnClass );
129 .bind( "focus vmouseover", function() {
130 self.button.trigger( "vmouseover" );
132 .bind( "vmousemove", function() {
133 // Remove active class on scroll/touchmove
134 self.button.removeClass( $.mobile.activeBtnClass );
136 .bind( "change blur vmouseout", function() {
137 self.button.trigger( "vmouseout" )
138 .removeClass( $.mobile.activeBtnClass );
140 .bind( "change blur", function() {
141 self.button.removeClass( "ui-btn-down-" + self.options.theme );
145 selected: function() {
146 return this._selectOptions().filter( ":selected" );
149 selectedIndices: function() {
152 return this.selected().map( function() {
153 return self._selectOptions().index( this );
157 setButtonText: function() {
158 var self = this, selected = this.selected();
160 this.button.find( ".ui-btn-text" ).text( function() {
161 if ( !self.isMultiple ) {
162 return selected.text();
165 return selected.length ? selected.map( function() {
166 return $( this ).text();
167 }).get().join( ", " ) : self.placeholder;
171 setButtonCount: function() {
172 var selected = this.selected();
174 // multiple count inside button
175 if ( this.isMultiple ) {
176 this.buttonCount[ selected.length > 1 ? "show" : "hide" ]().text( selected.length );
180 refresh: function() {
181 this.setButtonText();
182 this.setButtonCount();
185 // open and close preserved in native selects
186 // to simplify users code when looping over selects
190 disable: function() {
191 this._setDisabled( true );
192 this.button.addClass( "ui-disabled" );
196 this._setDisabled( false );
197 this.button.removeClass( "ui-disabled" );
201 //auto self-init widgets
202 $( document ).bind( "pagecreate create", function( e ){
203 $.mobile.selectmenu.prototype.enhanceWithin( e.target );