2010-11-21 99 views
1

jquery和jquerymobile的新手。帮助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. 
     }); 
    }); 
}); 

回答

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移动也是一个新的想法。你的直觉和jquery的经验在一段时间内一直没有用,直到你了解jqm和它的用途。

如果您阅读了渐进式增强功能,可能会更快地发生这种情况。

祝你好运。