使用jQuery Mobile的动态页面

Question

我已经使用jQuery很长一段时间了，并采用了jQuery Mobile的第一步。

我使用index.html作为我的应用程序的jQuery Mobile和设计，它在加载后立即从content.php（所有页面的列表视图）调用内容。

我使用page.php作为页面内容模板，它根据变量显示内容，如下所示：page.php？id = 01 page.php？id = 02 page.php？id = 03 ...依此类推。

我认为从这里开始的最佳方式是在index.html上有两个jQm'页面'，一个用于应用程序的主页，另一个用于动态加载来自page.php？id = xx的内容。 这样我加载应用程序后就不必加载所有内容。

该怎么做？ 如何使列表视图项转到下一页并将正确的内容加载到其中？

Answer 1

只需用<a href="...创建链接<a href="...它就可以了.JQM用AJAX加载它们

使用JQM创建的应用程序应该可以在没有javascript的任何旧浏览器中运行。 其余的由JQM本身负责。

[编辑]

要获取URL并将它们放在任何你想要的地方，只需使用来自jquery arsenal的普通旧.load（）或.get（），当你将内容发送到你想要的div时 -

不推荐使用：从jquery mobile使用.page（）

current ：call .trigger('create')

（此事件添加样式和控件）。 详细说明在我的常见问题解答中： http ： //jquerymobiledictionary.pl/faq.html

Answer 2

工作评论示例：

创建一个空的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.
        });
});

希望这可以帮助。 有问题吗？

Answer 3

这就是我为我的页面解决这个问题的方法

$("#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传递。

Answer 4

在此输入图像描述

<!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>

使用jQuery Mobile的动态页面

问题描述

4 个解决方案

解决方案1
6 2011-01-31 08:07:04

解决方案2
3 已采纳 2011-02-21 17:41:32

解决方案3
2 2011-03-10 06:36:40

解决方案4
0 2012-03-24 04:21:28

使用jQuery Mobile的动态页面

问题描述

4 个解决方案

解决方案1 6 2011-01-31 08:07:04

解决方案2 3 已采纳 2011-02-21 17:41:32

解决方案3 2 2011-03-10 06:36:40

解决方案4 0 2012-03-24 04:21:28

解决方案1
6 2011-01-31 08:07:04

解决方案2
3 已采纳 2011-02-21 17:41:32

解决方案3
2 2011-03-10 06:36:40

解决方案4
0 2012-03-24 04:21:28