当前位置：文江博客话题详情

使用 jQuery Mobile 的动态页面

发布于 2024-10-15 06:49:55 字数 399 浏览 3 评论 0原文

我已经使用 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 中的内容。这样我就不必在加载应用程序后立即加载所有内容。

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

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

秋风の叶未落 2024-10-22 06:49:55

只需使用

您使用 JQM 创建的应用程序应该可以在任何没有 javascript 的旧浏览器中运行。其余的都已处理完毕要

[编辑]

获取 URL 并将它们放在您想要的任何位置，只需使用普通的旧 .load() 或 .get() 来自 jquery 武器库，当您将内容获取到您想要的 div -

已弃用：使用 jquery mobile 中的 .page()

当前：调用 .trigger('create')

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

回复收藏 0 原文

梦中的蝴蝶 2024-10-22 06:49:55

工作注释示例：

创建一个空的 jqMobile 页面（具有适当数据角色的 div，并且 id 为 id="dynamicPage"）
获取菜单链接的 id，并将其插入为空页面的 title 属性。

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

像这样加载数据：

    $('#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.
        });
});

希望这有帮助。问题？

Working commented example:

Create an empty jqMobile page (div with the appropriate data-role, and an id of id="dynamicPage")
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"
});

Load data like so:

    $('#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?

回复收藏 0 原文

凉世弥音 2024-10-22 06:49:55

以下是我为我的页面解决此问题的方法

$("#masterList").empty();
var listItems = "";
$.each(data.Messages, function (i, item)
{
    listItems += "<li><div><a href='#messageData' onclick='$(" +   // Use a click handler to set the attr of detailPage div
             '"#detailPage").attr("detailId", "'+ item.Id +       // my JSON item has an ID
             '")' + "'>";                                         // note the crazy quoting

    listItems += "Test about the item</a></li>";

}
$("#masterList").append(listItems);

对于detailPage，我使用pageshow事件处理程序使用id获取JSON对象，并根据detailId属性中的id加载详细信息项 - 类似 loadDetail($("# detailPage").attr("detailId")) 和我的 loadDetail 函数完成了剩下的工作。

不幸的是，这将破坏 jQuery mobile 的 URL 策略。由于所选项目存储在页面本身中 - 这不好。我将尝试使用 HTML 页面的外部链接并将 id 作为参数传递。

Here's what I came up to solve this for my page

$("#masterList").empty();
var listItems = "";
$.each(data.Messages, function (i, item)
{
    listItems += "<li><div><a href='#messageData' onclick='$(" +   // Use a click handler to set the attr of detailPage div
             '"#detailPage").attr("detailId", "'+ item.Id +       // my JSON item has an ID
             '")' + "'>";                                         // note the crazy quoting

    listItems += "Test about the item</a></li>";

}
$("#masterList").append(listItems);

For the detailPage I used the pageshow event handler to fetch the JSON object using the id and loaded the detail item based on the id in the detailId attribute - something like loadDetail($("#detailPage").attr("detailId")) and my loadDetail function did the rest.

Unfortunately this will break the URL strategy for jQuery mobile. Since the selected item is stored in the page itself - this is no good. I am going to try using an external link that is an HTML page and passing the id as an arg.

回复收藏 0 原文

北笙凉宸 2024-10-22 06:49:55

在此处输入图像描述

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width,height=device-height,user-scalable=no,initial-scale=1.0"/>
<link rel="stylesheet"  href="jquery.mobile-1.0.1.css" /> 
<title> Hello World </title>

<script src="jquery.js"></script>
<script src="jquery.mobile-1.0.1.min.js"></script>

<script type="text/javascript">
$(document).ready(function(e) {

$('#omtList').html('<ul data-role="listview" data-split-icon="delete" data-split-theme="d"> <li><a href="index.html"><h3>Broken Bells</h3><p>Broken Bells</p></a><a href="lists-split-purchase.html" data-rel="dialog" data-transition="slideup">Purchase album </a></ul>').trigger('create');
    });
</script>
</head>

<body>
omt
<div>
    <div id="omtList">  


    </div><!--/content-primary -->  
</body>
</html>

enter image description here

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width,height=device-height,user-scalable=no,initial-scale=1.0"/>
<link rel="stylesheet"  href="jquery.mobile-1.0.1.css" /> 
<title> Hello World </title>

<script src="jquery.js"></script>
<script src="jquery.mobile-1.0.1.min.js"></script>

<script type="text/javascript">
$(document).ready(function(e) {

$('#omtList').html('<ul data-role="listview" data-split-icon="delete" data-split-theme="d"> <li><a href="index.html"><h3>Broken Bells</h3><p>Broken Bells</p></a><a href="lists-split-purchase.html" data-rel="dialog" data-transition="slideup">Purchase album </a></ul>').trigger('create');
    });
</script>
</head>

<body>
omt
<div>
    <div id="omtList">  


    </div><!--/content-primary -->  
</body>
</html>

回复收藏 0 原文

~没有更多了~