jquery-mobile - jquery mobile左侧菜单

Question

在整个 jQuery Mobile 文档中，他们使用左侧菜单进行导航，当浏览器宽度较小时，该菜单会更改为对移动设备更友好的版本。您可以在 this page. 上查看示例

他们在整个文档中都使用这种布局，我可以在源代码中看到他们使用了两个 ID 为“content-primary”和“content-secondary”的 div。我的问题与以下事实有关，即我找不到文档中实际讨论的有关此结构的任何信息。他们不会在框架中包含如此有用的小部件，这似乎很奇怪。他们是使用自定义代码来实现的，还是我在文档中以某种方式错过了它？

Answer 1

坦率地说，我很惊讶地发现找到一个在 JQM 中始终如一地工作且符合预期的左导航示例是多么具有挑战性。

我最终直接从 JQM 文档中复制代码，包括获取他们的自定义 .js 和 .css 脚本(它定义了 .content-primary 和 .content-secondary 类，以及使菜单响应的各种 @media 查询)。

JQM 文档不使用“多页”格式。相反，每个导航菜单项都链接到一个完全独立的 URL(可能是通过在链接中添加 data-prefetch="true" 预取到 DOM 中)，因此每个新页面/URL 都必须重新定义相同的导航菜单。

这立即让我的开发人员大脑想到“让我们抽象菜单并自动将其包含在每个页面上”。但是如何在没有 PHP(或其他服务器端语言)的情况下“包含”每个页面上的菜单？这是我还没有解决的问题。

您可以调用$(document).bind('pageinit',使用 javascript/jquery 手动将菜单注入(inject)加载页面的功能，但我还没有弄清楚如何正确执行此操作。

如果/当我有一个可行的解决方案时，我会及时通知你。