点击后通过 JavaScript 动态创建 jQuery Mobile 页面

Posted

技术标签:

【中文标题】点击后通过 JavaScript 动态创建 jQuery Mobile 页面【英文标题】:Dynamically create jQuery Mobile page via JavaScript after clicking 【发布时间】:2011-08-28 08:49:26 【问题描述】:

我的 jQuery Mobile 应用由一个 index.html 页面组成,并且只包含一个带有启动链接的页面:

<div data-role="page">
  <div data-role="content">
    <a id="startPageLink" href="startPage">start</a>
  </div>
</div>

当用户点击开始链接时,我想从我的 JSON api 异步加载 startPage 的内容。在回调中,我想通过 javascriptstartPage 创建所有必需的 DOM 元素并将内容添加到其中。我为此创建了一个createStartPage(data) 方法。

实现这种动态创建的页面的正确方法是什么,以便打开index.html#startPage 也有效?我认为应该有一种方法可以连接到$.mobile.changePage() 以包含自定义加载/页面创建代码,但我没有找到任何东西。或者这个问题有更好的解决方案吗?

【问题讨论】:

最新版本的 jQuery Mobile(5 月 27 日)包含对 $.mobile.changePage() 工作方式的更改,这可能有用:jquerymobile.com/blog/2011/05/27/… 【参考方案1】:

我有一些时间来解决这个问题,我找到了一个可行的解决方案(经过测试)。

