Активное состояние вкладки в JQuery Mobile

Скажем, у нас есть 2 вкладки, используя data-role="navbar", и мы переключаемся на вторую вкладку, а затем переходим на другую новую страницу. Когда мы возвращаемся с предыдущей страницы, почему вкладка, которую мы выбрали для второй вкладки, не является активной. Первая вкладка отображается как активная. Является ли JQuery Mobile не справиться с этим.

Источник

3 ответа

Решение

Описание:

к несчастью jQuery Mobile не обрабатывать это правильно, поэтому мы должны сделать это. В основном вам нужно удалить href от Навбара li элемент. Смена страницы будет обработана вручную. Что мы делаем здесь, так это привязываем событие click к navbar li элемент. Когда пользователь нажимает на панель навигации, он удаляет классы ui-btn-activ и ui-state- persist из выбранного в данный момент элемента. Он добавит его к выбранному в данный момент элементу и инициализирует pageChange после небольшого перерыва. Время ожидания необходимо, потому что мы должны быть уверены, что класс добавлен до того, как произойдет изменение страницы.

Решение:

Вот рабочий пример, который я сделал некоторое время назад: http://jsfiddle.net/Gajotres/6h7gn/

Код:

Этот код создан для моего текущего примера и его панели навигации, поэтому слегка измените его для работы с панелью навигации.

$(document).on('pagebeforeshow', '#index', function(){ 
    $(document).on('click', '#kml li', function(){ 
        var selectedLi = $(this);
        $('#kml li').each(function( index ) {   
            var loopLi = $(this);
            if(loopLi.find('a').hasClass('ui-btn-active')) {  
                $(this).find('a').removeClass('ui-btn-activ').removeClass('ui-state-persist');
            }
        });         
       selectedLi.find('a').addClass('ui-state-persist');        
       setTimeout(function(){
            $.mobile.changePage( "#second", { transition: "slide"});
        },100);
    });       
});

Редактировать:

Следующий пример версии: http://jsfiddle.net/Gajotres/6h7gn/

Этот работает на каждой странице.

$(document).on('pagebeforeshow', '#index', function(){ 
    $(document).off('click', '#custom-navbar li').on('click', '#custom-navbar li', function(e){ 
        var selectedLi = $(this);
        $('#custom-navbar li').each(function( index ) {   
            var loopLi = $(this);
            if(loopLi.find('a').hasClass('ui-btn-active') || loopLi.find('a').hasClass('ui-state-persist')) { 
                loopLi.find('a').removeClass('ui-btn-activ').removeClass('ui-state-persist');
            }
            if(loopLi.attr('id') == selectedLi.attr('id')) {
                loopLi.find('a').addClass('ui-state-persist');   
            }
        });              
       setTimeout(function(){
            $.mobile.changePage( selectedLi.find('a').attr('data-href'), { transition: "slide"});
        },100);
    });       
});
Источник

Вот мое краткое решение. Это прекрасно работает для меня

Пример структуры HTML

<div id="profile-screen" data-role="page" class="page">
    <div data-role="content" class="content inner-page group">
        <div data-role="tabs">
            <div data-role="navbar">
                <ul>
                    <li><a href="#tab-profile" class="ui-btn-active">Profile</a></li>
                    <li><a href="#tab-addresses">Addresses</a></li>
                </ul>
            </div>

            <!-- Profile tab -->
            <div id="tab-profile" class="main-content"> Sample Content for the first tab</div>

            <!-- Addresses tab -->
            <div id="tab-addresses" class="main-content"> Sample Content for the second tab</div>
        </div>
    </div>
</div>

И это решение

$( "#profile-screen" ).on( "pagebeforeshow", function() {
    var active_content = $('#profile-screen .ui-tabs-panel[style*="block"]').attr('id');
    $('#profile-screen a[href^="#'+ active_content +'"]').addClass('ui-btn-active');
});

Сначала вы должны найти активный контент. Типичным для активного контента является то, что он имеет style="display:block", Когда вы найдете его, вы должны получить идентификатор (это var active_content в моем коде). Когда вы знаете, какой контент активен, все, что вам нужно сделать, это найти правильный тег привязки и установить класс ui-btn-active, И все эти вещи, которые вы должны ввести pagebeforeshow событие.

Источник

Я знаю, что это старо, но нет необходимости во всем этом.

У меня тоже была эта проблема, и все, что вам нужно, это несколько строк, чтобы исправить ее. В моем случае это были вкладки, поэтому не нужно было менять страницу.

$(document).on( "pageinit", "#yourpageID", function() {
    $('div[data-role="tabs"] [data-role="navbar"] a').click( function(e) {
        e.preventDefault();
        $('div[data-role="tabs"] [data-role="navbar"] .ui-btn-active').removeClass('ui-btn-active ui-state-persist');
        $(this).addClass('ui-btn-active ui-state-persist');
    });
});

Также будьте осторожны, используя события страницы, такие как pagebeforeshow, для привязки событий в JQM, предыдущая (или более) страница может находиться в кэше, и если вы будете перемещаться назад и вперед, событие click будет связано несколько раз. Вместо этого используйте Pageinit или.one, чтобы связать события

Источник
Другие вопросы по тегам