1

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

谢谢尼克

4

3 回答 3

2

这个解决方案对我有用，我说的是用 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 的错误。

于 2013-07-27T11:54:32.077 回答
0

您要么需要在 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');
});
于 2014-02-25T17:45:01.907 回答
0

我在 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" ）

于 2015-01-09T06:49:25.877 回答