jQuery Mobile的动态页面 [英] Dynamic pages with jQuery Mobile

问题描述

我使用jQuery已经有一段时间了，并开始使用jQuery Mobile.

I've been using jQuery for quite a while, and taking my first steps with jQuery Mobile.

我将index.html用作jQuery Mobile&我的应用程序的设计，该应用程序在加载后立即从content.php(所有页面的列表视图)中调用内容.

I use index.html as the jQuery Mobile & design of my app, which calls the content from content.php (a list view of all pages) as soon as it loads.

我将page.php用于页面内容模板，该模板根据变量显示内容，如下所示: page.php?id = 01 page.php?id = 02 page.php?id = 03 ...等等.

I use page.php for a page content template, which displays the content depending on a variable, like so: page.php?id=01 page.php?id=02 page.php?id=03... And so on.

我当时认为最好的方法是在index.html上创建两个jQm'页面'，一个用于应用程序的主页，另一个动态地从page.php?id = xx加载内容.这样，我不必在加载应用程序后立即加载所有内容.

I was thinking the best way to go from here would be to have two jQm 'pages' on index.html, one for the app's homepage, and one that dynamically loads the content from page.php?id=xx. This way I don't have to load all my content as soon as my app is loaded.

该如何完成?如何使列表视图项转到下一页并将正确的内容加载到下一页?

How should this be done? How can I make the list view items go to the next page and load the right content into it?

推荐答案

正在工作的示例:

1. 创建一个空的jqMobile页面(具有相应数据角色的id为id ="dynamicPage"的div)

1. Create an empty jqMobile page (div with the appropriate data-role, and an id of id="dynamicPage")

获取菜单链接的ID，并将其作为空白页的title属性插入.

Get your menu link's id, and insert it as the title attribute of the empty page.

    $("#appMainMenu a").live("click", function(evt){
    var whatpageto = $(this).attr('id');
    $('#dynamicPage').attr('title', 'dpage-'+whatpageto); // the title would look like title="dpage-linksid"
});

1. 像这样加载数据:

    $('#dynamicPage').bind('pageshow', function() {
        $('#dPage').html(''); // animate while we're loading data
        var whatpage = $(this).attr('title'); // get the page's title we changed earlier
        var whatpage1 = whatpage.replace("dpage-", ''); // remove the 'dpage-' part from the title, and we have our id.
        var whatpage2 = 'path/to/pagewhereyourcontentis.html'; // where is the content coming from? url or path to file
        $.get(whatpage2, function(data) { // load content from external file
          $('#dynamicPage').html(data); // insert data to the jqMobile page (which is a div).
          $('#dynamicPage').page(); // Re-render the page otherwise the dynamic content is not styled.
        });
});

希望这会有所帮助.有问题吗?

Hope this helps. Questions?

这篇关于jQuery Mobile的动态页面的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！