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

How to use same panel from different html files in jQueryMobile

本文关键字：文件 html jQueryMobile      更新时间：2023-09-26

是否可以在另一个页面（例如resutls.html）中使用index.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，比如：

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

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

根据注释编辑：

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