spe*_*ell 5 jquery html5 jquery-mobile
我正在尝试使用jQuery Mobile应用程序,该应用程序最终将作为移动设备上的非Web应用程序结束,因此所有内容都必须是本地的.出于这个原因(我认为)我需要在由data-role="page"标签描绘的单个页面中构建应用程序,否则jQuery Mobile中的ajax加载机制似乎不起作用.
该应用程序将从本地存储数据库中读取数据并将其显示在页面上的无序列表中,使用jQuery Mobile进行样式设置,看起来像本机应用程序.
在我的$(document).ready()功能我执行DB查询和每个结果,我创建一个<li>在我的DB结果标签,然后调用$(".list").append(li_str);哪里.list是我的类的<ul>标签.
页面呈现就像jQuery Mobile不存在一样 - 我在每个页面中都看到了正确的数据,<li>但看起来并不正确.
将此结果与我<li>在页面HTML中对标记进行硬编码的版本进行比较- 看起来jQuery Mobile会修改标记并插入许多新类等.
也许我需要在页面加载周期的早期从DB构建页面？有什么建议？
既不是打电话$("changed-parent-element").listview()也不$("changed-parent-element").trigger("create")是真的对我有用.为了多次更改DOM内容并重做jQuery移动样式,我需要这样:
$("changed-parent-element").listview("refresh");
版本:jQuery mobile 1.0 RC2
问题是这个问题.所以,改变你的代码:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a2/jquery.mobile-1.0a2.min.css" />
<script src="http://code.jquery.com/jquery-1.4.4.min.js"></script>
<script src="http://code.jquery.com/mobile/1.0a2/jquery.mobile-1.0a2.min.js"></script>
<script>
function build_dynamic_content()
{
var num_entries = 5;
for (var i = 0; i < num_entries; ++i)
{
var li_str = "<li id=\"" + i + "\"><a href=\"#\">" + "Entry number " + ( i + 1 ) + "</a>";
li_str += "<img src=\"" + "icon.png" + "\" />";
li_str += "</li>";
$(".mainlist").append(li_str);
}
}
</script>
</head>
<body>
<div data-role="page" id="list" data-fullscreen="false">
<div data-role="content">
<ul class="mainlist" data-role="listview">
<li id="0"><a href="#">Test entry</a><img src="icon.png"/></li>
</ul>
</div>
</div>
<script>build_dynamic_content();</script>
</body>
</html>
或者,您可以延迟创建列表视图,直到创建了所有元素(如链接线程中所述):
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a2/jquery.mobile-1.0a2.min.css" />
<script src="http://code.jquery.com/jquery-1.4.4.min.js"></script>
<script src="http://code.jquery.com/mobile/1.0a2/jquery.mobile-1.0a2.min.js"></script>
<script>
function build_dynamic_content()
{
var num_entries = 5;
for (var i = 0; i < num_entries; ++i)
{
var li_str = "<li id=\"" + i + "\"><a href=\"#\">" + "Entry number " + ( i + 1 ) + "</a>";
li_str += "<img src=\"" + "icon.png" + "\" />";
li_str += "</li>";
$(".mainlist").append(li_str);
}
}
$(function ()
{
build_dynamic_content();
$('ul.mainlist').listview();
});
</script>
</head>
<body>
<div data-role="page" id="list" data-fullscreen="false">
<div data-role="content">
<ul class="mainlist">
<li id="0"><a href="#">Test entry</a><img src="icon.png"/></li>
</ul>
</div>
</div>
</body>
</html>
对不起代码转储; 我无法在jsfiddle中使用它.
| 归档时间： |
|
| 查看次数： |
10776 次 |
| 最近记录： |