Как создать мобильные "скользящие страницы" с некоторыми базовыми Javascript / CSS? - PullRequest
0 голосов
/ 04 февраля 2012

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

$(function(){

    $('li').click( function() {     
        var body = document.getElementById('body');

        $('#second_list').css({
            top: body.scrollTop+'px',
            display: 'block'
        });

        $('#first_list').animate( { left: '-100%' }, 1000, null, function() {
            $(this).css({ display: 'none' });
        } );
        $('#second_list').animate( { left: '0%' }, 1000 );

        return false;
    } );

});

Использование scrollTop означает, что если прокрутить первую страницу вниз, вторая страница переместится и будет вверху. Проблема в том, что теперь есть пустое пространство над второй страницей. Могу ли я как-то удалить это? Может быть, прокрутив список и страницу обратно наверх после загрузки?

Я уверен, что это возможно, потому что Sencha Touch делает это. У кого-нибудь есть урезанный пример HTML / CSS / JS такого рода вещей в действии?

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...