使用jquerymobile动态页面_Jquery_Jquery Mobile

使用jquerymobile动态页面

jquery jquery-mobile

使用jquerymobile动态页面,jquery,jquery-mobile,Jquery,Jquery Mobile,我已经使用jQuery很长一段时间了，并在jQuery Mobile上迈出了第一步我使用index.html作为我的应用程序的jquerymobile&design，它一加载就从content.php（所有页面的列表视图）调用内容我使用page.php作为页面内容模板，该模板根据变量显示内容，如下所示： page.php？id=01 page.php？id=02 page.php？id=03。。。等等我想最好的办法是在index.html上有两个jQm“页面”，一个用于应用程序的主页，另一

我已经使用jQuery很长一段时间了，并在jQuery Mobile上迈出了第一步

我使用index.html作为我的应用程序的jquerymobile&design，它一加载就从content.php（所有页面的列表视图）调用内容

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

我想最好的办法是在index.html上有两个jQm“页面”，一个用于应用程序的主页，另一个用于从page.php？id=xx动态加载内容。这样，我就不必在我的应用程序加载后立即加载所有内容

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

只需使用

或从jquery阿森纳创建链接，当您将内容添加到所需的div时-
不推荐使用：使用jquery mobile中的.page（）
当前：调用.trigger（'create'）

（此事件添加样式和控件）。
详细说明见我的常见问题解答：
工作示例：
创建一个空的jqMobile页面（具有适当数据角色的div，id为id=“dynamicPage”）
获取菜单链接的id，并将其作为空页面的标题属性插入
$（“#AppMain菜单a”）.live（“单击”，功能（evt）{
var whatpageto=$（this.attr（'id'）；
$（'#dynamicPage'）.attr（'title'，'dpage-'+whatpageto）；//标题看起来像title=“dpage linksid”
});
按如下方式加载数据：
$（'#dynamicPage'）.bind（'pageshow'，function（）{
$（'#dPage'）.html（'''）//加载数据时设置动画
var whatpage=$（this.attr（'title'）；//获取我们之前更改的页面标题
var whatpage=whatpage.replace（“dpage-”，“”）；//从标题中删除“dpage-”部分，我们就有了自己的id。
var whatpage2='path/to/pagewhereyourcontentis.html'；//内容来自何处？url或文件路径
$.get（whatpage2，函数（数据）{//从外部文件加载内容
$（'#dynamicPage'）.html（data）；//将数据插入jqMobile页面（这是一个div）。
$（'#dynamicPage'）.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);

$（“#主列表”）.empty（）；
var listItems=“”；
$.each（数据、消息、函数（i、项）
{
列表项+=“”；
}
$（“#主列表”）。附加（列表项）；

对于detailPage，我使用pageshow事件处理程序使用id获取JSON对象，并根据detailId属性中的id加载细节项，类似于loadDetail（$（“#detailPage”）.attr（“detailId”））和我的loadDetail函数完成了其余工作
不幸的是，这将破坏jQuery mobile的URL策略。因为所选项目存储在页面本身中-这不好。我将尝试使用HTML页面的外部链接，并将id作为参数传递。

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


你好，世界
$（文档）.ready（函数（e）{
$（'omtList'）.html（'ul data role=“listview”data split icon=“delete”data split theme=“d”>）.trigger（'create'）；
});
天哪
虽然这通常是可行的，但页面加载时没有样式设置。我正在尝试将page.php？id=01中的内容加载到已经设置样式的现有index.html中。这样做的唯一目的是破坏加载页面的历史记录功能。但这只需一个普通的AJAX调用即可完成。我会编辑这篇文章。但是在你使用它之前…请看一下jquerymobile.com上的文档是如何制作的。这是一个很好的例子。你不应该让jqm以这种方式工作。只需创建一个页面并链接其他页面。jqm将使用AJAX加载它们并附加到DOM。你会得到问题最后描述的内容以及更多内容。而且只有首先加载e homepage。您可以（事实上应该）自己创建整个页面，而无需编写任何javascript。这是使用jqm时的主要想法。我使用的是jqm beta2，$（'#dynamicPage'）。page（）不呈现页面。可以使用$（'#…'）重新呈现UI。listview（'refresh'）），等等。更多的讨论这通常不是一个好主意，像这样乱搞jquerymobile。
$("#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);

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