使用jQuery Mobile的动态页面

Question

我已经使用jQuery了很长一段时间,并采用了jQuery Mobile的第一步.

我使用index.html作为我的应用程序的jQuery Mobile和设计,它在加载后立即从content.php(所有页面的列表视图)调用内容.

我使用page.php作为页面内容模板,它根据变量显示内容,如下所示:page.php？id = 01 page.php？id = 02 page.php？id = 03 ...依此类推.

我认为从这里开始的最佳方式是在index.html上有两个jQm'页面',一个用于应用程序的主页,另一个用于动态加载来自page.php？id = xx的内容.这样我加载应用程序后就不必加载所有内容.

该怎么做？如何使列表视图项转到下一页并将正确的内容加载到其中？

Answer 1

只需创建链接,<a href="...它就可以了.JQM使用AJAX加载它们

使用JQM创建的应用程序应该可以在任何没有javascript的旧浏览器中运行.其余的由JQM本身负责.

[编辑]

要获取URL并将它们放在任何你想要的地方,只需使用来自jquery arsenal的普通旧.load()或.get(),当你将内容发送到你想要的div时 -

不推荐使用:从jquery mobile使用.page()

当前:打电话.trigger('create')

(此事件添加样式和控件).详细说明在我的常见问题解答中:http://jquerymobiledictionary.pl/faq.html

Answer 2

工作评论示例：

1. 创建一个空的 jqMobile 页面（具有适当数据角色的 div 和 id="dynamicPage" 的 id）

2. 获取菜单链接的 id，并将其插入为空页面的标题属性。

    $("#appMainMenu a").live("点击", function(evt){
    var Whatpageto = $(this).attr('id');
    $('#dynamicPage').attr('标题', 'dpage-'+whatpageto); // 标题看起来像 title="dpage-linksid"
});

1. 像这样加载数据：

    $('#dynamicPage').bind('pageshow', function() {
        $('#dPage').html(''); // 在加载数据时动画
        var Whatpage = $(this).attr('标题'); // 获取我们之前更改的页面标题
        var Whatpage1 = Whatpage.replace("dpage-", ''); // 从标题中删除“dpage-”部分，我们就有了 id。
        var whatpage2 = 'path/to/pagewhereyourcontentis.html'; // 内容从哪里来？文件的 url 或路径
        $.get(whatpage2, function(data) { // 从外部文件加载内容
          $('#dynamicPage').html(数据); // 将数据插入到jqMobile页面（这是一个div）。
          $('#dynamicPage').page(); // 重新渲染页面，否则动态内容不会设置样式。
        });
});

希望这可以帮助。问题？