Verifique se o cursor está em um local da página onde você deseja inserir o widget.
Última atualização em
30 de abr de 2026
Saiba como adicionar funcionalidades de aplicativo em seus projetos da Web do Dreamweaver utilizando widgets de interface e para dispositivos móveis do jQuery. Insira menus sanfonas, guias, controles deslizantes e caixas de preenchimento automático sem escrever qualquer código.
Os widgets são aplicativos da Web pequenos gravados em linguagens como DHTML e JavaScript que podem ser inseridos e executados em uma página da Web. Entre outras coisas, os widgets da Web ajudam a fornecer uma maneira de reproduzir as experiências do desktop em uma página da Web.
Os widgets de interface do jQuery como acordeão, tabulações, seletor de datas, controle deslizante e preenchimento automático levam a experiência do desktop para a Web.
Por exemplo, o widget Tabulações pode ser usado para copiar o recurso de tabulação das caixas de diálogo em aplicativos de desktop.
O Dreamweaver também inclui uma coleção de widgets do jQuery Mobile que você pode usar para criar elementos de formulário e outros recursos mais comumente usados em aplicativos web para dispositivos móveis. Por exemplo, você pode usar o widget do jQuery Mobile para adicionar elementos de formulário adaptados para dispositivos móveis, como áreas de texto e caixas de seleção.
Inserção de um widget do jQuery
Quando você insere um widget do jQuery, os seguintes itens são adicionados automaticamente ao código:
- Referências a todos os arquivos dependentes
- Tag de script que contém a API do jQuery do widget. Os widgets adicionais são adicionados à mesma tag de script
Para obter mais informações sobre os widgets do jQuery, consulte http://jqueryui.com/demos/
Nota
para os efeitos do jQuery, a referência externa a jquery-1.8.24.min.js não será adicionada porque este arquivo será incluído automaticamente quando você adicionar um efeito.
Selecione Inserir > Interface do jQuery e escolha o widget que deseja inserir.
Se você usar o painel Inserir, os widgets estarão presentes na seção Interface do jQuery do painel Inserir.
Quando você seleciona um widget do jQuery, as propriedades são exibidas no painel Propriedades.
Você pode visualizar widgets do jQuery na Visualização dinâmica ou no navegador compatível com widgets do jQuery.
Modificar widgets do jQuery.
Selecione o widget que deseja modificar.
No painel Propriedades, modifique as propriedades.
Por exemplo, para adicionar uma tabulação adicional ao widget Tabulações, selecione o widget e clique em “+” no painel Propriedades.
Inserir widgets do jQuery para dispositivos móveis
Antes que você possa usar qualquer um dos widgets do jQuery para dispositivos móveis, defina primeiro uma página do jQuery Mobile selecionando Inserir > jQuery Mobile > Página.
A caixa de diálogo Arquivos do jQuery Mobile será aberta.
Altere as configurações padrão na caixa de diálogo Arquivos do jQuery Mobile ou deixe-as definidas com os caminhos padrão e clique em OK.
Na caixa de diálogo Página que será aberta, digite um nome no campo ID e marque ou desmarque as caixas de seleção ao lado de Cabeçalho e Rodapé se quiser seções de cabeçalho e rodapé na página para dispositivos móveis.
Na página que será aberta no Dreamweaver, substitua o texto Cabeçalho, Conteúdo e Rodapé pelo texto, as imagens e outros elementos que você quer em sua página para dispositivos móveis.
Nota
mantenha o texto curto e as imagens pequenas para exibir em telas de dispositivos móveis pequenos.
Adicione outros widgets do jQuery Mobile conforme necessário.
Visualize a página em um dispositivo.
Para obter mais informações, consulte Visualizar páginas da Web do Dreamweaver em vários dispositivos.
Salve a página do jQuery Mobile e todos os arquivos relacionados.
Temas do jQuery Mobile não são aplicados com versões mais recentes do jQuery
Problema
Os temas do jQuery Mobile, incluindo amostras e painéis, não são aplicados ao usar versões mais recentes do jQuery, como jQuery 3.7.1. Como resultado, os temas do jQuery podem não ser exibidos corretamente ou não funcionar como esperado.
Causa
O jQuery Mobile foi descontinuado e não recebe mais manutenção ativa. Ele não oferece suporte às versões jQuery 3.x, causando problemas de compatibilidade com versões mais recentes.
Solução/solução alternativa
Para continuar usando os recursos do jQuery Mobile (temas, amostras de cores e painéis), utilize uma versão anterior compatível do jQuery.
Versão recomendada: jQuery 1.11.1 (ou outras versões 1.x compatíveis)
Exemplo
<script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
Adicione uma versão compatível do jQuery. Por exemplo, 1.11.1.
Certifique-se de que a biblioteca jQuery Mobile seja carregada após o script do jQuery.
Recarregue a página e verifique se os temas, amostras e painéis renderizam corretamente.
Nota
Como o jQuery Mobile está obsoleto e não recebe mais atualizações, continue usando uma versão compatível do jQuery para os projetos existentes do jQuery Mobile.
Criar belos sites no Dreamweaver
Crie, codifique e gerencie sites dinâmicos com uma ferramenta completa e eficiente.
