4

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

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

4

3 回答 3

0

实际上这不是特定于jquery mobile，这是CSS3。您可以在此处查看文档：http ://www.css3.info/preview/media-queries/ 。本质上，他们所做的是使用媒体查询为不同的屏幕宽度指定样式规则，如下例所示：

@media all and (min-width: 650px) { // you can define your width here
  // style rules here
}
于 2012-08-14T16:20:11.037 回答
0

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

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

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

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

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

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

于 2012-10-08T15:40:23.907 回答
0

您是在谈论类似http://jquerymobile.com/demos/1.3.0-beta.1/docs/demos/panels/panel-nav-form.html#的左侧菜单吗？没玩过，但看起来这些天只需要

<div data-role="panel" data-position="left" data-position-fixed="false" data-display="reveal">
于 2013-07-06T21:15:59.820 回答