1

我正在开发一个 HTML5 / JQuery Mobile webapp。它基本上显示来自数据库的记录并具有多页设置。我有一个记录列表，单击记录标题会将您带到该记录的详细信息页面。这就是出现问题的地方。

在将数据（通过 JSON）动态注入记录的详细信息页面并使用刷新后.trigger('create')，我的页面高度设置不正确。使用 Firebug，我可以看到 JQM 向 div 和 div 添加了一个类，ui-page并为它们提供了一个与实际屏幕高度不匹配的值。结果，div 并没有填满整个页面，而只填满了大约三分之二的页面。然后它会在这个 div 中显示一个滚动条，用于显示任何溢出的内容。页面的下三分之一保持灰色和空白。它实际上看起来像一个老式框架集，底部框架中没有加载任何页面。data-role="page"ui-contentdata-role="content"min-heightui-content

使用 Firebug，我一一禁用了所有分配的样式，发现只有当我按照类overflow-x: hidden的设置禁用时，页面才能正确显示ui-content。但是...然后我的固定标题不再固定，而是与页面一起向上移动。我尝试min-height: 100%为两者添加 CSS.ui-content和.ui-page[style]（因为 min-height 是由 JQM 在 div 元素上硬编码的），我添加了!important，但没有运气。

我将 JQM 1.2.0 Final 与 JQuery 1.8.2 一起使用。在使用 PhoneGap Build 编译应用程序后，最新版本的 Firefox、Chrome、IE9 以及 Android 2.3.6 都会出现此问题。有没有人认识到这个问题？有什么建议么？

详细页面的（简化）代码：

<html>
<head>
<title>record details</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<script src="js/jquery.js"></script>
<script src="js/jquery.mobile-1.2.0.min.js"></script>
<link rel="stylesheet" href="css/jquery.mobile-1.2.0.min.css" />
<link rel="stylesheet" href="css/styles.css" />
</head>
<body>
<div id="DetailPage" data-role="page" >
<div data-role="header" data-position="fixed" id="hdr" class="ui-bar-sl" data-tap-toggle="false">
<div data-role="controlgroup" data-type="horizontal" data-mini="true" style="float:left;margin-left:3px;"><!-- navigation buttons go here --></div>
</div>
<div id="breadcrumb"><!-- dynamically injected breadcrumb goes here --></div>
<div data-role="content">
<div id="RecordDetails"><!-- dynamically injected record data goes here -->
</div>
</div>      
</div>
<script src="js/injectdata.js"></script>

数据注入的（简化）代码：

var id = // obtain id from URL-string through a function //
$('#DetailPage').bind('pageinit', function(event) {
$('#breadcrumb').append('Values from URL-string');
getRecordView(id);
});

function getRecordView(theid) {
$.getJSON('http://www.myserver.net/myscript.php?id=' + theid + '&callback=?', function(data) {
    recorditems = data.items;
    $.each(recorditems, function(index, rc) {
    $('#RecordDetails').append('Here goes all the JSON data').trigger("create");
    });
});
}
4

0 回答 0