JQuery мобильный UI-BTN-активный в Navbar - PullRequest
Новая
       63

JQuery мобильный UI-BTN-активный в Navbar

2 голосов
/ 15 января 2012

Я пытался заставить это работать 4 дня, но безуспешно.

У меня очень простое мобильное приложение jquery. Приложение имеет заголовок, контент и нижний колонтитул. Нижний колонтитул генерируется динамически в событии pagecreate, потому что он всегда один и тот же, и я не хочу, чтобы его HTML был на каждой странице.

Итак, я делаю что-то вроде этого: 

$(document).delegate('[data-role="page"]', 'pagecreate', function (e) {
DrawHeader($(this));
DrawFooter($(this));
SetFooterEvents($(this));
SetActiveFooter($(this));

});

DrawHeader () и DrawFooter () просто подготавливают div заголовка к странице и добавляют div нижнего колонтитула. SetFooterEvents () устанавливает события onclick кнопок навигационной панели нижнего колонтитула, а SetActiveFooter () ПРЕДЛОЖЕН для установки ui-btn-active для текущей активной ссылки нижнего колонтитула. Для этого я добавил атрибут data-active-footer к странице div, а атрибут data-name - к элементам панели навигации. Я ищу текущий элемент в соответствии с data-active-footer на странице и применяю класс ui-btn-active. 

function SetActiveFooter(page) {
page.children('div[data-role="footer"]')
    .find('a[data-name="' + page
        .attr("data-active-footer") + '"]').addClass("ui-btn-active");}

Пока все хорошо.

Теперь, скажем, я перешел на страницу, и навигационная панель горит (она успешно получила класс ui-btn-active), и я нажимаю на предыдущую страницу, освещенный элемент в навигационной панели не меняется обратно!
Если я нажимаю на страницу еще раз (то есть: меняю на вторую страницу [загорелся индикатор), снова переключаюсь на первую страницу [вторая страница все еще горит], затем снова нажимаю на первую страницу), она загорается кнопка панели навигации .

Я обнаружил, что jqm также изменил панель навигации предыдущей страницы, когда я меняю панель навигации текущей страницы в событии 'pagecreate'. Я пытался переписать это поведение, используя событие «pageshow», то есть пытаясь применить класс ui-btn-active к текущему элементу в панели навигации, но проблема в том, что объекты $ (this) и e.currentTarget в Событие 'PageShow' НЕ СОДЕРЖИТ ЭЛЕМЕНТ ФУТБОЛА !!! 

$(".ui-page").live('pageshow', function (e) {
alert($(this).children('div').length); // returns 2!
alert($(this).children('div[data-role="footer"]').length); //returns 0

alert($(e.currentTarget).children('div').length); // returns 2!
alert($(e.currentTarget).children('div[data-role="footer"]').length); //returns 0});

Есть идеи?!

Спасибо.

Ответы [ 3 ]

4 голосов
/ 15 января 2012

Прежде чем углубляться в детали, попробуйте добавить .ui-state-persist вместе с .ui-btn-active

Это гарантирует, что активные кнопки остаются активными, когда вы меняетеPage и нижний колонтитул остается тем же. Также убедитесь, что все нижние колонтитулы имеют одинаковый атрибут data-id .

О sidenote: проверьте последнее сообщение в блоге о новых возможностях для jqm 1.1 - в него будет включена утилита для извлечения ссылок, которая позволяет ajax-обновить части страницы. Таким образом, вы можете использовать эту функцию, чтобы захватить и вставить нижний колонтитул на каждой странице Я пытаюсь сделать то же самое прямо сейчас с формой входа, которая мне нужна на каждой странице.

3 голосов
/ 12 июля 2012

Вы пробовали "ui-state-persist"? 

<div data-role="navbar" data-iconpos="top">
    <ul>
        <li><a href="#page1" data-icon="home" class="ui-btn-active ui-state-persist">Home</a></li>
        <li><a href="#page2" data-icon="star">Favorite</a></li>
    </ul>
</div>
2 голосов
/ 17 января 2012

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

Во всяком случае, я использовал этот обходной путь для решения проблемы: В событии «pagebeforeshow» я установил кнопку, которую хочу активировать, для всех нижних колонтитулов в документах. Я установил специальный атрибут data-name для каждой кнопки панели навигации, назначив ему класс 'ui-btn-active' после удаления его из остальных элементов. 

var $footers = $(document).find('div[data-role="footer"]');
$footers.find('a').removeClass("ui-btn-active");
$footers.find('a[data-name="' + page
        .attr("data-active-footer") + '"]').addClass("ui-btn-active");
...