Выбор не происходит должным образом в Navbar в JQuery Mobile - PullRequest
Новая
       27

Выбор не происходит должным образом в Navbar в JQuery Mobile

1 голос
/ 04 июля 2011

Я пытаюсь создать HTML-страницу с постоянными нижними колонтитулами, используя jquery mobile. Это код, который я использую: 

<!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>
    </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">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">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">Third page</a></li>
                    </ul>
                </div>
            </div>    
        </div>
    </body>
</html>

Следующий пример использования иллюстрирует проблему, с которой я сталкиваюсь

1) Нажмите вторую кнопку на панели навигации.

2) Содержание второй страницы отображается правильно, а вторая кнопка остается выбранной.

3) Нажмите первую кнопку на панели навигации.

4) Содержимое домашней страницы отображается правильно, но первая кнопка не находится в выбранном состоянии

5) Снова нажмите первую кнопку.

6) Теперь первая кнопка находится в выбранном состоянии.

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

Заранее спасибо за помощь.

Ответы [ 3 ]

2 голосов
/ 20 февраля 2012

Решение: http://jquerymobile.com/blog/2011/03/31/jquery-mobile-alpha-4-released/

добавить класс ui-state-persist с помощью ui-btn-active

page2
2 голосов
/ 05 июля 2011

У меня была эта проблема, я знаю, что это не самое красивое решение, но вы можете привязать к событию pageshow (или pagebeforeshow) для каждой страницы и изменить состояние кнопки на pageshow: 

$(document).delegate('div[id*="events"]', 'pagebeforeshow',function(event){
    $('#' + $(this).attr('id') + '_link').attr('class','ui-btn-active ui-btn ui-btn-up-a');
});

В этом примере любая страница, на которой есть «события» в идентификаторе, сделает ссылку с идентификатором страницы плюс «_link» (например, «events_link») активной. Вы можете использовать код, подобный этому, чтобы каждая страница добавляла активный класс к соответствующей ссылке в нижнем колонтитуле: 

$(document).delegate('#home, #page2, #page3', 'pagebeforeshow',function(event){
    $('#' + $(this).attr('id') + '_link').addClass('ui-btn-active');
});

ПРИМЕЧАНИЕ. Приведенный выше пример кода требует, чтобы ссылки в нижних колонтитулах имели идентификаторы: home_link, page2_link, page3_link. Вот обновленная версия вашего jsfiddle: http://jsfiddle.net/tKMgd/5/

0 голосов
/ 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>

...