我已经使用jQuery很长一段时间了,并且在jQuery Mobile上迈出了第一步。
我使用index.html作为jQuery Mobile& amp;我的应用程序的设计,一旦加载就会调用content.php(所有页面的列表视图)中的内容。
我使用page.php作为页面内容模板,它根据变量显示内容,如下所示: page.php文件?ID = 01 page.php文件?ID = 02 page.php?id = 03 ......等等。
我认为从这里开始的最佳方式是在index.html上有两个jQm'页面',一个用于应用程序的主页,另一个用于动态加载来自page.php?id = xx的内容。这样,一旦我的应用程序加载,我就不必加载所有内容。
应该怎么做?如何使列表视图项转到下一页并将正确的内容加载到其中?
答案 0 :(得分:6)
只需创建与<a href="...
的链接即可。 JQM使用AJAX加载它们
使用JQM创建的应用程序应该可以在没有javascript的任何旧浏览器中运行。其余的由JQM本身负责。
[编辑]
要获取网址并将其放在您想要的任何位置,只需使用来自jquery arsenal的普通旧.load()或.get(),当您将内容发送到您想要的div时 -
已弃用:从jquery mobile
使用.page() 当前:致电.trigger('create')
(此事件添加样式和控件)。 详细说明在我的常见问题解答中:http://jquerymobiledictionary.pl/faq.html
答案 1 :(得分:3)
工作评论示例:
创建一个空的jqMobile页面(div具有相应的数据角色,id为id =“dynamicPage”)
获取菜单链接的ID,并将其作为空白页面的title属性插入。
$("#appMainMenu a").live("click", function(evt){ var whatpageto = $(this).attr('id'); $('#dynamicPage').attr('title', 'dpage-'+whatpageto); // the title would look like title="dpage-linksid" });
$('#dynamicPage').bind('pageshow', function() { $('#dPage').html(''); // animate while we're loading data var whatpage = $(this).attr('title'); // get the page's title we changed earlier var whatpage1 = whatpage.replace("dpage-", ''); // remove the 'dpage-' part from the title, and we have our id. var whatpage2 = 'path/to/pagewhereyourcontentis.html'; // where is the content coming from? url or path to file $.get(whatpage2, function(data) { // load content from external file $('#dynamicPage').html(data); // insert data to the jqMobile page (which is a div). $('#dynamicPage').page(); // Re-render the page otherwise the dynamic content is not styled. }); });
希望这会有所帮助。有问题吗?
答案 2 :(得分:2)
以下是我为我的网页解决此问题的方法
$("#masterList").empty();
var listItems = "";
$.each(data.Messages, function (i, item)
{
listItems += "<li><div><a href='#messageData' onclick='$(" + // Use a click handler to set the attr of detailPage div
'"#detailPage").attr("detailId", "'+ item.Id + // my JSON item has an ID
'")' + "'>"; // note the crazy quoting
listItems += "Test about the item</a></li>";
}
$("#masterList").append(listItems);
对于detailPage,我使用pageshow事件处理程序使用id获取JSON对象,并根据detailId属性中的id加载详细信息项 - 类似于loadDetail($(“#detailPage”)。attr(“detailId “))和我的loadDetail函数完成剩下的工作。
不幸的是,这将打破jQuery mobile的URL策略。由于所选项目存储在页面本身中 - 这不是好事。我将尝试使用HTML页面的外部链接并将id作为arg传递。
答案 3 :(得分:0)
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width,height=device-height,user-scalable=no,initial-scale=1.0"/>
<link rel="stylesheet" href="jquery.mobile-1.0.1.css" />
<title> Hello World </title>
<script src="jquery.js"></script>
<script src="jquery.mobile-1.0.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function(e) {
$('#omtList').html('<ul data-role="listview" data-split-icon="delete" data-split-theme="d"> <li><a href="index.html"><h3>Broken Bells</h3><p>Broken Bells</p></a><a href="lists-split-purchase.html" data-rel="dialog" data-transition="slideup">Purchase album </a></ul>').trigger('create');
});
</script>
</head>
<body>
omt
<div>
<div id="omtList">
</div><!--/content-primary -->
</body>
</html>