一些注意事项:

    封装在$(document).ready()中的javascript;用于在用户导航到带有哈希标记的 index.html 文件时动态创建页面(即 index.html#some_hash_mark)。 create_page(page_id) 函数用于从链接创建页面(或以编程方式,如果您愿意)。 请注意,jquery 核心脚本和 jquery mobile css 在 $(document).ready() 语句之前加载,但 jquery mobile 脚本在之后加载。 看到 body 标记已被赋予一个 id,该 id 在向其附加页面时被引用。

文档示例

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<link rel="stylesheet" type="text/css" href="http://code.jquery.com/mobile/1.0a4.1/jquery.mobile-1.0a4.1.min.css"/>
<script type="text/javascript" charset="utf-8" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<script>
$(document).ready(function() 

    //check if hash exists and that it is not for the home screen
    if (window.location.hash != '' && window.location.hash != '#page_0') 

        //set whatever content you want to put into the new page
        var content_string = 'Some ' + window.location.hash + ' text...<br><br><a href="#page_0">go to home screen</a>';

        //append the new page onto the end of the body
        $('#page_body').append('<div data-role="page" id="' + window.location.hash.replace('#','') + '"><div data-role="content">' + content_string + '</div></div>');

        //add a link on the home screen to navaigate to the new page (just so nav isn't broken if user goes from new page to home screen)
        $('#page_0 div[data-role="content"]').append('<br><br><a href="#' + window.location.hash.replace('#','') + '">go to ' + window.location.hash.replace('#','') + ' page</a>');
    
);
function create_page(page_id) 

    //set whatever content you want to put into the new page
    var string = 'FOO BAR page...<br><br><a href="#page_0">return to home screen</a>';

    //append the new page onto the end of the body
    $('#page_body').append('<div data-role="page" id="' + page_id + '"><div data-role="content">' + string + '</div></div>');

    //initialize the new page 
    $.mobile.initializePage();

    //navigate to the new page
    $.mobile.changePage("#" + page_id, "pop", false, true);

    //add a link on the home screen to navaigate to the new page (just so nav isn't broken if user goes from new page to home screen)
    $('#page_0 div[data-role="content"]').append('<br><br><a href="#' + page_id + '">go to ' + page_id + ' page</a>');

    //refresh the home screen so new link is given proper css
    $('#page_0 div[data-role="content"]').page();

</script>
<title>Fixed Headers Example</title>
<script src="http://code.jquery.com/mobile/1.0a4.1/jquery.mobile-1.0a4.1.min.js"></script>

</head>

<body id="page_body">
<div data-role="page" id="page_0">
<div data-role="content">Some #page_0 text...<br><br><a href="javascript: create_page('foo_bar_page');">create new page</a></div>
</div>


</body>
</html>

【讨论】:

这解决了如何从特定的动态页面开始的问题。谢谢你。但是如何按需创建额外的页面(点击之后)?. create_page(page_id)... 它是一个从链接创建页面的函数。它创建页面,对其进行初始化,然后将用户转发到新页面。我上面写的特定功能还在主页上创建了一个链接,因此如果用户返回主页,他们可以再次前进到新创建的页面。这记录在注释 #2 下。 &lt;li&gt;&lt;a href="javascript:create_page('page_id_here');"&gt;link text&lt;/a&gt;&lt;/li&gt;【参考方案2】:

对我来说 Jasper 解决方案不起作用,但我发现 this solution 看起来更干净且工作正常

【讨论】:

这是一个很多更好的解决方案。【参考方案3】:

这是我将内容动态添加到我的 Jquery Mobile 网站的方法:

    首先我创建一个“包装器” data-role=page div,如下所示:

    <div data-role="page" id="my_page_id">
    <div data-role="content">
        <script>
        $('#my_page_id').live('pageshow', function() 
            my_data_loading_function('my_page_id');
        );
        </script>
    <div id="my_page_id-content"></div>
    </div><!--/content-->
    </div><!--/page-->
    

    接下来,我将来自外部源的数据加载到位于“包装器”页面中的 div 标记中:

    function my_data_loading_function(page) 
        if ($('#' + page + '-content').is(':empty')) 
            $.mobile.pageLoading();
            $('#' + page + '-content').load("my_external_script.php", function() 
                $.mobile.pageLoading(true);
                $('#' + page + '-content ul').listview();
                $('#' + page + '-content ul').page();
            );
        
    
    

一些注意事项:

$.mobile.pageLoading();和 $.mobile.pageLoading(true);显示和隐藏(分别)Jquery Mobile 加载微调器。

if ($('#' + page + '-content').is(':empty')) 允许用户导航离开动态创建的页面然后返回而不必重新加载数据,直到发生整页刷新。

我的动态创建的页面主要包含一个列表,因此 listview() 使 jquery 移动框架刷新所选列表以添加正确的 css,page() 对其他页面元素执行相同的操作;但是,根据您的内容,您可能只需要使用其中一种(如果只是纯文本,则根本不需要)。

我意识到这并不是动态创建整个页面,因为“包装”页面已经是硬编码的,但是如果你想添加一个全新的页面,你可以使用类似的东西:(未经测试)

$(document).append('<div data-role="page" id="my_page_id"><div data-role="content">FOO BAR</div></div>');
$('#my_page_id').page();

如果你真的想让它全部动态创建,你可以检查 window.location.hash 并创建你的 data-role=page div,并将 id 设置为 window.location.hash。

我也在使用 Jquery 1.6 和 Jquery Mobile 1.0a4.1

我希望那里的东西可以帮助那里的人:)

【讨论】:

此解决方案仍然要求所有页面包装器都存在,然后单击链接。但我可能有数千个链接,这些链接指向数千个不同的页面。难道没有办法不创建数千个未使用的页面吗?【参考方案4】:

你看过jquery的ajax加载方法吗?似乎你可以让它加载你想要的页面,并在每次有请求返回时替换正文。

reference

【讨论】:

【参考方案5】:

在 JSFiddle 上的这个示例中,我从 Flickr 调用 API 并通过 jquery tmpl 引擎运行结果以将新页面附加到文档,然后调用 $.mobile.changePage() 到新插入的页面.我想你会看到 jquery tmpl + apis + jquery mobile 的配对是多么有用。

http://jsfiddle.net/sgliser/8Yq36/5/

【讨论】:

以上是关于点击后通过 JavaScript 动态创建 jQuery Mobile 页面的主要内容,如果未能解决你的问题,请参考以下文章

通过javascript每次点击动态禁用文本选择?

JavaScript小案例-动态表格

通过使用javascript单击按钮动态添加django表单

随笔记录17 layui laydate 动态创建input后点击无效

京东网页仿照

Firebase 不跟踪动态链接的点击次数