我有一个令人沮丧的问题。 根据文档,我可以使用外部面板:
- http://demos.jquerymobile.com/1.4.2/panel-external/
- 在上面的示例中,页眉位于页面内部,但面板位于页面外部
我也可以有外部页眉和页脚:
然后逻辑上我应该能够将它们组合起来:
<div data-role="header" data-position="fixed" data-theme="a">
<a href="#main_menu" data-transition="reveal" class="f-menu menu_control"><span>Open left panel</span></a>
<h1>Info</h1>
</div><!-- /header -->
<div id="locale" data-role="page" data-title="Info" class="jqm-demos">
<div role="main" class="ui-content jqm-content jqm-fullwidth">
<h1>LOCALE</h1>
</div><!-- /content -->
</div><!-- /page -->
<div id="privacy" data-role="page" data-title="Info" class="jqm-demos">
<div role="main" class="ui-content jqm-content jqm-fullwidth">
<h1>PRIVACY</h1>
</div><!-- /content -->
</div><!-- /page -->
<div data-role="panel" id="main_menu" data-position="left" data-display="reveal" data-theme="a">
<ul data-role="listview" id="menu_contents">
<li data-role="list-divider" class="h2 ui-li-divider ui-bar-a ui-first-child">
<a href="#locale" data-transition="slide" data-rel="close" class="f-cogs">Page 1</a>
</li>
<li data-role="list-divider" class="h2 ui-li-divider ui-bar-a ui-first-child">
<a href="#privacy" data-transition="slide" data-rel="close" class="f-cogs">Page 2</a>
</li>
</ul>
</div>
fiddle :http://jsfiddle.net/sidouglas/qVNyf/1/
正如您将在 fiddle 中看到的,滑动动画与 (http://demos.jquerymobile.com/1.4.2/panel-external/) 不同。它很慢,文档的高度计算不正确。
根据另一个question ,我尝试使用 <div class="ui-panel-wrapper">
在这个fiddle .还是一样的问题。
最佳答案
这是一个可行的解决方案:http://jsfiddle.net/Palestinian/8nM4u/
至少在解决此错误之前,您应该订阅我在顶部评论中留下的错误报告。
这是正常工作所需的额外代码:
$(document).on("pagecreate", function () {
$("[data-role=panel]").one("panelbeforeopen", function () {
var height = $.mobile.pageContainer.pagecontainer("getActivePage").outerHeight();
$(".ui-panel-wrapper").css("height", height + 1);
});
});
并向Omar问好,他给你做了这个解决方案。 :)
关于javascript - jQuery Mobile 外部面板无法正常工作,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/23690811/