Geek asks and answers

How to use the same navbar on multiple pages with jQuery mobile?

Currently, I have several pages embedded in one html file, and a navigation bar at the bottom of each page to go to another page.

However, navbars on different pages are identical to codes in different positions. Therefore, editing a small part in the navigation bar means that I need to change the (same) code in all of these positions. Moreover, the navigation button illumination does not work correctly if I implement it this way.

In fact, the code for navbar is the same - they are all inside the identical div tag. Therefore, I think there must be some way to reuse one code for all of these navigators? So I don’t need to edit the code again and again every time I change some details in the navigation bar? (It would be a disaster if I had 10 pages or more)

+3
source share
1 answer

You can use JavaScript to add an element to each page as it is initialized (make sure this code is included in every HTML document):

$(document).on('pageinit', '[data-role="page"]', function () {
    $(this).children('[data-role="content"]').append('<div class="my-nav-bar">...</div>');
});

Then you added the HTML for your navigator to the function call .append(). This allows you to store one copy of the code and use it on each page of the site.

, , .

+2

More articles:


All Articles