jQuery Mobile的 - 如何使用XML

第一次在這裏張貼動態創建的預先存在的網頁內容，以便把它容易與我，哈哈。我目前正在嘗試將內容加載到我已經寫出HTML的「頁面」中。我的jquery腳本正在從我的xml文件content.xml中讀取數據。我的第一頁加載得很好，但我試圖插入數據的頁面沒有任何內容。我故意將每個頁面創建爲一個shell來避免數據url問題。jQuery Mobile的 - 如何使用XML

這裏是我的代碼片段（大量重複，這樣沒有一點地把它全部）：的Jquery：

$(function() { 
    $.ajax({ 
     type: "GET", 
     url: "content.xml", 
     dataType: "xml", 
     success: xmlParser 
    }); 
}); 

function xmlParser(xml) {             
    $(xml).find('Phonetic').each(function() { 
    var a = 1; 
    $test = $("s" +a).append('<div><div class=<div class="S3">' + 
      $(this).find("S3").text() + 
      '</div>"S1">' + 
      $(this).find("S1").text() + 
      '</div><div class="S2">' + 
      $(this).find("S2").text() + 
      '</div><div class="S4">' + 
      $(this).find("S4").text() + 
      '</div></div>'); 

    $test.page(); 
    a++; 
}); 
    }

這裏的HTML：

<div data-role="page" id="c1"> 
<div data-role="header"><h1>Test</h1></div> 
<div data-role="content" id="s1"></div> 
<div data-role="footer"><h1>Test release v1.0 - Android tablet test</h1></div> 
</div>

任何幫助將是巨大的！

來源

2011-09-29 Verbium

我能問嗎？ –

我只有一個頁面，關鍵是要有pagebeforechange在您的文檔準備或ondeviceready功能。

$(document).bind("pagebeforecreate",function(e, data){ 
     if (typeof data.toPage === 'string'){ 
      var p = $.mobile.path.parseUrl(data.toPage); 

      if(u.hash.search(new RegExp(/^MyPageName/)) !== -1) { 
       $.mobile.showPageLoading(); 
       MyCodeToExecForThisPage(p, data.options); 
       e.preventDefault(); // tell jquery i will create a page not him 
      } 
     } 
});

因此多數民衆贊成你的方式，你現在需要一個函數來處理頁面，並顯示HTML，這裏是我做的：

function SetPagesTemplate(){ 
$page = $("#AllPage"); // this is the name of my page in the index file 
    $header = $page.children("#AllHead"); // my header so i can custom change 
$content = $page.children(":jqmData(role=content)"); // the content area of page 
$header.html('custom graphic or text'); 
$content.html(''); // clear everything up 
$footer = $page.children("#allFoot"); // hook into my footer bar 
$footer.html('custom footer nav and links'); 
}

下面

導航到一個頁面時，代碼顯示那內斯#person？PERSONID = 22的值。例如我的頁面的人，我將採取的ID [PERSONID]和獲取正確的信息，我會再填充我所有頁頁面與內容，使jQuery的認爲我實際上是在＃人。

// take note here that i take in urlObj [ this was p ] and options 
function LoadPerson(urlObj, options) { 
    try{ 
// lets get the number sent by stripping everything out 
    var id = urlObj.hash.replace(/.*personid=/,""), 
    extra = ""; 
SetPagesTemplate(); // the code that sets the page so i dont have to repeat myself. 

$.ajax({ 
    url: "http:\/\/" + domain + "/Ajax/MobilePersonProfile", 
    type: "POST", 
    dataType: "json", 
    data: { id: id }, 
    crossDomain: true, 
    success: function (data) { 
     //loop through data create rows 
     if(data.length === 0){ ThrowCustomAlert('Sorry, unable to load profile.', 'no profile available', true); } 
     else { 

      // now deal with your data on this example your processed data would be called template 
        // all this page stuff was set up earlier so lets fill it 
      $content.append("<section><nav id='profilescroll'>" + extra + template + "</nav></section>"); 
      $page.page(); // make our page into a page 
      options.dataUrl = urlObj.href; 
      template = null; 
      data = null; 
       // above cleanup, on mobile device to keep memory leaks low 
          // now we navigate to our created page THIS 
      $.mobile.changePage($page, options); 


      StartScroller("profilescroll"); 
      HideLoading(); // lets hide the page loading 
     } 
    }, 
    error: function (jqXHR, textStatus, errorThrown) { CustomError(errorThrown,'',"Profile",true); } 
}); 
} 
catch(ee){ CustomError(ee.message, ee.description, "profile", true); }

}

這就是你所需要的，它的一切我曾經使用過，我不認爲我已經看到的例子是這樣，我不得不基本上把我的整個應用程序進入工作，以減少內存的這種方式在使用iPhone 2作爲phonegap應用程序時的使用情況，使用完整的ajax導航非常快速。

點要注意的是，你只需要包括hashtag導航，內容pagebeforecreate建立一個新的，如果每一頁你想要的。 w^

也希望它可以幫助

這裏要求的是我的頁面的HTML：你使用的是什麼版本的JQM的

<div data-role="page" id="AllPage" class="body" style="overflow:hidden;"> 

    <header class="bar" id="AllHead"></header> 

    <div data-role="content" class="content" id="home"></div><!-- /content --> 

    <footer class="bar" id="allFoot"></footer> 

</div><!-- /page -->

來源

2011-09-30 09:14:30 davethecoder

注意pagebeforecreate是jqmobile – davethecoder

的Beta 3中是否可能提供HTML，所以我可以通過它一步？我想我已經有了頭了！ – Verbium

我已經修改了我的帖子，基本上無論你創建的HTML進入$ content，你都需要聲明var $ page，$ content，$ header，$ footer;全局位於您用於處理頁面的js文件的頂部。 – davethecoder

我有同樣的問題，以下解決方案爲我工作：

商店頁面變成一個全球性的陣列
改變你的錨是這樣的：<a href='javascript:change_page(1)' />其中1是由指數代替你頁。
然後定義.change_page()方法，並呼籲jquery.mobile.changePage(arr[index]);瀏覽到您的動態添加頁面。

問候。

來源

2011-09-29 16:40:18

jQuery Mobile的 - 如何使用XML

回答

相關問題