Question

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

<!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>

Answer 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">

这阻止了面板伸展我的标题。

如何才能在页眉和页脚之间打开jQuery移动面板，而不是整个页面？

1 个答案: