使用 jQuery Mobile 的动态页面
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4844738/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Dynamic pages with jQuery Mobile
提问by Adam Tal
I've been using jQuery for quite a while, and taking my first steps with jQuery Mobile.
我使用 jQuery 已经有一段时间了，并开始使用 jQuery Mobile。
I use index.html as the jQuery Mobile & design of my app, which calls the content from content.php (a list view of all pages) as soon as it loads.
我使用 index.html 作为我的应用程序的 jQuery Mobile 和设计，它在加载后立即调用来自 content.php（所有页面的列表视图）的内容。
I use page.php for a page content template, which displays the content depending on a variable, like so: page.php?id=01 page.php?id=02 page.php?id=03... And so on.
我使用 page.php 作为页面内容模板，它根据变量显示内容，如下所示： page.php?id=01 page.php?id=02 page.php?id=03... 等等.
I was thinking the best way to go from here would be to have two jQm 'pages' on index.html, one for the app's homepage, and one that dynamically loads the content from page.php?id=xx. This way I don't have to load all my content as soon as my app is loaded.
我想从这里开始的最佳方法是在 index.html 上有两个 jQm“页面”，一个用于应用程序的主页，另一个用于从 page.php?id=xx 动态加载内容。这样我就不必在我的应用程序加载后立即加载我的所有内容。
How should this be done? How can I make the list view items go to the next page and load the right content into it?
这应该怎么做？如何使列表视图项转到下一页并将正确的内容加载到其中？
采纳答案by Adam Tal
Working commented example:
工作评论示例：
Create an empty jqMobile page (div with the appropriate data-role, and an id of id="dynamicPage")
Get your menu link's id, and insert it as the title attribute of the empty page.
创建一个空的 jqMobile 页面（具有适当数据角色的 div，id 为 id="dynamicPage"）
获取菜单链接的 id，并将其插入为空页面的标题属性。
$("#appMainMenu a").live("click", function(evt){
var whatpageto = $(this).attr('id');
$('#dynamicPage').attr('title', 'dpage-'+whatpageto); // the title would look like title="dpage-linksid"
});
- Load data like so:
- 像这样加载数据：
$('#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.
});
});
Hope this helps. Questions?
希望这可以帮助。问题？
回答by naugtur
Just create links with <a href="...and it works. JQM loads them with AJAX
只需创建链接，<a href="...它就可以工作。JQM 使用 AJAX 加载它们
The app that you create with JQM should work in any old browser without javascript. The rest is taken care of by the JQM itself.
您使用 JQM 创建的应用程序应该可以在任何没有 JavaScript 的旧浏览器中运行。其余的由 JQM 自己处理。
[edit]
[编辑]
To get URLs and put them anywhere you want just use plain old .load()or .get()from jquery arsenal and when you get the content to a div you wanted -
要获取 URL 并将它们放在您想要的任何位置，只需使用jquery 库中的普通旧.load()或.get()并且当您将内容获取到您想要的 div 时 -
deprecated: use .page() from jquery mobile
不推荐使用：使用 jquery mobile 中的 .page()
current: call .trigger('create')
当前：调用.trigger('create')
(this event adds styles and controls). Detailed instruction is in my FAQ: http://jquerymobiledictionary.pl/faq.html
（此事件添加样式和控件）。详细说明在我的常见问题解答中：http: //jquerymobiledictionary.pl/faq.html
回答by Kevin H
Here's what I came up to solve this for my page
这是我为我的页面解决这个问题的方法
$("#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);
For the detailPage I used the pageshow event handler to fetch the JSON object using the id and loaded the detail item based on the id in the detailId attribute - something like loadDetail($("#detailPage").attr("detailId")) and my loadDetail function did the rest.
对于 detailPage，我使用 pageshow 事件处理程序使用 id 获取 JSON 对象，并根据 detailId 属性中的 id 加载详细信息项 - 类似于 loadDetail($("#detailPage").attr("detailId"))我的 loadDetail 函数完成了剩下的工作。
Unfortunately this will break the URL strategy for jQuery mobile. Since the selected item is stored in the page itself - this is no good. I am going to try using an external link that is an HTML page and passing the id as an arg.
不幸的是，这将破坏 jQuery mobile 的 URL 策略。由于所选项目存储在页面本身中 - 这不好。我将尝试使用作为 HTML 页面的外部链接并将 id 作为参数传递。
回答by Dhiral Pandya
<!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>
