2012-08-14 90 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