jQuery Mobile: как вы имитируете шаблон слайд-навигации для iOS на jQuery Mobile?

Question

РЕДАКТИРОВАТЬ 2/13: Виджет Панели в jQuery Mobile 1.3 теперь существует!Используйте это вместо этого.

Я пытаюсь написать пользовательский переход на основе CSS в jQuery Mobile для имитации шаблона дизайна с выдвижной навигацией .

Я пытаюсь сделать так, чтобы навигация скользила в поле зрения и занимала 75% пространства области просмотра.Оставшиеся 25% заполнены остатком предыдущей страницы.

Вот мой CSS:

.slidenav.in { /*New page coming in*/
    -webkit-transform: translateX(-75%);
    -webkit-animation-name: slidenav-in;
}

@-webkit-keyframes slidenav-in {
    from { -webkit-transform: translateX(-75%); }
    to { -webkit-transform: translateX(0); }
}

.slidenav.out { /*Old page going out*/
    -webkit-transform: translateX(0);
    -webkit-animation-name: slidenav-content-out;
}

@-webkit-keyframes slidenav-content-out {
    from { -webkit-transform: translateX(0); }
    to { -webkit-transform: translateX(75%); }
}

.slidenav.in.reverse { /*Old page coming in*/
    -webkit-transform: translateX(75%);
    -webkit-animation-name: slidenav-content-in;
}

@-webkit-keyframes slidenav-content-in {
    from { -webkit-transform: translateX(75%); }
    to { -webkit-transform: translateX(0); }
}

.slidenav.out.reverse { /*New page going out*/
    -webkit-transform: translateX(0);
    -webkit-animation-name: slidenav-out;
}

@-webkit-keyframes slidenav-out {
    from { -webkit-transform: translateX(0); }
    to { -webkit-transform: translateX(-75%); }
}

Хотя я не могу заставить его делать то, что я хочу.Он полностью удаляет старую страницу вместо того, чтобы оставить оставшиеся 25% страницы в поле зрения.

Вы можете увидеть, что здесь происходит (браузеры Webkit): http://jsbin.com/ukajeb/7

Что я делаю неправильно

Answer 1

РЕДАКТИРОВАТЬ 2/13: Виджет Панели в jQuery Mobile 1.3 теперь существует! Пожалуйста, используйте это вместо.

Итак, я немного поработал над этим и с помощью Firebug обнаружил, что после анимации ключевого кадра исходная страница сбрасывается в исходное положение и display устанавливается на none.

Зная это, я начал более детально просматривать документы jQuery Mobile и обнаружил, что есть События перехода страницы , к которым можно привязаться. Более конкретно, события pageshow и pagehide.

Затем я вручную установил CSS исходной страницы:

$('[data-role=page]').live('pagehide',function(event, ui){
    $(this).css({
        "display": "block",
        "-webkit-transform": "translateX(75%)"
    });
});
$('[data-role=page]').live('pageshow',function(event, ui){
    $(this).css({
        "display": "",
        "-webkit-transform": ""
    });
});

Проверьте это здесь (браузеры Webkit): http://jsbin.com/ukajeb/3

Надеюсь, кому-то это тоже пригодится!

Примечание: В этом демонстрационном примере используется jQuery Mobile 1.0.1, который поддерживает только jQuery 1.6.4. Вот почему .live() было использовано вместо .on(). Однако предстоящий jQuery Mobile 1.1.0 будет поддерживать jQuery 1.7.1, поэтому вместо устаревшего .live().

следует использовать движение вперед .on().

Answer 2

Я не знаю, поможет ли это полностью, но я немного посмотрел на это внутри firebug. Я думаю, что когда вы завершаете переход (даже частичный), активная страница становится меню, в которое вы переходите. Это означает, что последняя страница скрыта, так как она больше не активна. И на самом деле вы можете видеть, когда переход завершает другую страницу с «содержанием» исчезает.

Вы можете попробовать это по вашей ссылке, которая вызывает меню - попробуйте использовать диалог. Вам все равно нужно применить свой пользовательский переход там. Я думаю, что вы пытаетесь достичь, вы также можете заглянуть в плагин под названием «подстраница», он может дать вам вид, который вы пытаетесь достичь. Также есть splitview (http://asyraf9.github.com/jquery-mobile/) В качестве альтернативы, вы можете попробовать поиграться с веткой 1.2 JQM и посмотреть, могут ли люди POPUP вас туда тоже доставить. По сути, это div, который может находиться поверх существующей активной страницы.

<a href="foo.html" data-rel="dialog">Open dialog</a>

Изначально я использовал диалог с эффектом скольжения вверх / вниз - но в Android это стало слишком хлопотно, поэтому мы удалили его.

Я не думаю, что JQM действительно был разработан по умолчанию, чтобы две страницы были активными и видимыми одновременно.