jquery mobile：navbar不保持活动状态 [英] jquery mobile: navbar not keeping active state

问题描述

我有这个navbar页脚：

 < div data-role =footerdata-position = data-theme =a> 
< div data-role =navbardata-iconpos =bottom> 
< ul> 
< li>< a href =＃page1id =button_1data-icon =userclass =my_buttons ui-btn-active>第1页< / a>< / li> ; 
< li>< a href =＃page2id =button_2data-icon =lockclass =my_buttons> Page2< / a>< / li> 
< li>< a href =＃page3id =button_3data-icon =cameraclass =my_buttons>第3页< / a>< / li> 
< li>< a href =＃page4id =button_4data-icon =commentclass =my_buttons>第4页< / a>< / li> 
< li>< a href =＃page5id =button_5data-icon =checkclass =my_buttons>第5页< / a>< / li> 
< / ul> 
< / div><！ -  / navbar  - > 
< / div><！ -  / footer  - > 
  

问题是这些按钮在点击时不保持活动状态。当所有按钮上的变化 a href 到＃时，这样工作， / p>

我已经尝试添加 ui-state-persist 到所有按钮，但是没有工作。

我试过的另一件事是这样的：

 
 code> $（。my_buttons）。on（tap，function（）{
 var id = this.id; 
 nav_state（id）; 
} 
 
函数nav_state（button）
 {
 $（。my_buttons）。removeClass（ui-btn-active，function（）{
 $ ＃+ button）.addClass（ui-btn-active）;}）; 
} 
  

这不起作用...

编辑：
显然，没有回调 removeClass 。删除回调没有工作...

解决方案

您需要添加自己的代码，时间页面更改。有不同的方法可以做到这一点，但这里是一种方法：

  $（document）.on（pagecontainerchange （）{
 var current = $（.ui-page-active）.prop（id）; 
 //从nav按钮删除活动类
 $将活动类添加到当前导航按钮
 $（[data ='navbar'] a.ui-btn-active）.removeClass（ui-btn-active -role ='navbar'] a）.each（function（）{
 var href = $（this）.prop（href）; 
 if（href.indexOf（current，href。 length-current.length）！== -1）{
 $（this）.addClass（ui-btn-active）; 
} 
}）; 
} ）; 
 

每次pagecontainer小部件更改页面时，我们都会获取正在显示的页面的ID，导航栏链接以查看以此页面ID结尾的href。

DEMO

使用数据属性的持久性导航栏演示： http://demos.jquerymobile.com /1.4.5/toolbar-fixed-persistent/

I have this navbar footer:

<div data-role="footer" data-position="fixed" data-theme="a" >
    <div data-role="navbar" data-iconpos="bottom">
        <ul>
            <li><a href="#page1" id="button_1" data-icon="user" class="my_buttons ui-btn-active">Page1</a></li>
            <li><a href="#page2" id="button_2" data-icon="lock" class="my_buttons">Page2</a></li>
            <li><a href="#page3" id="button_3" data-icon="camera" class="my_buttons">Page3</a></li>
            <li><a href="#page4" id="button_4" data-icon="comment" class="my_buttons">Page4</a></li>
            <li><a href="#page5" id="button_5" data-icon="check" class="my_buttons">Page5</a></li>
        </ul>
    </div><!-- /navbar -->
</div><!-- /footer -->

The problem is that the buttons don't keep their active state when clicked. This does work when a change a href to # on all buttons, but off course, this breaks my navigation.

I've tried adding ui-state-persist to all buttons, but that didn't work either. Anyone knows how to fix this?

Another thing I've tried is this:

$(".my_buttons").on( "tap", function() {
   var id = this.id;
   nav_state(id);
});

function nav_state(button)
{
   $(".my_buttons").removeClass("ui-btn-active",function() {
   $("#"+button).addClass("ui-btn-active"); });
}

This doesn't work either...

EDIT: Apparently, there's no callback for removeClass. Removing the callback didn't work either though...

解决方案

You need to add your own code that updates the active button each time the page changes. There are different ways to do this, but here is one way:

$(document).on( "pagecontainerchange", function() {
    var current = $( ".ui-page-active" ).prop("id");   
    // Remove active class from nav buttons
    $( "[data-role='navbar'] a.ui-btn-active" ).removeClass( "ui-btn-active" );
    // Add active class to current nav button
    $( "[data-role='navbar'] a" ).each(function() {
        var href = $( this ).prop("href");
        if ( href.indexOf(current, href.length - current.length) !== -1 ) {
            $( this ).addClass( "ui-btn-active" );
        }
    });
});

Each time the pagecontainer widget changes page, we get the ID of the page being shown and then step through the navbar links to see which href ends with this page id.

DEMO

You could also look at the persistent navbar demo which uses data-attributes: http://demos.jquerymobile.com/1.4.5/toolbar-fixed-persistent/

这篇关于jquery mobile：navbar不保持活动状态的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！