如何仅在页眉和页脚之间而不是整个页面之间打开 jQuery 移动面板？答案

【问题标题】：How can I open the jQuery mobile panel between the header and footer only, and not the whole page?如何仅在页眉和页脚之间而不是整个页面之间打开 jQuery 移动面板？
【发布时间】：2014-09-17 14:52:44
【问题描述】：

我有一个显示在屏幕上的面板，这很棒，但我希望它只显示在页眉和页脚之间，而不是从上到下显示在屏幕上。示例代码如下，

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.css">
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.js"></script>
</head>
<body>
<div data-role="page" id="pageone">
<div data-role="panel" id="myPanel"> 
<h2>Panel Header</h2>
<p>You can close the panel by clicking outside the panel, pressing the Esc key or by swiping.</p>
</div> 
<div data-role="header">
<h1>Page Header</h1>
</div>
<div data-role="main" class="ui-content">
<p>Click on the button below to open the Panel.</p>
<a href="#myPanel" class="ui-btn ui-btn-inline ui-corner-all ui-shadow">Open Panel</a>
</div>
<div data-role="footer">
<h1>Page Footer</h1>
</div> 
</div> 
</body>
</html>

【问题讨论】：

@Omar，我看了你之前给出的答案，我是将js代码包含到我的html文件还是js jquery-mobile文件中。我是一个完整的初学者，所以如果你能以最简单的方式解释它（对我来说是愚蠢的），那就太好了。 :)
创建一个单独的 js 文件来放置您的自定义 js 函数并在 jQM js 文件之后加载它。
不，这对我不起作用:(
在fiddle 中复制 js，将 #home 替换为您的页面 ID，将 #navpanel 替换为面板 ID。
只需将其添加到您的 CSS 文件 (.ui-panel-display-overlay { z-index: 100; })

标签： jquery jquery-mobile jquery-mobile-panel

【解决方案1】：

我使用的是 Omar 提供的 js 文件

 $(document).on("pagecreate", "#home", function (e) {
     var activePage = this;
     $("#navpanel").one("panelbeforeopen", function () {
         var screen = $.mobile.getScreenHeight(),
             header = $(".ui-header", activePage).hasClass("ui-header-fixed") ? $(".ui-header", activePage).outerHeight() - 1 : $(".ui-header", activePage).outerHeight(),
             footer = $(".ui-footer", activePage).hasClass("ui-footer-fixed") ? $(".ui-footer", activePage).outerHeight() - 1 : $(".ui-footer", activePage).outerHeight(),
             panelheight = screen - header - footer;
         $('.ui-panel').css({
             'top': header,
                 'min-height': panelheight
         });
     });
 });

然后我将以下代码添加到我的听众中

<div data-role="header" data-position="fixed">

这阻止了面板延伸到我的标题上。

【讨论】：