CODEWITHSUNDEEP
javascriptjqueryhtmljquery-uijquery-mobile
Bruno
Bruno

Reputation: 1032

Dynamic navbar for mobile

I'm doing a mobile App with jQuery mobile 1.4.3. I'm trying to build a navigation bar that changes dynamically, If the user has logged in the navigation bar will show 4 options, if not it will show 3 options. The problems:

  1. Once I click the bar some times it turns all blue.
  2. I'm sure I'm not using the correct code.
  3. The navigation bar disappears for some time when I click in a button.
  4. The blue click highlight is not persistent for the page click.

What I need is a fixed navigation bar that smoothly changes pages when clicked :)

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:
    }
});

Upvotes: 1

Views: 600

Answers (1)

Omar
Omar

Reputation: 31732

footer div should be a direct child of page div, you should not place it inside content div. Moreover, you need to .remove() footer or navbar once you leave a page before you inject a new one. Otherwise, you will end up adding duplicating both footer and navbar in same page whenever the same page is shown.

Another note, when you inject toolbar dynamically, you need to reset the height of active page $.mobile.resetActivePageHeight() as toolbars adds padding to page, if height isn't reset, the page will scroll.

For better results, use pagecontainerbeforeshow to inject footer and navbar, and pagecontainerhide to remove them.

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

Upvotes: 1

Related Questions