移动动态导航条

Dynamic navbar for mobile

本文关键字：导航 动态 移动      更新时间：2023-09-26

我正在用jQuery移动1.4.3做一个移动应用程序。我试图建立一个动态变化的导航栏，如果用户已经登录在导航栏将显示4个选项，如果没有它将显示3个选项。问题:

  1. 一旦我点击了几次，它就变成了蓝色。
  2. 我确定我没有使用正确的代码。
  3. 点击按钮，导航栏会消失一段时间。
  4. 单击页面时，蓝色点击高亮显示不持久。

我需要的是一个固定的导航栏，当点击时顺利地改变页面:)

http://jsfiddle.net/claire89/toxtcbhe/14/

var statusLogin = null;
$(document).on('pagecontainershow', function (e, ui) {
    var myNavbar = null;
    if (statusLogin == null) {
        myNavbar = $('<div data-role="footer" data-id="footer" data-position="fixed"><div data-role="navbar"><ul><li><a href="#listMenuPage" data-icon="grid" class="ui-btn-active ui-state-persist" data-theme="a">Menu</a></li><li><a href="#sugestionsPage" data-icon="grid" class="ui-state-persist" data-theme="a">Sugestions</a></li><li><a href="#historyPage" data-icon="grid" class="ui-state-persist" data-theme="a">History</a></li><li><a href="#settingsPage" data-icon="grid" class="ui-state-persist" data-theme="a">Settings</a></li></ul></div></div>');
        $('.ui-content').append(myNavbar).trigger('create');
    } else {
        myNavbar = $('<div data-role="footer" data-id="footer" data-position="fixed"><div data-role="navbar"><ul><li><a href="#listMenuPage" data-icon="grid" class="ui-btn-active ui-state-persist" data-theme="a">Menu</a></li><li><a href="#historyPage" data-icon="grid" class="ui-state-persist" data-theme="a">History</a></li><li><a href="#settingsPage" data-icon="grid" class="ui-state-persist" data-theme="a">Settings</a></li></ul></div></div>').appendTo('.ui-content');
        $('.content').append(myNavbar).trigger('create');
    }
    $("[data-role='navbar']").navbar();
    $("[data-role='header'], [data-role='footer']").toolbar();
    var activePage = $.mobile.pageContainer.pagecontainer("getActivePage");
    var activePageId = activePage[0].id;
    switch (activePageId) {
        case 'listMenuPage':
            alert("listMenuPage");
            break;
        case 'sugestionsPage':
            alert("sugestionsPage");
            break;
        case 'settingsPage':
            alert("settingsPage");
            break;
        case 'historyPage':
            alert("historyPage");
            break;
        default:
    }
});

footerdiv应该是pagediv的直接子元素，您不应该将其放置在contentdiv中。此外，在您注入新页面之前离开页面时，您需要.remove() footer或navbar。否则，无论何时显示同一页面，您都将在同一页面中添加重复的页脚和导航栏。

另一个注意事项，当你动态注入工具栏时，你需要重置活动页面$.mobile.resetActivePageHeight()的高度，因为工具栏为页面添加填充，如果高度未重置，页面将滚动。

使用pagecontainerbeforeshow注入页脚和导航条， pagecontainerhide去除

效果更好。
var statusLogin = null;
$(document).on('pagecontainerbeforeshow', function (e, ui) {
   /* ui.toPage was introduced in 1.4.3 
    * can be used instead of "getActivePage"
    * on pagecontainer events
    */
   var activePage = $(ui.toPage),
       activePageId = activePage[0].id,
       myNavbar = "";
   if (statusLogin == null) {
       myNavbar = $('<tags></tags>');
       activePage.append(myNavbar);
   } else {
       myNavbar = $('<tags></tags>');
       activePage.append(myNavbar);
   }
   /* create footer and navbar
    * add active class to button based on page's ID
    */
    $("[data-role='footer']")
        .toolbar()
        .find("a[href=#" + activePageId + "]")
        .addClass("ui-btn-active");
   /* reset height of active page */
   $.mobile.resetActivePageHeight();
}).on("pagecontainerhide", function (e, ui) {
   /* remove footer once page is hidden */
   $(".ui-footer", ui.prevPage).remove();
});

相关文章：