帮助制作 jQueryMobile 的菜单按钮答案

【问题标题】：Help with making menu button for jQueryMobile帮助制作 jQueryMobile 的菜单按钮
【发布时间】：2010-11-21 17:14:22
【问题描述】：

jquery 和 jquerymobile 的新手。

我想要做的就是隐藏主菜单，并在顶部导航栏上创建一个“菜单”按钮。当用户单击此按钮时，会出现一个带有“顶部菜单”的弹出窗口。

我作弊并在 mobile.css 上将“顶部菜单”转为 display:none 以最初隐藏它。

编辑

接近了，但并不完美。现在点击菜单（正在寻找 onTouch 或 onTap 但找不到 API 信息）菜单出现。有没有办法让它在弹出窗口中打开而不是出现？

此外，由于某种原因，数据主题或图标也未显示。

$(document).ready(function(){
    $('#header').append('<div data-role="navbar"><ul><li class="mainMenu"><a href="#" data-iconpos="top" data-icon="grid" data-theme="b">Menu</a></li><li><a href="#">facebook</a></li><li><a href="#">Twitter</a></li></ul></div>');
    $('.mainMenu').click(function() {
      $('#top-menu').toggle('fast', function() {
        // Animation complete.
      });
    });
});

【问题讨论】：

标签： jquery jquery-mobile

【解决方案1】：

JQM CSS 不适用于您手动添加到 DOM 的内容。您必须在该项目上致电 .page()。

详情见http://jquerymobiledictionary.dyndns.org/faq.html - 关于DOM添加的问题

[编辑]

这可能比破解它更好：http://jquerymobile.com/demos/1.0a2/#docs/toolbars/bars-fullscreen.html

[作为对您编辑的回应]

首先 - 尽量不要在不需要的地方使用 javascript。如果不需要，为什么用 javascript 填充标题？你没有在那里使用任何变量。

第二件事 - 你没有阅读我的教程。如果您在文档准备好后创建新的 DOM 内容，则不会应用任何 jquery mobile 特定的东西。如果您这样做，您必须在新内容上致电 .page()。这就是为什么它仍然不起作用。

事件在文档和演示部分http://jquerymobile.com/demos/1.0a2/ 中可用，只需单击events。

最后 - 手机中没有弹出窗口。如果您要查看对话框，请查看 JQM 文档中的对话框。

Jquery 是一种完全不同的 javascript 方法，jquery mobile 也是一个新想法。在您了解 jqm 的概念及其用途之前，您对 jquery 的直觉和经验将在一段时间内毫无用处。

如果您阅读一些关于渐进增强的内容，这可能会更快发生。

祝你好运。

【讨论】：