如何在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');加載其內容$('.new-sidebar').load('index.html #mypanel');

編輯評論：

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