Javascript 如何在jQueryMobile中使用来自不同html文件的同一面板

是否可以在另一个页面中使用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 -->

如果这两个页面位于同一域名上，您只需使用JQuery将该元素加载到新页面中即可

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

您需要包括JQuery库，然后在新页面上创建div，比如：

然后使用JQuery

$（'.new侧边栏'）加载其内容

根据评论编辑：
如果这两个页面位于同一域名上，您可以使用JQuery将该元素加载到新页面中

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

您需要包括JQuery库，然后在新页面上创建div，比如：


然后使用JQuery
$（'.new侧边栏'）加载其内容

根据评论编辑：
如果我需要从链接而不是jQuery代码打开面板，该怎么办？我有一个持久的导航栏，我想用它来打开面板。然后你可以用JQuery分配一个onclick事件，如果你的导航栏被点击，它就会起到这个作用。请参阅我添加到答案中的click事件。当你点击一个
时，它会将#mypanel从index.html加载到当前页面的div.new侧边栏中。你所听到的点击是一个按钮还是任何点击，由于单击功能中没有任何其他条件？单击功能是当您在id为
“navbar”
的元素中单击
内的
时，如果我需要从链接而不是jQuery代码打开面板，该怎么办？我有一个持久的导航栏，我想用它来打开面板。然后你可以用JQuery分配一个onclick事件，如果你的导航栏被点击，它就会起到这个作用。请参阅我添加到答案中的click事件。当你点击一个
时，它会将#mypanel从index.html加载到当前页面的div.new侧边栏中。你所听到的点击是一个按钮还是任何点击，由于单击功能中没有任何其他条件？单击功能是当您在id为
“navbar”
的元素内单击
时，您需要在每个页面中都有一个面板，您可以使用相同的面板。您可以将其从一个页面克隆到另一个页面，或在
页面上添加新的标记，然后再显示
。请检查我之前制作的演示，直到第12行@Omar。您的代码很有意义，谢谢。下面的建议是如何使用相同的面板，并用jQuery实际地调用它，这是否也有效？在变量中添加代码更容易。但是，在将面板附加到页面之前，您需要检查
$.mobile.activePage.find（'.ui panel'）.length之前是否插入了面板。如果length=0，则附加，否则不附加。@Omar ok谢谢。但是为什么不把这个添加到答案中，这样我就可以选择正确的答案了？你需要在每一页都有一个面板，你可以使用相同的面板。您可以将其从一个页面克隆到另一个页面，或在
页面上添加新的标记，然后再显示
。请检查我之前制作的演示，直到第12行@Omar。您的代码很有意义，谢谢。下面的建议是如何使用相同的面板，并用jQuery实际地调用它，这是否也有效？在变量中添加代码更容易。但是，在将面板附加到页面之前，您需要检查
$.mobile.activePage.find（'.ui panel'）.length之前是否插入了面板。如果length=0，则附加，否则不附加。@Omar ok谢谢。但是为什么不把这个添加到答案中，这样我就可以选择正确的答案了？
$( "#navbar ul li" ).click(function() {
  $('.new-sidebar').load('index.html #mypanel');
});