繁体 English 中英

使用 Jquery 在 Listview 中创建动态页面

[英]Create dynamic page in Listview with Jquery

原文 2019-09-18 23:09:30 8 0 jquery/ listview

我想创建一个动态页面，在其中单击 Listview 选项。

我的列表视图主页和页面选项的 HTML 标记是这样的：

<body onload="inici(); ">
<div id="home" data-role="page">
    <div data-role="header" data-theme="c"><h1>Receptes de cuina</h1></div>
    <div data-role="content">
        <ul data-role="listview" data-filter="true" id="articleList"></ul>
    </div>
</div>

<div data-role="page" id="chapter">
     <div data-role="header" data-position="fixed" data-theme="b">
      <a href="#home" data-role="button" data-icon="home" data-iconpos="notext">Home</a>
      <h1>Header page </h1>
      <a href="" data-role="button" class="next" data-icon="forward" data-iconpos="notext">Next</a>
   </div>
    <div data-role="chapter_content"></div>


     <div data-role="footer" data-theme="d">
      <span class="ui-title" />
      <label for="chapter_num">Jump to chapter</label>
      <select name="chapter_num" id="chapter_num" data-mini="true"></select>
   </div>
</div>
</body>

首先，我使用 jQuery 从 XML 文件中填充列表视图。 代码运行正确，是：

$.ajax({
         type: "GET",
         url: "https://script.google.com/macros/s/XXXXXXXXX"; 
         dataType: "xml",
         success: function(xml) {
            var resultat = xml; 
            $(xml).find('recepta').each(function(){
                var categoria = $(this).find('categoria').text() ; 
                var name_text = $(this).find('titol').text() ; 
                var foto = $(this).find("informacio_general").children("foto_recepta").text(); 
                var id = $(this).attr('id');
           $('#articleList').append('<li><a href="#chapter?id=' + id +'"><img src="' + foto + '" class="foto_thumb" />' + name_text +  '</a></li>');   
  }); //close each(
            $('#articleList').listview('refresh');
   }
  }); //close $.ajax(
  }  // fi inici

listview 列表从 XML 文件中完美收费，但是当我单击 listview 选项时，我无法生成动态页面“章节”.....我找到任何代码并尝试对其进行适配器，但没有运行....

$(document).on('pagebeforeshow', '#home', function(e,data) {
      if ( typeof data.toPage === "string" ) {
      var url = $.mobile.path.parseUrl( data.toPage ), regex = /^#chapter/;
      if ( url.hash.search(regex) !== -1 ) {
         var id = data.toPage.substr(data.toPage.lastIndexOf("id") + 1).substr(4);
        showChapter(id);  
        e.preventDefault()
              }
   }
});

function showChapter(id) {
    var htmlGeneratedOnTheFly =" The id is " + id ; 

    $('#chapter_content').empty();
    $('#chapter_content').append(htmlGeneratedOnTheFly);
    $('#chapter_content').trigger('create');

   $.mobile.changePage('#chapter', {transition:"flip"});
};

当我单击列表视图选项时，任何人都可以帮助我，如何在章节页面填充 DIV 层？

谢谢