单击后通过JavaScript动态创建jQuery Mobile页面 [英] Dynamically create jQuery Mobile page via JavaScript after clicking
问题描述
我的jQuery Mobile应用程序由一个index.html页组成，并且仅包含一个页面，该页面在启动时具有链接:
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>
当用户单击开始链接时，我想从JSON API异步加载startPage的内容.在回调中，我想通过JavaScript为startPage创建所有必需的DOM元素，并将内容添加到其中.我为此创建了一个createStartPage(data)方法.
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.
实现这种动态创建的页面的正确方法是什么，以便打开index.html#startPage也有效?我认为应该有一种方法可以挂入$.mobile.changePage()以包括自定义加载/页面创建代码，但是我什么也没找到.还是对此问题有更好的解决方案?
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).
一些注意事项:
- 封装在$(document).ready();中的javascript；用于在用户导航到您的index.html文件并添加了井号(即index.html#some_hash_mark)的情况下动态创建页面.
- create_page(page_id)函数用于从链接(或根据需要通过编程)创建页面.
- 请注意，jquery核心脚本和jquery移动css是在$(document).ready()语句之前加载的，但jquery移动脚本是在$(document).ready()语句之前加载的.
- 请注意，给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>
这篇关于单击后通过JavaScript动态创建jQuery Mobile页面的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
