如何在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');
});