diff --git a/js/jquery.mobile.forms.select.js b/js/jquery.mobile.forms.select.js index 508d1d2f..346da3f3 100644 --- a/js/jquery.mobile.forms.select.js +++ b/js/jquery.mobile.forms.select.js @@ -29,9 +29,9 @@ $.widget( "mobile.selectmenu", $.mobile.widget, { select = this.element .wrap( "
" ), - - selectID = select.attr( "id" ), - + + selectID = select.attr( "id" ), + label = $( "label[for="+ selectID +"]" ).addClass( "ui-select" ), button = ( self.options.nativeMenu ? $( "
" ) : $( "", { @@ -52,31 +52,31 @@ $.widget( "mobile.selectmenu", $.mobile.widget, { 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 ){ + } + + //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() + "
"+ @@ -85,17 +85,17 @@ $.widget( "mobile.selectmenu", $.mobile.widget, { "
" ) .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 = $( "
+ diff --git a/tests/unit/select/select_core.js b/tests/unit/select/select_core.js new file mode 100644 index 00000000..a21b4993 --- /dev/null +++ b/tests/unit/select/select_core.js @@ -0,0 +1,24 @@ +/* + * mobile select unit tests + */ + +(function($){ + var libName = "jquery.mobile.forms.select.js"; + + module(libName, { + teardown: function(){ location.hash = ""; } + }); + + + asyncTest( "custom select menu always renders screen from the left", function(){ + expect( 1 ); + var select = $("ul#select-offscreen-menu"); + + $('#select-offscreen-container a').trigger($.support.touch ? "touchend" : "mouseup"); + + setTimeout(function(){ + ok(select.offset().left >= 30); + start(); + }, 1000); + }); +})(jQuery); \ No newline at end of file diff --git a/tests/unit/select/select_events.js b/tests/unit/select/select_events.js index fdcc2ee6..75f6eca6 100644 --- a/tests/unit/select/select_events.js +++ b/tests/unit/select/select_events.js @@ -6,7 +6,9 @@ var mouseUpTouchEnd = $.support.touch ? "touchend" : "mouseup", libName = "jquery.mobile.forms.select.js"; - module(libName); + module(libName, { + teardown: function(){ location.hash = ""; } + }); test( "a large select menu should come up in a dialog many times", function(){ var menu, select = $("#select-choice-many-container a"); @@ -45,7 +47,7 @@ stop(); }); - + test( "selects marked with data-native-menu=true should use a div as their button", function(){ same($("#select-choice-native-container div.ui-btn").length, 1); }); @@ -53,7 +55,7 @@ test( "selects marked with data-native-menu=true should not have a custom menu", function(){ same($("#select-choice-native-container ul").length, 0); }); - + test( "selects marked with data-native-menu=true should sit inside the button", function(){ same($("#select-choice-native-container div.ui-btn select").length, 1); }); diff --git a/themes/default/jquery.mobile.theme.css b/themes/default/jquery.mobile.theme.css index eea445fb..e1b2c3cb 100755 --- a/themes/default/jquery.mobile.theme.css +++ b/themes/default/jquery.mobile.theme.css @@ -21,7 +21,7 @@ background-image: -webkit-gradient(linear,left top,left bottom, color-stop(0, #3c3c3c), color-stop(1, #111111)); - -msfilter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#3c3c3c', EndColorStr='#111111')"; + -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#3c3c3c', EndColorStr='#111111')"; } .ui-bar-a, .ui-bar-a input, @@ -352,7 +352,7 @@ background-image: -webkit-gradient(linear,left top,left bottom, color-stop(0, #eeeeee), color-stop(1, #fdfdfd)); - -msfilter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#eeeeee', EndColorStr='#fdfdfd')"; + -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#eeeeee', EndColorStr='#fdfdfd')"; } .ui-btn-down-c a.ui-link-inherit { color: #2F3E46; @@ -439,7 +439,7 @@ background-image: -webkit-gradient(linear,left top,left bottom, color-stop(0, #fdfdfd), color-stop(1, #eeeeee)); - -msfilter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#fdfdfd', EndColorStr='#eeeeee')"; + -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#fdfdfd', EndColorStr='#eeeeee')"; } .ui-btn-hover-d a.ui-link-inherit { color: #222; @@ -456,7 +456,7 @@ background-image: -webkit-gradient(linear,left top,left bottom, color-stop(0, #eeeeee), color-stop(1, #ffffff)); - -msfilter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#eeeeee', EndColorStr='#ffffff')"; + -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#eeeeee', EndColorStr='#ffffff')"; } .ui-btn-down-d a.ui-link-inherit { border: 1px solid #808080; @@ -470,7 +470,7 @@ background-image: -webkit-gradient(linear,left top,left bottom, color-stop(0, #cccccc), color-stop(1, #eeeeee)); - -msfilter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#cccccc', EndColorStr='#eeeeee')"; + -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#cccccc', EndColorStr='#eeeeee')"; } .ui-btn-up-d, .ui-btn-hover-d, @@ -493,7 +493,7 @@ background-image: -webkit-gradient(linear,left top,left bottom, color-stop(0, #fceda7), color-stop(1, #fadb4e)); - -msfilter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#fceda7', EndColorStr='#fadb4e')"; + -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#fceda7', EndColorStr='#fadb4e')"; } .ui-bar-e, .ui-bar-e input, @@ -520,7 +520,7 @@ background-image: -webkit-gradient(linear,left top,left bottom, color-stop(0, #fff), color-stop(1, #faeb9e)); - -msfilter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#ffffff', EndColorStr='#faeb9e')"; + -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#ffffff', EndColorStr='#faeb9e')"; } .ui-body-e, .ui-body-e input, @@ -569,7 +569,7 @@ background-image: -webkit-gradient(linear,left top,left bottom, color-stop(0, #fcf0b5), color-stop(1, #fbe26f)); - -msfilter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#fcf0b5', EndColorStr='#fbe26f')"; + -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#fcf0b5', EndColorStr='#fbe26f')"; } .ui-btn-hover-e a.ui-link-inherit { @@ -624,7 +624,7 @@ a.ui-link-inherit { background-image: -webkit-gradient(linear,left top,left bottom, color-stop(0, #85bae4), color-stop(1, #5393c5)); - -msfilter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#85bae4', EndColorStr='#5393c5')"; + -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#85bae4', EndColorStr='#5393c5')"; outline: none; } .ui-btn-active a.ui-link-inherit {