繁体   English   中英

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

Create dynamic page in Listview with Jquery

提示:本站收集StackOverFlow近2千万问答,支持中英文搜索,鼠标放在语句上弹窗显示对应的参考中文或英文, 本站还提供   中文繁体   英文版本   中英对照 版本,有任何建议请联系yoyou2525@163.com。

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

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

谢谢

问题暂未有回复.您可以查看右边的相关问题.
1 “动态Listview到详细信息”页面(jQuery Mobile)

我已成功从JQM的mysql数据库中列出了我的数据。 我想将列表项链接到其详细信息。 因此,当单击列表时,将显示一个新页面,其中包含列表中的数据。 我不知道该怎么做 这是我现在拥有的东西:但是我的链接无法正常工作,请猜我丢失了一些东西。 继承人js小提琴上的链接ht ...

7 jQuery Mobile动态列表视图

我创建了一个jquery mobilephonegap移动应用程序,用于显示rss feed中的技术新闻。 在Web导航器上,它可以正常工作,但是当我创建.apk文件时,标题和内容未显示在列表中 我在网络导航器上的应用 我的应用程序.apk安装在移动设备上 该应用程序的代码: ...

8 动态列表视图与jQuery Mobile

我在刷新jQuery移动列表视图时遇到问题。 这段代码可以正常工作: 但是,我需要动态添加一个图标来列出用户收藏夹中的视图项。 我使用一个通过请求将数组返回本地数据库的函数。 在第二种情况下,不应用Listview() 。 我不明白为什么第二个选项如此不同以至于它破坏了 ...

9 如何在phoneGap中创建动态ListView

我一直在努力在HTML中创建动态的带下划线的列表。 我正在创建一个Phone Gap应用程序,在其中我向服务器请求并获取一些数据。 根据此数据,我必须在列表中显示此数据,并且数据是动态的,因此我必须创建一个动态列表。 请事先帮助我 ...

10 在ListView中创建动态链接按钮

我正在使用listview创建搜索。 当用户在搜索中输入单词时,我将生成带有结果的列表视图。 现在,每个列表视图行中都会有标签。 当用户单击标签时,再次使用标签中的值进行搜索。 每个列表视图行可以有任意数量的标签。 我必须为这些标签生成链接按钮。 谁能指导我如何创建动态链接按 ...

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2022 STACKOOM.COM