Помогите с созданием кнопки меню для jQueryMobile

Question

новичок в jquery и jquerymobile.

Все, что я хочу сделать, это скрыть главное меню и создать кнопку «Меню» в верхней навигационной панели. Когда пользователь нажимает на эту кнопку, появляется всплывающее окно с «верхним меню».

Я обманул, и на mobile.css я включил «верхнее меню» для отображения: ни одного, чтобы изначально скрыть его.

EDIT

Подобрался ближе, но не идеально. Теперь по меню появляется (искал 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.
      });
    });
});

Answer 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, если он вам не нужен? Вы не использовали там никаких переменных.

Второе - вы не читали мой урок. НЕТ jquery мобильных приложений будет применено, если вы создадите новый контент DOM после того, как документ будет готов. Если вы это сделаете, вы должны позвонить .page() на новый контент. Вот почему это все еще не работает.

События доступны в разделе документов и демонстраций http://jquerymobile.com/demos/1.0a2/ просто нажмите кнопку events.

Наконец - в мобильных телефонах нет всплывающих окон. Если вы обращаетесь к диалогу, взгляните на диалоги в документах JQM.

Jquery был совершенно другим подходом к javascript, а jquery mobile также является новой идеей. Ваша интуиция и опыт работы с jquery будут оставаться бесполезными в течение некоторого времени, пока вы не получите представление о jqm и о том, для чего оно.

Это может произойти быстрее, если вы немного прочитаете о прогрессивном улучшении.

Удачи.