Question

第一次在这里发帖，所以请轻松与我，哈哈。我目前正在尝试将内容加载到我已经编写html的“页面”中。我的jquery脚本正在从我的xml文件content.xml中读取数据。我的第一页加载正常，但我试图将数据插入其中的页面中没有任何内容。我故意将每个页面创建为shell以避免数据网址问题。

这是我的代码片段（很多重复，所以没有必要把它全部放进去）： 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>

任何帮助都会很棒！

Answer 1

我遇到了同样的问题，以下解决方案对我有用：

将您的网页存储到全局数组
将您的主页更改为：<a href='javascript:change_page(1)' />其中1将替换为您网页的索引。
然后定义.change_page()方法并致电jquery.mobile.changePage(arr[index]);以导航至您动态添加的页面。

问候。

Answer 2

我只有一个页面，关键是在文档就绪或ondeviceready函数中有pagebeforechange。

$(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]并获取正确的信息，然后我会填充我的带有内容的ALLPAGES页面并让jquery认为我实际上是#person。

 // 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在用作手机时的内存使用量应用程序，使用完整的ajax导航非常非常快。

值得注意的是，您只需要hashtag导航，在pagebeforecreate中为您想要的每个页面设置一个新的if。瓦特

希望有所帮助

这里要求的是我的页面的html：

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

Jquery mobile - 如何使用XML在预先存在的页面上动态创建内容

2 个答案: