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

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

 
 
 start 
  

当用户单击开始链接时，我想异步地从我的JSON api加载https://stackoverflow.com/questions/6050384/dynamically-create-jquery-mobile-page-via-javascript-after-clicking/startPage的内容。 在回调中，我想通过JavaScript为https://stackoverflow.com/questions/6050384/dynamically-create-jquery-mobile-page-via-javascript-after-clicking/startPage创建所有必需的DOM元素，并将内容添加到它。 我为此创建了一个createStartPage(data)方法。

实现这种动态创建的页面的正确方法是什么，以便打开index.html#https://stackoverflow.com/questions/6050384/dynamically-create-jquery-mobile-page-via-javascript-after-clicking/startPage也可以工作？ 我认为应该有一种方法来挂钩$.mobile.changePage()以包含自定义加载/页面创建代码，但我没有找到任何东西。 或者这个问题有更好的解决方案吗？

Answer 1

我有时间搞乱这个，我找到了一个有效的解决方案（测试过）。

一些注意事项：

1. 封装在$（document）.ready（）中的javascript; 用于动态创建页面，如果用户导航到index.html文件并附加了哈希标记（即index.html＃some_hash_mark）。
2. 函数create_page（page_id）用于从链接创建页面（如果您愿意，可以编程方式）。
3. 请注意，jquery核心脚本和jquery mobile css在$（document）.ready（）语句之前加载，但之后加载了jquery移动脚本。
4. 看到body标签在向页面附加页面时被赋予了一个id。

文件样本

            
 
Some #page_0 text...

create new page
 
   

Answer 2

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

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

2. 接下来，我将来自外部源的数据加载到位于我的“包装器”页面中的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('
  FOO BAR
  '); $('#my_page_id').page(); 

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

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

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

Answer 3

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

Answer 4

你看过jquery的ajax加载方法吗？ 好像你可以让它加载你想要的页面，并在每次请求回来时替换正文。

参考

Answer 5

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

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