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

时间：2023-02-09
本文介绍了点击后通过 JavaScript 动态创建 jQuery Mobile 页面的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

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

<div data-role="page"><div data-role="内容"><a id="startPageLink" href="startPage">开始</a></div></div>

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

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

解决方案

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

一些注意事项:

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

文档示例

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?

解决方案

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

SOME NOTES:

  1. 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).
  2. The function, create_page(page_id) is for creating a page from a link (or programatically if you like).
  3. 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.
  4. 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>

这篇关于点击后通过 JavaScript 动态创建 jQuery Mobile 页面的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持html5模板网！

上一篇：响应式导航栏隐藏其下方的元素 下一篇：CSS 径向菜单

相关文章

最新文章

    Copyright © 2022-2023 HTML5模板网 版权所有并保留所有权