javascript - 如何在 jQueryMobile 中使用来自不同 html 文件的相同面板

Question

是否可以在另一个页面的 index.html 中使用定义的面板，例如 resutls.html ？ 或者我是否需要在每个页面中定义面板，并在两个页面中添加相同的 html 代码？

因为我希望我的面板在所有页面中都相同。

这是我在 index.html 中的面板

<div data-role="page" id="home">
    <div data-role="panel" id="mypanel">
        <!-- panel content goes here -->
    </div>
    <!-- /panel -->
    <div data-role="header">
        <!-- beginning of header -->
        <div data-role="navbar" data-id="navbar">
            <!-- beginning of presistant navbar, this navbar will be shown in all
            pages -->
            <ul>
                <li> <a href="index.html" data-icon="search" class="ui-btn-active ui-state-persist">Search</a>

                </li>
                <li> <a href="#mypanel" data-icon="bars">More</a>

                </li>
            </ul>
        </div>
        <!-- /navbar -->
    </div>
    <!-- /header -->
    <div data-role="content" id="content">
        <!-- content -->
    </div>
    <!-- /content -->

Answer 1

如果这两个页面在同一个域名上，您可以简单地使用 JQuery 将该元素加载到您的新页面中。

然而，这对 SEO 不是很友好，因为您的链接是动态加载到页面中的。

您需要包含 JQuery 库，然后在您的新页面上制作 div，比方说:

<div class="new-sidebar"></div>

然后使用 JQuery 加载其内容 $('.new-sidebar').load('index.html #mypanel');

根据评论编辑:

$( "#navbar ul li" ).click(function() {
  $('.new-sidebar').load('index.html #mypanel');
});