帮助制作jQueryMobile的菜单按钮

时间:2010-11-21 17:14:22

标签: jquery jquery-mobile

jquery和jquerymobile的新手。

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

我作弊并且在mobile.css上我将“顶级菜单”显示为:无法最初隐藏它。

修改

更接近,但并不完美。现在,在菜单上单击(正在寻找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.
      });
    });
});

1 个答案:

答案 0 :(得分:3)

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移动特定内容。如果您这样做,则必须在新内容上调用.page()。这就是为什么它仍然不起作用。

在文档和演示部分http://jquerymobile.com/demos/1.0a2/中可以使用活动,只需点击events即可。

最后 - 手机中没有弹出窗口。如果您打开一个对话框,请查看JQM文档中的对话框。

Jquery是一种完全不同的javascript方法,jquery mobile也是一个新主意。你的jquery的直觉和经验在一段时间内仍然无用,直到你明白了jqm及其用途。

如果您对渐进增强功能有所了解,这可能会更快发生。

祝你好运。