libs/js/jquery-mobile-1.0.1pre/js/jquery.mobile.forms.select.js

   1 /*
   2 * "selectmenu" plugin
   3 */
   4
   5 (function( $, undefined ) {
   6
   7 $.widget( "mobile.selectmenu", $.mobile.widget, {
   8         options: {
   9                 theme: null,
  10                 disabled: false,
  11                 icon: "arrow-d",
  12                 iconpos: "right",
  13                 inline: null,
  14                 corners: true,
  15                 shadow: true,
  16                 iconshadow: true,
  17                 menuPageTheme: "b",
  18                 overlayTheme: "a",
  19                 hidePlaceholderMenuItems: true,
  20                 closeText: "Close",
  21                 nativeMenu: true,
  22                 initSelector: "select:not(:jqmData(role='slider'))"
  23         },
  24
  25         _button: function(){
  26                 return $( "<div/>" );
  27         },
  28
  29         _setDisabled: function( value ) {
  30                 this.element.attr( "disabled", value );
  31                 this.button.attr( "aria-disabled", value );
  32                 return this._setOption( "disabled", value );
  33         },
  34
  35         _focusButton : function() {
  36                 var self = this;
  37
  38                 setTimeout( function() {
  39                         self.button.focus();
  40                 }, 40);
  41         },
  42
  43   _selectOptions: function() {
  44     return this.select.find( "option" );
  45   },
  46
  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" );
  55                 }
  56         },
  57
  58         _create: function() {
  59                 this._preExtension();
  60
  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" );
  65
  66                 this.button = this._button();
  67
  68                 var self = this,
  69
  70                         options = this.options,
  71
  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,
  76
  77                         // TODO values buttonId and menuId are undefined here
  78                         button = this.button
  79                                 .text( $( this.select[ 0 ].options.item( selectedIndex ) ).text() )
  80                                 .insertBefore( this.select )
  81                                 .buttonMarkup( {
  82                                         theme: options.theme,
  83                                         icon: options.icon,
  84                                         iconpos: options.iconpos,
  85                                         inline: options.inline,
  86                                         corners: options.corners,
  87                                         shadow: options.shadow,
  88                                         iconshadow: options.iconshadow
  89                                 });
  90
  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" );
  97                 }
  98
  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" )
 103                                 .hide()
 104                                 .appendTo( button.addClass('ui-li-has-count') );
 105                 }
 106
 107                 // Disable if specified
 108                 if ( options.disabled || this.element.attr('disabled')) {
 109                         this.disable();
 110                 }
 111
 112                 // Events on native select
 113                 this.select.change( function() {
 114                         self.refresh();
 115                 });
 116
 117                 this.build();
 118         },
 119
 120         build: function() {
 121                 var self = this;
 122
 123                 this.select
 124                         .appendTo( self.button )
 125                         .bind( "vmousedown", function() {
 126                                 // Add active class to button
 127                                 self.button.addClass( $.mobile.activeBtnClass );
 128                         })
 129                         .bind( "focus vmouseover", function() {
 130                                 self.button.trigger( "vmouseover" );
 131                         })
 132                         .bind( "vmousemove", function() {
 133                                 // Remove active class on scroll/touchmove
 134                                 self.button.removeClass( $.mobile.activeBtnClass );
 135                         })
 136                         .bind( "change blur vmouseout", function() {
 137                                 self.button.trigger( "vmouseout" )
 138                                         .removeClass( $.mobile.activeBtnClass );
 139                         })
 140                         .bind( "change blur", function() {
 141                                 self.button.removeClass( "ui-btn-down-" + self.options.theme );
 142                         });
 143         },
 144
 145         selected: function() {
 146                 return this._selectOptions().filter( ":selected" );
 147         },
 148
 149         selectedIndices: function() {
 150                 var self = this;
 151
 152                 return this.selected().map( function() {
 153                         return self._selectOptions().index( this );
 154                 }).get();
 155         },
 156
 157         setButtonText: function() {
 158                 var self = this, selected = this.selected();
 159
 160                 this.button.find( ".ui-btn-text" ).text( function() {
 161                         if ( !self.isMultiple ) {
 162                                 return selected.text();
 163                         }
 164
 165                         return selected.length ? selected.map( function() {
 166                                 return $( this ).text();
 167                         }).get().join( ", " ) : self.placeholder;
 168                 });
 169         },
 170
 171         setButtonCount: function() {
 172                 var selected = this.selected();
 173
 174                 // multiple count inside button
 175                 if ( this.isMultiple ) {
 176                         this.buttonCount[ selected.length > 1 ? "show" : "hide" ]().text( selected.length );
 177                 }
 178         },
 179
 180         refresh: function() {
 181                 this.setButtonText();
 182                 this.setButtonCount();
 183         },
 184
 185         // open and close preserved in native selects
 186         // to simplify users code when looping over selects
 187         open: $.noop,
 188         close: $.noop,
 189
 190         disable: function() {
 191                 this._setDisabled( true );
 192                 this.button.addClass( "ui-disabled" );
 193         },
 194
 195         enable: function() {
 196                 this._setDisabled( false );
 197                 this.button.removeClass( "ui-disabled" );
 198         }
 199 });
 200
 201 //auto self-init widgets
 202 $( document ).bind( "pagecreate create", function( e ){
 203         $.mobile.selectmenu.prototype.enhanceWithin( e.target );
 204 });
 205 })( jQuery );