onsen ui jquery代码无法通过ons-sliding菜单

时间:2016-04-27 18:13:39

标签: jquery onsen-ui onsen-ui2

我正在为我的应用程序使用onsen ui滑动菜单,这是我用于滑动菜单的代码:

<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脚本(在浏览器视图源上检查)。

我已尝试过这两种方法,包括直接在script标签下的frontpage.html中的代码,并将其包含在单独的js文件中。当页面直接在浏览器中加载时,它的工作时间都很正常,但是当通过滑动菜单页面加载页面时它不起作用。

1 个答案:

答案 0 :(得分:0)

我不是故意粗鲁,但由于手风琴似乎无法正常工作,因此该代码可能对您的问题有用。

为什么它可能不起作用有几个可能的原因:

  1. 代码并没有做你想做的事。
  2. 代码未被执行。
  3. 代码正在错误的时间执行。
  4. 不知何故onsen正在干扰执行或之后重置。
  5. 我们可以查看1关,因为您说它在其他情况下有效。 要检查2,您只需要一个console.log,我猜你已经这样做了。

    你说你试过移动脚本,所以我猜你也怀疑选项3.它是否在一个单独的文件中并不是非常重要。然而,当它被执行时,重要的是什么。让我们举例来说,您的frontpage.html是一个包含htmlheadbody等的网页。不久前,人们将脚本放在身体末端,以便它们将在页面加载后执行。当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匹配元素的数量来调试它。您可以通过将脚本移动到正文的末尾,甚至将其包含在主页中来修复它。 Onsen的工作方式是它不需要它的sliding-menu和类似组件的实际html页面。你可以拥有内容所需的html。 (还有一个组件ons-template,如果你想在一个文件中添加多个子页面,它会有所帮助。)

    无论如何,如果您决定使用单页方法,那么您可以使用页面触发的事件init。否则,您可以在内容之后使用脚本。

    老实说,我认为选项3最有可能。

    但是,如果你发现你的jQuery选择器找到你的手风琴元素并做了它需要的东西那么你应该再检查一下console.log之后会发生什么。

    我希望我有所帮助。祝你的应用好运!