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

发布于 2024-11-07 23:13:42 字数 604 浏览 1 评论 0原文

我的 jQuery Mobile 应用程序由单个 index.html 页面组成，并且仅包含一个在启动时带有链接的页面：

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

当用户单击开始链接时，我想加载 的内容startPage 来自我的 JSON api 异步。在回调中，我想通过 JavaScript 创建 startPage 所需的所有 DOM 元素并向其中添加内容。我为此创建了一个 createStartPage(data) 方法。

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

原文

My jQuery Mobile app consists of a single index.html page and contains only one page with a link on startup:

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

When the user clicks on the start link, I want to load the content for the startPage from my JSON api asynchronously. On the callback I would like to create all the required DOM elements for startPage via JavaScript and add the content to it. I have created a createStartPage(data) method for this.

What is the right way to implement such dynamically created pages, so that opening index.html#startPage also works? I think there should be a way to hook into $.mobile.changePage() to include custom loading/page-creation code, but I did not find anything. Or is there a better solution for this problem?

分享到QQ

分享到微博

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

发布评论

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

初与友歌 2024-11-14 23:13:42

我花了一些时间来解决这个问题，并且找到了一个有效的解决方案（经过测试）。

一些注意事项：

javascript 封装在 $(document).ready(); 中用于在用户导航到已附加哈希标记的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>

I had some time to mess around with this and I've found a solution that works (tested).

SOME NOTES:

the javascript encapsulated in $(document).ready(); is for dynamically creating a page if the user navigates to your index.html file with a hash mark already appended (i.e. index.html#some_hash_mark).
The function, create_page(page_id) is for creating a page from a link (or programatically if you like).
Note that the jquery core script and the jquery mobile css are loaded before the $(document).ready() statement but that the jquery mobile script is loaded after.
See that the body tag has been given an id that is refrenced when appending pages to it.

Document Sample

<!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>

回复收藏 0 原文

梓梦 2024-11-14 23:13:42

对我来说 Jasper 解决方案不起作用，但我发现这个解决方案看起来更干净并且工作正常

回复收藏 0 原文

魂归处 2024-11-14 23:13:42

以下是我向 Jquery Mobile 网站动态添加内容的方法：

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



    <脚本>
    $('#my_page_id').live('pageshow', function() {
        my_data_loading_function('my_page_id');
    });

接下来，我将数据从外部源加载到位于“wrapper”页面中的 div 标签中：

函数 my_data_loading_function(页面) {
    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('FOO BAR< ;/div>');
$('#my_page_id').page();
```

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

我还使用 Jquery 1.6 和 Jquery Mobile 1.0a4.1

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

Here is my method for dynamically adding content to my Jquery Mobile websites:

First I create a "wrapper" data-role=page div like so:

<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-->

Next I load data from an external source into a div tag located in my "wrapper" page:

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();
        });
    }
}

Some Notes:

$.mobile.pageLoading(); and $.mobile.pageLoading(true); show and hide (respectively) the Jquery Mobile loading spinner.
if ($('#' + page + '-content').is(':empty')) { allows the user to navaigate away from the dynamically created page and then come back and not have to re-load the data until a full page refresh occurs.
My dynamically created page included mostly a list so listview() makes the jquery mobile framework refresh the list selected to add the proper css, page() does the same to other page elements; however you may only need to use one or the other depending on your content (or none at all if its just plain text).
I realize this isn't creating a whole page dynamically because the "wrapper" page is already hard-coded but if you want to add a whole new page you can probably use something like: (untested)
```
$(document).append('<div data-role="page" id="my_page_id"><div data-role="content">FOO BAR</div></div>');
$('#my_page_id').page();
```

If you really want to make it all dynamically created you can check for window.location.hash and create your data-role=page div with the id set as the window.location.hash.

Also I am using Jquery 1.6 and Jquery Mobile 1.0a4.1

I hope something in there can help someone out there :)

回复收藏 0 原文

眼泪也成诗 2024-11-14 23:13:42

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

参考

回复收藏 0 原文

捶死心动 2024-11-14 23:13:42

在 JSFiddle 的这个示例中，我从 Flickr 进行 API 调用，并通过 jquery tmpl 引擎运行结果，将新页面附加到文档，然后对新插入的页面调用 $.mobile.changePage()。我想您会发现 jquery tmpl + apis + jquery mobile 的组合有多么有用。

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

回复收藏 0 原文

~没有更多了~