Question

我正在使用jQuery mobile 1.4.3进行移动应用。我正在尝试构建一个动态更改的导航栏，如果用户已登录导航栏将显示4个选项，如果不是，则会显示3个选项。问题：

一旦我点击了酒吧，它会变成全蓝色。
我确定我没有使用正确的代码。
当我点击按钮时，导航栏会消失一段时间。
点击页面时，蓝色点击突出显示不会持久。

我需要的是一个固定的导航栏，可以在点击时平滑地更改页面：）

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

页脚 div应该是 page div的直接子项，您不应将其放在 content div中。此外，在您注入新页面之前离开页面时，您需要.remove() 页脚或导航栏。否则，只要显示相同的页面，您最终会在同一页面中添加重复的页脚和导航栏。

另外请注意，当您动态注入工具栏时，需要重置活动页面$.mobile.resetActivePageHeight()的高度，因为工具栏会向页面添加填充，如果高度为n没有重置，页面会滚动。

要获得更好的结果，请使用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();
});

<强> Demo

移动动态导航栏

1 个答案: