2

JQMがselectmenuオーバーレイに使用するオフセットを定義する方法はありますか?

他のオプションは、次のようなプロトタイピングを介して設定できます。

$.mobile.page.prototype.options.addBackBtn   = true;
$.mobile.page.prototype.options.backBtnTheme = "a";

問題の説明

jQuery Mobileは画面のサイズを決定し、選択したメニューのオーバーレイを表示する方法を決定します。残念ながら、これは固定ヘッダーツールバーを使用せずにのみ機能するようです。これは、JQMが常に30pxのトップオフセットでソースを生成しているためですstyle="left: 741.65px; top: 30px;

cssルールの特異性は常にstyle-attributeの特異性よりも低いため、これをCSSのみで上書きする方法はありません。

JQMソースコードは、リリースごとに再度変更する必要があるため、変更したくありません。そして、私は非圧縮のソースを使用しません。

JQMから生成されたソース

<div class="ui-selectmenu ui-overlay-shadow ui-corner-all ui-body-a pop in"
     style="left: 741.65px; top: 30px;">

サンプル

http://jsfiddle.net/V8AAB/

JQMソースコード

これは、jQueryMobile1.0RC2の対応するコードです。

self.menuType = "overlay";

self.screen.height( $(document).height() ).removeClass( "ui-screen-hidden" );

// Try and center the overlay over the button
var roomtop = btnOffset - scrollTop,
    roombot = scrollTop + screenHeight - btnOffset,
    halfheight = menuHeight / 2,
    maxwidth = parseFloat( self.list.parent().css( "max-width" ) ),
    newtop, newleft;

if ( roomtop > menuHeight / 2 && roombot > menuHeight / 2 ) {
    newtop = btnOffset + ( self.button.outerHeight() / 2 ) - halfheight;
} else {
    // 30px tolerance off the edges
    newtop = roomtop > roombot ? scrollTop + screenHeight - menuHeight - 30 : scrollTop + 30;
}
4

1 に答える 1

1

推奨される修正:

.ui-selectmenu { z-index: 1100 !important; } 
于 2011-10-22T02:28:13.833 に答える