Question

我在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中的浏览器不会将某些样式应用于固定标题。

由于 NIK

Answer 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的错误。

Answer 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');
});

Answer 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');

} );

并设置我的面板的数据显示以进行推送（数据显示=＆＃34;推送＆＃34;）

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

3 个答案: