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的動態頁面

回答

相關問題