Question

我目前正在评估jQuery Mobile和PhoneGap的组合。对于我的应用程序，我需要一种“内部应用程序”导航模型：一个固定的标题，包含在各种上下文和函数之间切换的元素，下面的整个区域取决于所选择的任何函数。示例：用户选择客户，然后可以在有关该客户的不同数据和统计视图之间切换。或者，用户可以在保持相同视图的同时在不同客户之间切换。每个函数/视图可能再次是具有自己导航的多个页面的相当复杂的构造。

我认为我现在理解jQuery Mobile的基本思想，但我不确定如何实现这种“正确的方法”。

我可以通过将整个标题编码导入每个页面来实现这一点，但这感觉真是个坏主意 - 许多冗余代码，很多地方可以插入很难找到的小错误。< / LI>
我可以尝试将不同视图的所有UI元素添加到单个页面，隐藏它们并仅显示属于当前函数的那些元素。这也感觉不对 - 我怀疑DOM会非常大，我怀疑这可能会导致各种（性能）问题。
我可以尝试使用jQuery DOM操作技术动态创建依赖于函数的页面内容。这听起来不错，但单个页面可能非常复杂，我担心使用JavaScript生成大量复杂的HTML代码会导致无法维护的代码。
我可以尝试结合这些方法 - 编写HTML文件中的各个页面然后以某种方式使用DOM操作将它们“链接”到适当的位置 - 但我从来没有这样做过，我不确定我是否以及如何可以使这个工作。
我可以尝试将“详细信息”页面放入iframe中 - 这会起作用吗？

实施此类应用程序的最佳/规范方法是什么？你知道任何教程或例子吗？

Answer 1

只需分离标题，然后将其重新附加到新页面即可。例如：

$footer = $("#myfooter");
$header = $("#myheader");

$footer.detach();
$footer.appendTo('#newpage');
$header.detach();
$header.prependTo('#newpage');

$.mobile.changePage('#newpage');

分离不会杀死所有按钮处理程序/等等。您需要跟踪您所在的页面或查看location.hash，根据所显示的页面执行不同的操作。

- Greg Frame
Thex Interactive
www.thexinteractive.com

Answer 2

第一种方法是最简单的方法。这就是我做的方式。此外，这使您可以自由地在该页面的浏览区域中添加特定于按钮的按钮。
第二种方法将有大量你不想要的额外调用。其余的方法都不值得付出努力。

jQuery Mobile页面/导航结构

2 个答案: