Ajuda na criação do botão de menu para jQuerymobile

StackOverflow https://stackoverflow.com/questions/4239115

  •  26-09-2019
  •  | 
  •  

Pergunta

Novo em jQuery e jQuerymobile.

Tudo o que quero fazer é ocultar o menu principal e criar um botão "menu" na barra de navegação superior. Quando o usuário clica neste botão, um pop-up aparece com o "Menu Top".

Traqueci e no celular.

EDITAR

Cheguei mais perto, mas não perfeito. Agora, no menu, clique no menu (estava procurando o menu OTOTHOUCH ou ONTAP, mas não consegui encontrar informações da API). Existe uma maneira de que, em vez de parecer, isso se abre em uma janela pop -up?

Além disso, por algum motivo, tema ou ícone também não aparece. 

$(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.
      });
    });
});
Foi útil?

Solução

O JQM CSS não é aplicado ao que você adiciona manualmente ao DOM. Você tem que ligar .page() nesse item.

Para detalhes, consulte http://jqueryMobiledictionary.dyndns.org/faq.html - Pergunta sobre adições de DOM

editar

Isso pode ser melhor do que hackear: http://jquerymobile.com/demos/1.0a2/#docs/toolbars/bars-fullscreen.html

Como resposta à sua edição

Primeiro de tudo - tente não usar o JavaScript para o que não é necessário. Por que preencher o cabeçalho com JavaScript se você não precisar? Você não usou nenhuma variável lá.

Segunda coisa - você não leu meu tutorial. Nenhum material específico para dispositivos móveis jQuery será aplicado se você criar um novo conteúdo DOM após a pronta do documento. Se você fizer isso, você tem que ligar .page() em novo conteúdo. É por isso que ainda não funciona.

Os eventos estão disponíveis na seção Docs & demos http://jquerymobile.com/demos/1.0a2/ só tenho que clicar events.

Finalmente - não há pop -ups em telefones celulares. Se você mentir uma caixa de diálogo, dê uma olhada nos diálogos nos documentos JQM.

O JQuery foi uma abordagem totalmente diferente para JavaScript e JQuery Mobile também é uma nova idéia. Suas intuições e experiência do JQuery permanecerão inúteis por algum tempo, até que você tenha a idéia de JQM e para que serve.

Isso pode acontecer mais rápido se você ler um pouco sobre aprimoramento progressivo.

Boa sorte.

Licenciado em: CC-BY-SA com atribuição
Não afiliado a StackOverflow
scroll top