/* * jQuery Mobile Framework : "selectmenu" plugin * Copyright (c) jQuery Project * Dual licensed under the MIT or GPL Version 2 licenses. * http://jquery.org/license */ (function($, undefined ) { $.widget( "mobile.selectmenu", $.mobile.widget, { options: { theme: null, disabled: false, icon: 'arrow-d', iconpos: 'right', inline: null, corners: true, shadow: true, iconshadow: true, menuPageTheme: 'b', overlayTheme: 'a', hidePlaceholderMenuItems: true, closeText: 'Close', nativeMenu: true }, _create: function(){ var self = this, o = this.options, select = this.element .wrap( "
" ), selectID = select.attr( "id" ), label = $( 'label[for="'+ selectID +'"]' ).addClass( "ui-select" ), //IE throws an exception at options.item() function when //there is no selected item //select first in this case selectedIndex = select[0].selectedIndex == -1 ? 0 : select[0].selectedIndex, button = ( self.options.nativeMenu ? $( "
" ) : $( "", { "href": "#", "role": "button", "id": buttonId, "aria-haspopup": "true", "aria-owns": menuId }) ) .text( $( select[0].options.item( selectedIndex ) ).text() ) .insertBefore( select ) .buttonMarkup({ theme: o.theme, icon: o.icon, iconpos: o.iconpos, inline: o.inline, corners: o.corners, shadow: o.shadow, iconshadow: o.iconshadow }), //multi select or not isMultiple = self.isMultiple = select[0].multiple; //Opera does not properly support opacity on select elements //In Mini, it hides the element, but not its text //On the desktop,it seems to do the opposite //for these reasons, using the nativeMenu option results in a full native select in Opera if( o.nativeMenu && window.opera && window.opera.version ){ select.addClass( "ui-select-nativeonly" ); } //vars for non-native menus if( !o.nativeMenu ){ var options = select.find("option"), buttonId = selectID + "-button", menuId = selectID + "-menu", thisPage = select.closest( ".ui-page" ), //button theme theme = /ui-btn-up-([a-z])/.exec( button.attr("class") )[1], menuPage = $( "
" + "
" + "
" + label.text() + "
"+ "
"+ "
"+ "
" ) .appendTo( $.mobile.pageContainer ) .page(), menuPageContent = menuPage.find( ".ui-content" ), menuPageClose = menuPage.find( ".ui-header a" ), screen = $( "
", {"class": "ui-selectmenu-screen ui-screen-hidden"}) .appendTo( thisPage ), listbox = $( "
", { "class": "ui-selectmenu ui-selectmenu-hidden ui-overlay-shadow ui-corner-all pop ui-body-" + o.overlayTheme } ) .insertAfter(screen), list = $( "