2012-08-14 55 views
4

在整个jQuery Mobile文档中,他们使用左侧菜单进行导航,当浏览器宽度较小时,该菜单更改为更易于移动的版本。你可以看到一个例子在this page.jquery mobile左菜单

他们在整个文档使用此布局,我可以在他们使用两个div与ID的来源看“内容主要”和“内容次要的。”我的问题涉及到我无法找到文件中实际讨论的这种结构的任何事实。看起来很奇怪,他们不会在框架中包含这样一个有用的小部件。他们是否使用自定义代码来做到这一点,或者我是否以某种方式在文档中错过了它?

回答

0

我很坦率地说很惊讶地看到它已经多么具有挑战性找到工作的一贯左侧导航例子,正如JQM预期的那样。

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

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

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

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

如果/当我有一个可行的解决方案时,我会尽快发布。

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 
} 
+0

是的,我有一点媒体查询的经验,所以我熟悉这个概念。对我来说,他们创建了一个非常有用的小部件来显示他们的文档似乎有点愚蠢,但他们实际上并没有在框架中包含这个小部件。当然,我可以复制他们的HTML和CSS,但它看起来有点愚蠢,所以我认为我只是确保我没有错过任何东西。 – rburk 2012-08-14 16:47:02

+0

实际上,这绝对是一个jQuery移动特定问题 - 这是使左导航如此困难的JQM框架。有几个插件可用,但我都不喜欢它们。最终,虽然我对jQuery家伙非常尊重,但整个框架感觉太像试图将方形钉放入圆孔中。所以它是本地的,我完全免费。当然,这也不是没有警告的;-) – rmirabelle 2013-03-13 16:32:49