jQuery Mobile的动态页面

我一直在使用jQuery很长一段时间，并采取了jQuery Mobile的第一步。jQuery Mobile的动态页面

我只要加载使用index.html作为我的应用程序，它要求从content.php（所有页面的列表视图）内容的jQuery Mobile的&设计。

我用page.php文件的页面内容模板，它显示的内容取决于一个变量，像这样：？？？ page.php文件ID = 01 page.php文件ID = 02 page.php文件ID = 03 ...等等。

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

应该怎么做？如何让列表视图项目进入下一页并将正确的内容加载到其中？

来源

2011-01-30 Adam Tal

工作注释过的例子：

创建一个空jqMobile页（分度，适当的数据角色，和id = “dynamicPage” 的ID）
获取菜单链接的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" 
});

加载数据，如下所示：

 
    $('#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. 
     }); 
});

希望这有助于。有问题吗？

来源

2011-02-21 17:41:32

只需创建链接<a href="...，它的工作原理。 JQM使用AJAX加载它们

使用JQM创建的应用程序应该在任何不带javascript的旧浏览器中运行。其余的由JQM自己负责。

[编辑]

要获取网址，并把它们任何你想要的只是使用普通的老.load()或jQuery的阿森纳.get()，当你得到的内容，以你想要一个div - 弃用

：使用。第（）从jquery的移动

电流：呼叫.trigger('create')

（此事件添加样式和控件）。详细的指令是在我的常见问题：http://jquerymobiledictionary.pl/faq.html

来源

2011-01-31 08:07:04 naugtur

虽然这通常工作，页面加载，没有造型。我想要做的是将page.php？id = 01中的内容加载到已经设置好的index.html中现有的

中。 – 2011-01-31 10:41:49

只有通过这种方式完成的事情才能打破您加载页面的历史记录功能。但这只需要一个普通的AJAX调用即可完成。我将编辑帖子。 – naugtur 2011-01-31 10:44:17

但是，在你使用这个...之前，请看看jquerymobile.com上的文档是如何制作的。这是一个很好的例子。你不应该让jqm以这种方式工作。只需创建一个页面并链接其他页面。 jqm将使用AJAX加载它们并追加到DOM。你会在问题的最后得到你所描述的以及更多。首先只加载主页。你可以（事实上应该）创建整个页面，而不用自己写任何javascript。这是使用jqm时的主要想法。 – naugtur 2011-01-31 14:29:18

这里就是我想出了解决这个对我的网页

$("#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对象和加载的详细条目基于的ID detailId属性 - 类似于loadDetail（$（“＃detailPage”），attr（“detailId”）），我的loadDetail函数完成了其余部分。

不幸的是，这将打破jQuery手机的URL策略。由于选定的项目存储在页面本身 - 这是不好的。我将尝试使用一个HTML页面的外部链接并将id作为参数传递。

来源

2011-03-10 06:36:40

enter image description here

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

来源

2012-03-24 04:21:28

jQuery Mobile的动态页面

回答

相关问题