移动设备的动态导航栏

Question

我正在使用 jQuery mobile 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:
    }
});

Answer 1

footer div 应该是 page div 的直接子级，您不应该将它放在 content div 中。此外，您需要在离开页面后.remove() footer 或 navbar 才能注入新页面。否则，无论何时显示同一页面，您最终都会在同一页面中添加重复的 footer 和 navbar。

另外注意，当你动态注入 toolbar 时，你需要重置活动页面的高度 $.mobile.resetActivePageHeight() 因为 toolbars 会为页面添加填充，如果高度不是重置，页面将滚动。

为获得更好的效果，请使用pagecontainerbeforeshow 注入footer 和navbar，并使用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();
});

Demo