jQuery mobile 1.3 左滑动面板 - phonegap 和固定标题答案

【问题标题】：jQuery mobile 1.3 left slide panel - phonegap and fixed headerjQuery mobile 1.3 左滑动面板 - phonegap 和固定标题
【发布时间】：2013-07-27 10:48:24
【问题描述】：

我在 phonegap 中为我的应用程序使用 jQuery mobile 1.3。我想实现像 facebooks 的应用程序一样的左侧滑动菜单。我用 data-position="fixed" 固定了标题。当我在 chrome 中打开应用程序时，它可以工作。当我在 phonegap 中打开应用程序时，它不起作用，因为固定标题没有向右移动。

一些解决方案来解决这个问题？

编辑：

这是非常简单的示例代码：

<!DOCTYPE html> 
<html> 
<head> 
<title>Page Title</title> 
<meta name="viewport" content="width=device-width, initial-scale=1"> 
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css" />
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script>
<style>
html, body { padding: 0; margin: 0; }
html, .ui-mobile, .ui-mobile body {
    height: 435px;
}
.ui-mobile, .ui-mobile .ui-page {
    min-height: 435px;
}
.ui-content{
    padding:10px 15px 0px 15px;
}
.panel-content { padding:15px; }

#myhdr.ui-panel-content-fixed-toolbar-position-left {
    border:1px solid red;
}
</style>
</head> 
<body>  
<div data-role="page" style="max-height:440px; min-height:440px;">
    <!-- defaultpanel  -->
    <div data-role="panel" id="defaultpanel" data-theme="b">    
        <div class="panel-content">
            <ul data-theme="d" data-icon="false" data-divider-theme="d" data-inset="false" data-filter="true" data-filter-placeholder="keywords" data-role="listview" style="overflow:auto; height:200px;">
            <li><a data-rel="close"><img src="images/icon.png" class="ui-li-icon" />close</a></li>
            </ul>
        </div><!-- /content wrapper for padding -->         
    </div><!-- /defaultpanel -->
    <div data-role="header" data-position="fixed" id="myhdr">
        <h1>Panel Demo</h1>
    </div>
    <div data-role="content"> 
        <a href="#defaultpanel" data-role="button" data-inline="true" data-icon="bars">Default panel</a>
    </div>
</div>
</body>
</html>

我正在使用 Cordova 2.2.0，但我现在已经使用 Cordova 2.9.0 对其进行了测试，情况相同。不知何故，Phonegap 中的浏览器不会将某些样式应用于固定标题。

谢谢尼克

【问题讨论】：

好的，示例代码就在那里。它不起作用:-(
嘿，伙计，我检查了你的代码，它在我的设备上使用 phonegap 确保科尔多瓦路径正确。并将文件本地化，以减少加载应用程序的时间。

标签： jquery-mobile cordova

【解决方案1】：

这个解决方案对我有用，我说的是在 Phonegap 中制作的 Android 混合应用程序。

工作 jsFiddle 示例：http://jsfiddle.net/Gajotres/PMrDn/56/

    <div data-role="page" id="index">
        <div data-role="panel" id="mypanel" data-position="left" data-display="push">
            <a data-role="button">Some button</a>
        </div>            

        <div data-theme="b" data-role="header">
            <a href="#mypanel">Open panel</a>
            <h1>Index page</h1>
        </div>

        <div data-role="content">

        </div>
    </div>

您需要的是面板内的 data-display="push" 属性。它将成功地将固定标题推到右侧。这适用于 Android 3+，不适用于 Android 2.X，但这不是 jQuery Mobile 的错误。

【讨论】：

嘿，但您的标题不固定。我的意思是当标题被修复时它不起作用
您好，这是不可能的！我正在尝试 1 天，但这对我不起作用。在有 position:fixed 的时候，标题在 phonegap 下不再移动。怎么办？
Niko Nik 我也面临同样的问题，如果您找到任何解决方案，请告诉我。

【解决方案2】：

您要么需要在 android manifest.xml 文件中打开硬件加速，要么需要关闭转换。

我可以通过以下方式做到这一点..

$(document).bind("pagebeforeshow", function(event, data) {
    // this doesn't seem to turn off animations
    //$(".ui-panel-menu").panel("option", "animate", false);
    // this does turn off animation
    $(".ui-panel-animate").removeClass('ui-panel-animate');
});

【讨论】：

【解决方案3】：

我在 Android 4.1.2 中遇到了同样的问题，我采取了以下措施来解决这个问题。

我在样式表中添加了这段代码

.ui-header.ui-panel-open {
    top:-1px; 
    position:absolute; 
    bottom: auto; 
}

这个脚本在我的 app.js 上

$( '.ui-panel' ).on( "panelbeforeopen", function( ) {

    $('.ui-header.ui-header-fixed').addClass('ui-panel-open');

} );

$( '.ui-panel' ).on( "panelclose", function( ) {

    $('.ui-header.ui-header-fixed').removeClass('ui-panel-open');

} );

并将我的面板的数据显示设置为推送（ data-display="push" ）

【讨论】：