2016-04-27 50 views
0

工作,我使用溫泉的UI滑動菜單我的應用程序,這是我使用的滑動菜單代碼:溫泉UI jQuery代碼不會在主頁呼籲主頁上通過ONS-滑動菜單

<ons-sliding-menu main-page="frontPage.html" menu-page="menu.html" max-slide-distance="260px" type="overlay" var="menu"> 
</ons-sliding-menu> 

但與原始模板中的所有html都在<ons-template>標記中不同,我爲主頁(frontpage.html)製作了單獨的HTML文件,並將僅包含menu.html模板的頁面重命名爲index.html。

關於frontpage.html,我使用jquery代碼來顯示手風琴和它的工作正常,當我打開瀏覽器中的HTML頁面,但是當我打開index.html文件時,一切正常,除了jQuery手風琴。所有手風琴中的標籤都預先打開,手風琴不起作用。我也沒有在控制檯中發現任何錯誤。

我使用本地託管的jQuery v2.2.3。這兩個html文件都包含正確的jquery腳本(在瀏覽器視圖源中檢查)。

我已經嘗試了兩種方式,包括直接在腳本標記下的frontpage.html中的代碼,並將其包含在單獨的js文件中。當頁面直接加載到瀏覽器中時,它的工作狀況都很好,但當頁面通過滑動菜單頁面加載時,它無法正常工作。

回答

0

我並不是故意粗魯,但由於手風琴似乎並不奏效,因此該代碼可能對您的問題有用。

有幾個爲什麼它可能無法正常工作可能的原因:

  1. 的代碼只是沒有做你想做的。
  2. 該代碼未被執行。
  3. 代碼在不正確的時間執行。
  4. 不知何故onsen干擾執行或事後重置。

我們可以檢查1關,因爲你說它在其他情況下有效。 檢查2你只需要一個console.log,我猜你已經做了。

你說你試着移動腳本,所以我猜你也在懷疑選項3.不管它是否在單獨的文件中都不是很重要。然而,當它被執行時是重要的。例如,假設你的frontpage.html是一個帶有html,head,body等的頁面。前段時間,人們將腳本放在主體的末尾,以便在頁面加載後執行腳本。當jQuery成爲主流時,雖然它是使用$(function(){ ... })$(document).ready(function(){ ... })的方式。我猜想你正在使用其中之一。

但是,這些將確保DOMContentLoaded事件已被解僱。在你的情況下,因爲你已經加載了包含sliding-menu的頁面,這意味着此時主頁面已經被加載。你說你看過DOM樹 - 如果你看上去使用inspect element而不是show source,你可能看到內部頁面不是內部框架或iframe。因此,它們只是作爲隨機html內容放入頁面中,而不是作爲單獨的html頁面。所以基本上,當$(readyFunction)從瀏覽器的角度來看,該頁面已經被加載時,在那一點上執行。 如果該代碼在實際的手風琴之前,那麼這意味着它可能在此之前被執行。關於錯誤 - jQuery和它的插件不是很錯誤的字體。由於jQuery的選擇必須匹配,包括0。所以,即使你做類似

$('#accordion').activateAccordion(); 

這很好,因爲即使它找到0個元素,它只是與該組0元素,激活的作品元素的任意量的能力他們中的每一個。 :D

如果發生了這種情況,可以通過console.logging匹配元素的數量進行調試。您可以通過將腳本移動到主體的末尾,甚至將其包含在主頁面中來修復它。溫泉的工作方式是它不需要實際的HTML頁面,因爲它是sliding-menu和類似的組件。你可以擁有你需要的HTML內容。如果你決定去單頁的方式,那麼你可以使用事件init的網頁火(還有一個組件ons-template如果你想在一個文件中添加多個子頁面,這有助於。)

反正。否則,您可以在內容後面放置腳本。

老實說,我認爲選項3是最有可能的一個。

但是,如果您發現您的jQuery選擇器找到了您的手風琴元素並做了它所需的操作,那麼您應該再次檢查之後會發生什麼,以及一些console.log s。

我希望我有一些幫助。祝你的程序好運!