Ajuda na criação do botão de menu para jQuerymobile
-
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.
});
});
});
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.