logo标签列表

jQuery Mobile外部面板无法正常工作

javascriptjqueryhtmljquery-mobile
3
我有一个令人沮丧的问题。 根据文档，我可以拥有外部面板：

我也可以拥有外部标题和页脚：

那么从逻辑上讲，我应该能够将它们结合起来：

<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/ )不同。它很卡顿，文档的高度没有正确计算。

根据另一个问题，我尝试在这个Fiddle中使用<div class="ui-panel-wrapper">。但问题仍然存在。

很不幸，这是一个旧的错误，从我所看到的情况来看，它没有被正确修复。 - Gajotres
我已经报告了另一个错误：https://github.com/jquery/jquery-mobile/issues/7408，奇怪的是，在最新版本的Chrome上，示例运行得非常好，但在之前的版本上失败了。而且它在IE 10.0.7中也能正常工作。 - Gajotres
1个回答
3
这里是一个可行的解决方案：http://jsfiddle.net/Palestinian/8nM4u/。
至少在这个 bug 被解决之前，你应该订阅我在评论中留下的 bug 报告。
这是你需要的额外代码，以使其正常工作：
$(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问好，他为您提供了这个解决方案。 :)

感谢您提供这样全面的答案。 - Simon
1
似乎在1.4.5中仍未修复。谢谢大家。 - Michael Galaxy
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接