Как установить смещение на (selectmenu) оверлеях в jQuery Mobile [используя панель инструментов с фиксированным заголовком]? - PullRequest
2 голосов
/ 21 октября 2011

Есть ли способ определить смещение, которое JQM использует для оверлея selectmenu?

Другие параметры могут быть установлены с помощью прототипов следующим образом:

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

Описание проблемы

jQuery Mobile определяет размер экрана и решает, как отображать наложение для отдельных меню. К сожалению, похоже, что это работает только без использования панели инструментов заголовка fixed , потому что JQM генерирует источник здесь всегда с верхним смещением 30px style="left: 741.65px; top: 30px;.

Нет способов переписать это только с помощью CSS, потому что специфичность правил css всегда ниже, чем у атрибута style!

Я не хочу менять исходный код 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 Исходный код

Это соответствующий код из jQuery Mobile 1.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;
}

1 Ответ

1 голос
/ 22 октября 2011

Предлагаемое исправление:

.ui-selectmenu { z-index: 1100 !important; } 
...