jquery - 如何使用 jquery mobile 在多个页面中使用相同的导航栏？

Question

目前，我在一个 html 文件中嵌入了多个页面，并且每个页面底部都有一个导航栏，用于导航到另一页面。

但是，不同页面的导航栏在不同位置是相同的代码。因此，在导航栏中编辑一个小细节意味着我必须在所有这些位置更改(相同的)代码。此外，如果我这样实现，导航栏按钮的突出显示将无法正确运行。

实际上，导航栏的代码是相同的 - 它们都位于相同的 div 标签内。因此，我认为必须有某种方法可以为所有这些导航栏重用一个代码？这样我就不必在每次更改导航栏中的某些细节时一次又一次地编辑代码？ (如果我有 10 页或更多，那将是一场灾难)

Answer 1

您可以使用 JavaScript 在初始化时向每个页面添加一个元素(确保每个 HTML 文档中都包含此代码):

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

然后，您可以在 .append() 函数调用中添加导航栏的 HTML。这使您可以保留代码的单个副本，并在网站的每个页面上使用它。

这还有一个额外的好处，即用户只需下载一次代码，而不必为每个页面下载一次。