jQuery Mobile 页面/导航结构

发布于 2024-12-10 08:12:16 字数 769 浏览 0 评论 0原文

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

我想我现在已经了解了 jQuery Mobile 的基本思想，但我不确定如何实现这个“正确的方式”。

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

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

原文

I'm currently evaluating the combination of jQuery Mobile and PhoneGap. For my application, I need a kind of "inner application" navigation model: A fixed header that contains elements to switch between various contexts and functions, and the entire region below that depends on whatever function is selected. An example: The user selects a customer and can then switch between different data and statistics views concerning that customer. Alternatively, the user can switch between different customers while keeping the same view. Each function / view might again be a rather complex construct of multiple pages with its own navigation.

I think I understand the basic ideas of jQuery Mobile by now, but I'm unsure how to implement this "the right way".

I could do this simply by coding the entire header with the navigation into every single page, but that feels like a really bad idea - lots of redundant code, lots of places to insert tiny mistakes that are very hard to find.
I could try to add all the UI elements for the different views to a single page, hide them and only display the ones that belong to the current function. This doesn't feel right either - I suspect that the DOM would be really large and I suspect that this might cause various (performance) issues.
I could try to create the contents of the page that depend on the function dynamically using jQuery DOM manipulation techniques. This sounds like a good idea, but the individual pages can be really complex, and I'm worried that generating lots of complex HTML code using JavaScript will lead to an unmaintainable blob of code.
I could try to combine the approaches - code the individual pages in the HTML file and then somehow "link" them into the appropriate place using DOM manipulation - but I've never done that and I'm unsure if and how I can get this working.
I could try to put the "detail" page into an iframe - would this work at all?

What is the best / canonical way of implementing this kind of application? Do you know of any tutorials or examples?

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

负佳期 2024-12-17 08:12:16

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

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

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

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

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

——格雷格·弗雷姆
Thex互动
www.thexinteractive.com

Just detach your header and then reattach it to your new page. For instance:

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

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

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

Detaching does not kill all of your button handlers / etc. You will need to keep track of what page you are on or look at location.hash to do different things depending on what page is being shown.

--Greg Frame
Thex Interactive
www.thexinteractive.com

回复收藏 0 原文