Иногда постоянный нижний колонтитул также перемещается во время перехода страницы в jquerymobile - PullRequest
Новая
       12

Иногда постоянный нижний колонтитул также перемещается во время перехода страницы в jquerymobile

6 голосов
/ 06 июля 2011

Это HTML-код, который у меня есть 

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta name="viewport" content="width=device-width; initial-scale=1.0" />
        <link rel="stylesheet"  href="http://code.jquery.com/mobile/1.0b1/jquery.mobile-1.0b1.min.css" />
        <script src="http://code.jquery.com/jquery-1.6.1.min.js"></script>
        <script src="http://code.jquery.com/mobile/1.0b1/jquery.mobile-1.0b1.min.js"></script>
        <script>
        $('#home, #page2, #page3').live('pagebeforeshow',function(event){
            $('#' + $(this).attr('id') + '_link').addClass('ui-btn-active');
        });
        </script>
    </head>
    <body>
        <div data-role="page" id="home">
            <div data-role="header" data-theme="b">
                <h1>Test</h1>
            </div>
            <div data-role="content" data-theme="b">
                Home Page
            </div>
            <div data-role="footer" data-position="fixed" data-id="pFooter">
                <div data-role="navbar">
                    <ul>
                        <li><a href="#home" data-icon="custom" class="ui-btn-active" id="home_link">Home</a></li>
                        <li><a href="#page2" data-icon="grid">Second page</a></li>
                        <li><a href="#page3" data-icon="star">Third page</a></li>
                    </ul>
                </div>
            </div>    
        </div>
        <div data-role="page" id="page2">
            <div data-role="header" data-theme="b">
                <h1>Test</h1>
            </div>
            <div data-role="content" data-theme="b">
                Second page
            </div>
            <div data-role="footer" data-position="fixed" data-id="pFooter">
                <div data-role="navbar">
                    <ul>
                        <li><a href="#home" data-icon="custom">Home</a></li>
                        <li><a href="#page2" data-icon="grid"  class="ui-btn-active" id="page2_link">Second page</a></li>
                        <li><a href="#page3" data-icon="star">Third page</a></li>
                    </ul>
                </div>
            </div>    
        </div>
        <div data-role="page" id="page3">
            <div data-role="header" data-theme="b">
                <h1>Test</h1>
            </div>
            <div data-role="content" data-theme="b">
                Third page
            </div>
            <div data-role="footer" data-position="fixed" data-id="pFooter">
                <div data-role="navbar">
                    <ul>
                        <li><a href="#home" data-icon="custom">Home</a></li>
                        <li><a href="#page2" data-icon="grid">Second page</a></li>
                        <li><a href="#page3" data-icon="star" class="ui-btn-active" id="page3_link">Third page</a></li>
                    </ul>
                </div>
            </div>    
        </div>
    </body>
</html>

Проблема, с которой я сталкиваюсь, заключается в том, что иногда, когда я изменяю выбор панели навигации, нижний колонтитул также перемещается влево или вправо вместе со страницей. Вы можете воспроизвести проблему, постоянно меняя выбор кнопки на панели навигации.

Вы можете увидеть это здесь - http://jsfiddle.net/tKMgd/5/

Ответы [ 3 ]

2 голосов
/ 08 мая 2012

Если проблема связана с верхним / нижним колонтитулом, а не с использованием data-position = "fixed" в вашем html, просто установите положение: исправьте в вашем css и дайте элементу высокий z-индекс - альт, больше не "мигающий"

1 голос
/ 07 мая 2012

Я не делал ничего конкретного для решения этой проблемы. Но с течением времени проблема не возникала. Между тем я обновил версии JQM, которые я использовал, и теперь использую JQM 1.1

1 голос
/ 05 января 2012

Кто-то обсуждал эту проблему и нашел временное решение, может, оно тоже подойдет вам?

https://github.com/jquery/jquery-mobile/issues/2226

Выдержка из ответа

При быстром переключении между страницами с помощью постоянного нижнего колонтитула (с тот же идентификатор данных) исходный код не идентифицирует предыдущую страницу сноска. Проблема возникает из-за setTimeout (строка 5812 - jquery.mobile-1.0b2). Если вы быстро переключаетесь между страницами нижний колонтитул не будет там из-за задержки 500 мс. Если вы достанете это setTimeout или установить его на ноль, эта проблема не повторяется, но Я не уверен в последствиях этого.

Мне удалось воспроизвести эту проблему в Safari и iOS (у меня нет пробовал другие устройства / браузеры)

...