问题描述
我的 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() 以包含自定义加载/页面创建代码,但我没有找到任何东西.或者有没有更好的办法解决这个问题?
我有一些时间来解决这个问题,我找到了一个可行的解决方案(经过测试).
一些注意事项:
- 封装在$(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 在向其附加页面时被引用.
文档示例
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:
- 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.51sjk.com/Upload/Articles/1/0/334/334315_20221025104037548.jpg"> <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://www.51sjk.com/Upload/Articles/1/0/334/334315_20221025104100064.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
- 0
- 0
- 0
- 0