Question

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

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

使用Firebug，我逐个禁用了所有已分配的样式，并发现当我禁用overflow-x: hidden类设置的ui-content时，该页面才会正常显示。但是......然后我的固定标题不再固定，而是与页面一起向上移动。我尝试将min-height: 100%添加到.ui-content和.ui-page[style]的CSS中（由于JQM在div元素上对min-height进行了硬编码），我添加了!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");
    });
});
}

没有为ui-page和ui-content正确设置min-height

0 个答案: