我目前正在评估jQuery Mobile和PhoneGap的组合。对于我的应用程序，我需要一种"内部应用程序"导航模型:一个固定的标题，其中包含在各种上下文和函数之间切换的元素，下面的整个区域取决于所选择的函数。一个示例:用户选择一个客户，然后可以在关于该客户的不同数据和统计视图之间切换。或者，用户可以在保持相同视图的情况下在不同的客户之间切换。每个函数/视图也可能是一个相当复杂的多个页面的结构，有自己的导航。
我想我现在了解jQuery移动的基本思想，但我不确定如何实现这个"正确的方式"。
- 我可以简单地通过将整个标题与导航编码到每个单独的页面中来做到这一点，但这感觉像是一个非常糟糕的主意-大量冗余代码，许多插入微小错误的地方很难发现。
- 我可以尝试将不同视图的所有UI元素添加到单个页面，隐藏它们，只显示属于当前功能的UI元素。这感觉也不对——我怀疑DOM会非常大，我怀疑这会导致各种(性能)问题。
- 我可以尝试使用jQuery DOM操作技术动态创建依赖于函数的页面内容。这听起来是个好主意，但是单独的页面可能非常复杂，我担心使用JavaScript生成大量复杂的HTML代码将导致不可维护的代码团。
- 我可以尝试结合的方法-代码在HTML文件中的个别页面，然后以某种方式"链接"他们到适当的地方使用DOM操作-但我从来没有这样做过，我不确定是否以及如何我可以得到这个工作。
- 我可以试着把"细节"页放入一个iframe -这会工作吗?
实现这种应用程序的最佳/规范方式是什么?你知道有什么教程或例子吗?
只需分离标题，然后将其重新连接到新页面。例如:
$footer = $("#myfooter");
$header = $("#myheader");
$footer.detach();
$footer.appendTo('#newpage');
$header.detach();
$header.prependTo('#newpage');
$.mobile.changePage('#newpage');
分离不会杀死你所有的按钮处理程序等等。你需要跟踪你在哪个页面或查看位置。哈希可以根据显示的页面做不同的事情。
——格雷格框架女王互动
www.thexinteractive.com
第一种方法是最简单的方法。我也是这么做的。这也给了我们自由，添加一个按钮特定于什么在浏览区域的网页。
第二种方法将有大量您不想要的额外调用。其余的方法不值得花费精力。