jquerymobile как заморозить экран - PullRequest
Новая
       5

jquerymobile как заморозить экран

11 голосов
/ 12 декабря 2011

Я выполняю ajax-вызов, и во время него я вручную запускаю loading animation в jquerymobile, вызывая $.mobile.showPageLoadingMsg()

. Я хочу, чтобы эта анимация загрузки была модальной (это не при ручном вызове).Другими словами, во время этой анимации я хочу заморозить весь экран (не только некоторые кнопки, но и все элементы должны быть не щелкаемыми, не редактируемыми, не выбираемыми)

кто-нибудь знает, как этого добиться?

Я знаюУ jquery-ui есть функция для этого, но нормально ли это использовать в jquerymobile?Я разрабатываю приложение для BlackBerry и Iphone с PhoneGap.Я бы предпочел мобильную версию, если она вообще существует.

спасибо

1 Ответ

23 голосов
/ 12 декабря 2011

Я думаю, это то, что вы ищете 

<html>
    <head>
        <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" />

        <style>
            .modalWindow{
width: 100%;
    height: 100%;
    position: absolute;
    z-index: 1500;
    background: white;
    opacity: 0.7;
}

.ui-loader{
    z-index: 1501;
}
        </style>
<script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"></script>
<script>
function showModal(){
  $("body").append('<div class="modalWindow"/>');
  $.mobile.showPageLoadingMsg();
  setTimeout('hideModal()', 2000);
}

function hideModal(){
 $(".modalWindow").remove();
  $.mobile.hidePageLoadingMsg();

}

</script>

    </head>
        <body>
        <div data-role="page">
            <div data-role="header" data-position="fixed">
                <h1>Header</h1>
            </div>
            <div data-role="content">
                <input type="button" value="Click to show modal loading window" onclick="showModal()"/>
            </div>
            <div data-role="footer" data-position="fixed">
                <h1>Footer</h1>
            </div>

        </div>

        </body> 
</html>

Демонстрация здесь - http://jsfiddle.net/8uGpP/

Здесь важно отметить, что вы должны дать z-indexдля маскирующего div выше z-index всех html-элементов, которые вы можете использовать в своем приложении, но меньше z-index загрузчика div . Для выполнения этого условия я переопределил z-index из .ui-loader.Только что использованный 1500 для демонстрационных целей, так как 1200 - это максимум z-index, используемый в рамках JQM.

...