私は HTML5/JQuery Mobile webapp に取り組んでいます。基本的にデータベースからのレコードを表示し、複数ページの設定があります。レコードのリストがあります。レコードのタイトルをクリックすると、そのレコードの詳細ページに移動します。そして、それは何かがうまくいかないところです。
データを (JSON 経由で) レコードの詳細ページに動的に挿入し、 を使用して更新した.trigger('create')後、ページの高さが正しく設定されません。Firebug を使用すると、JQM がdiv と div にクラスui-pageを追加し、両方に実際の画面の高さと一致しない値を与えることがわかります。その結果、div はページ全体を占めるのではなく、ページの約 3 分の 2 しか占めません。次に、この div にオーバーフロー コンテンツのスクロール バーを表示します。ページの下 3 分の 1 は灰色で空のままです。実際には、下のフレームにページがロードされていない昔ながらのフレームセットのように見えます。data-role="page"ui-contentdata-role="content"min-heightui-content
Firebug を使用して、割り当てられたすべてのスタイルを 1 つずつ無効にし、クラスoverflow-x: hiddenによって設定されているように無効にした場合にのみページが正しく表示されることを発見しました。ui-contentしかし...その後、固定されたヘッダーは固定されなくなり、ページとともに上に移動します。とmin-height: 100%の両方の CSS に追加しようとしました(min-height は JQM によって div 要素にハードコーディングされているため)、追加しましたが、うまくいきませんでした。.ui-content.ui-page[style]!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");
});
});
}