英特尔 AppFramework - 侧边菜单不起作用答案

【问题标题】：Intel AppFramework - sidemenu not working英特尔 AppFramework - 侧边菜单不起作用
【发布时间】：2015-02-10 15:04:50
【问题描述】：

我在使用英特尔 AppFramework 时遇到问题。我似乎无法让侧边菜单工作。

它在您可以从 AppFramework 网站下载的演示中运行良好，但无论我尝试如何模仿它 - 我无法让侧边菜单在我的项目中运行。

在我添加标签之前一切正常，因为这就是您制作侧边菜单的方式。添加这些标签后，整个应用程序将呈现空白/白色，并且控制台会弹出错误提示 “Uncaught TypeError: Cannot read property 'hideScrollbars' of undefined”。

这与 appframework.ui.js 的第 1100 行有关，上面写着this.scrollingDivs.menu_scroller.hideScrollbars();

所以这个 menu_scroller 似乎由于某种原因未定义。

这是我能给你的尽可能多的代码，它是我的 AppFramework / Phonegap 应用程序的 index.html：http://pastebin.com/dXtTeiKx

控制台没有说明任何丢失的文件（cordova.js 除外，因为 PC 很好），也没有抛出除我告诉你的错误之外的任何其他 JavaScript 错误，所以我认为我不需要发布其他文件中的代码。

我已经尝试了 AppFramework 3.0 版的标签。

我也尝试过稍微切换一下 JavaScript 包含，包括 appframework.ui 之前的 appframework 并将一些包含放在 index.html 的底部，但如果到目前为止这些都解决了问题，则没有。

我也尝试删除所有多余的 css 和 js 包含，但也没有用。

这让我相信 AppFramework 本身存在某种错误，或者我只是在做一些严重错误的事情或监督了某些事情。

这里是 AppFrameworks 侧边菜单的文档：http://app-framework-software.intel.com/documentation.php#afui/afui_side，正如你所看到的，除了将导航内容包含到源代码之外，它不需要其他任何东西，我什至尝试复制整个

<nav id="leftMenu" class="view"> <header><h1>Left Menu</h1></header> <div class="pages"> <div class="panel active"> This is the left menu </div> </div> </nav>

...但这并没有改变。

【问题讨论】：

您的代码示例非常没用。如果您希望人们真诚地努力解决您的错误，请至少提供一个重现错误的现场示例。
我不希望任何人启动他们的开发环境并解决我的问题。我希望其他人以前遇到过/遇到过同样的问题并且能够帮助我。
基本上，无论开发人员多么优秀，他们都无法在头脑中解析您的代码并输出它。可能很少有人遇到过这个问题，因为这是一个相对不为人知的框架，所以您最好的希望是专业开发人员愿意出于无聊/对赏金的渴望来玩您的演示。我只是想帮你
我已经解决了这个问题。有兴趣的可以看看我的回答。（：如果您能如此友善并从我的问题中恢复您的反对意见，以便有同样问题的人将来可以更轻松地找到这件事 - 如果您确实反对的话。

标签： javascript jquery html web-applications appframework

【解决方案1】：

所以我自己成功地解决了这个问题。我不知道 AppFramework 在后台做了什么样的魔法，但导致导航对我不起作用的问题是我有一个这样定义的面板：

<div data-title="Main menu" id="menu" class="panel" data-footer = "main_footer" data-header = "main_header" data-nav = "main_leftmenu">
    This is the main menu
</div>

导航是这样正确定义的：

<nav class = "view" id = "main_leftmenu">
    <ul class = "list">
        <li><a href = "#">asd</a></li>
        <li><a href = "#">asd</a></li>
        <li><a href = "#">asd</a></li>
    </ul>
</nav>

问题出在我所说的面板上；正如你所看到的，它的 id 是“menu”——这就是破坏导航的原因。 “菜单”作为面板的 id 很可能是保留字或其他内容，因此不应使用。

我建议，如果您使用 AppFramework，您应该在所有内容（尤其是面板）前加上类似这样的前缀：

<div data-title="Main menu" id="f_main_menu" class="panel" data-footer = "main_footer" data-header = "main_header" data-nav = "main_leftmenu">
    This is the main menu
</div>

在这里，我在“主”面板前加上“f_”前缀（也有“_main”，但这只是额外的，所以它会更多地说明面板）。

简而言之

为您的面板 ID 添加前缀，并且不要给其中任何一个添加“main”或“menu”的 ID。请改用“x_main”和“x_menu”之类的内容。

【讨论】：