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

Question

Is it possible to use a panel defined, in index.html in another page, eg, resutls.html ? Or do I need to define the panel in every page, and add the same html code in both pages ?

Since I want my panel to be same in all pages.

This is my panel in 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

If the two pages are on the same domain name you could simply load that element into your new page using JQuery.

However this is not very SEO friendly as your links are being dynamically loaded into the page.

You will need to include the JQuery library then make the div on your new page, lets say:

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

Then load its contents with JQuery $('.new-sidebar').load('index.html #mypanel');

Edit from comment:

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