2010-11-21 104 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和它的用途。

如果您閱讀了漸進式增強功能,可能會更快地發生這種情況。

祝你好運。