我要创建一个动态页面,在其中单击“列表视图”选项。

我的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图层?

谢谢

  ask by ProfeFP TK translate from so

本文未有回复,本站智能推荐:

2回复

jQuery Mobile从Listview创建页面

使用下面的代码,我将如何创建一个新的动态页面,以用于显示有关电影的更多详细信息? 我想象它使用一个$ .mobile.changePage引用的onclick事件处理程序。
1回复

为什么jquery / javascript在jquery移动listview中创建重复的列表项?

我正在尝试构建一个JQuery Mobile列表视图(基于入门指南 )。 列表项由json数据填充。 它基本上是工作。 该列表正在创建和正确设置样式。 但是该列表包括重复项。 只有2个json对象,但是列表包括4个项目。 后两个是前两个的重复。 我仔细检查了json数据,并
1回复

使用XML动态附加listview会失去jQuery移动样式

我有一个混合应用程序,允许您从列表中选择一个ID,当单击搜索时,它应检索所有相关的注释并将它们附加到列表视图“my-list”。 到目前为止,我没有问题获取和显示数据,但它不会显示应该使用JQuery mobile。 脚本: 我只想添加“my-list”,因为我已经在做了,但
2回复

jQuery动态listview传递数据

即时通讯遇到一些初学者问题...情况:一个按钮,该按钮将一个id为123的li元素附加到ul listview。 单击此新li元素后,应显示一个新页面,显示已单击“ id 123”。 只要li元素经过硬编码且未附加到此按钮,这种方法就可以工作...这是我的错吗?
1回复

如何使用jQuery在ListView中的多个列表项中显示数据

我正在使用php文件获取数据库数据。 当我使用jquery加载该php文件时,该数据将显示在listview的同一列表项中。 我有多个标题,但显示在单个列表项中。 当我使用$.each在我做错的jquery-1.9.1.min.js文件中显示错误。 错误为:TypeError:无效的'i
3回复

如何使用jquery将数据绑定到asp.net中的listview

我有列表视图: 和函数使用 jquery 获取数据 函数在代码隐藏中获取数据: 请告诉我通过函数OnSuccess的代码将数据绑定到ListView的OnSuccess ,谢谢:)
1回复

使用Jquery在嵌套在ListView中的ListView中找到超链接

我需要一个像https://stackoverflow.com/a/7368719/1203098这样的解决方案,其中我需要选择的链接位于一个ListView中,该ListView在另一个ListView中按分组。 我一直收到的错误是“ Object reference not set t
1回复

jQuery无法与ListView一起使用

所以基本上我有几个文本框,我只想接受其中的数字,但是我无法让下面使用的JQuery Im与ListView内的文本框或另一个asp.net页一起使用。 此代码适用于名为txtSearch的普通文本框,但是当我插入txtSearch的txtQty insead时,它不起作用:s