how to use the same navbar in multiple pages with jquery mobile?

Question

Currently i have multiple pages embedded in one html file, and a navbar in the bottom of each page to navigate to another page.

However, the navbars in different pages are identical codes in different positions. Hence, editing a small detail in the navbar mean i have to change (the same) code in all of those positions. Moreover, the highlight of navbar buttons aren't act correctly if I implement it this way.

Actually, the code for navbar are the same- they are all inside identical div tag. Hence, i think there must be some way to reuse one code for all of those navbars? So that i don't have to edit the code again and again each time i change some detail in the navbar? (It'd be a disaster if i have 10 pages or more)

Answer 1

You can use JavaScript to add a 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>');
});

You would then add the HTML for your navbar in the .append() function call. This allows you to keep a single copy of the code and have it be used on every page in the site.

This has the added benefit that the code only has to be downloaded once by the user rather than for each page.