JQuery Mobile中的选项卡活动状态 [英] Tab active state in JQuery Mobile

问题描述

假设使用data-role="navbar"有2个选项卡，然后切换到第二个选项卡，然后转到另一个新页面.当我们从上一页返回时，为什么我们选择的第二个选项卡没有处于活动状态.它显示第一个选项卡为仅活动的. jQuery mobile无法处理此问题吗?

Say we have 2 tabs using data-role="navbar", and we switch to the second tab and then go to another new page. When we return back from the previous page, why is the tab that we selected second tab is not the one which is active. It shows the first tab as only active. Is jquery mobile not handling this.

推荐答案

说明:

很遗憾， jQuery Mobile 处理不正确，因此我们需要这样做.基本上，您需要从导航栏 li 元素中删除 href .页面更改将手动处理.我们在这里所做的是将click事件绑定到导航栏 li 元素.当用户单击导航栏时，它将从当前选定的元素中删除 ui-btn-activ 和 ui-state-persist 类.它将在短暂的超时后将其添加到当前选定的元素并初始化 pageChange .需要超时，因为我们需要确保在发生页面更改之前添加了类.

Description :

Unfortunately jQuery Mobile don't handle this correctly so we need to do it. Basically you need to remove href from navbar li element. Page change will be handled manually. What we are doing here is binding a click event to navbar li element. When user clicks on navbar it will remove ui-btn-activ and ui-state-persist class from currently selected element. It will the add it to currently selected element and initialize a pageChange after a small timeout. Timeout is needed because we need to be sure class is added before page change can occur.

这是我前一段时间做的一个工作示例: http://jsfiddle.net/Gajotres/6h7gn/

Here's a working example I made some time ago: http://jsfiddle.net/Gajotres/6h7gn/

此代码是针对我当前的示例及其导航栏制作的，因此请对其进行一些更改以使其与您的导航栏一起使用.

This code is made for my current example and its navbar so change it slightly to work with your navbar.

$(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/

此页面适用于每个页面.

This one works on every page.

$(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);
    });       
});

这篇关于JQuery Mobile中的选项卡活动状态的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！