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 menu sanfona, 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/

Observação:

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.

  1. Verifique se o cursor está em um local da página onde você deseja inserir o widget.

  2. 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

  1. Selecione o widget que deseja modificar.

  2. 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

  1. 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.

    Caixa de diálogo Arquivos do jQuery Mobile
    Caixa de diálogo Arquivos do jQuery Mobile

  2. 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.

  3. 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.

    Caixa de diálogo Página
    Caixa de diálogo Página

  4. 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.

    Observação:

    mantenha o texto curto e as imagens pequenas para exibir em telas de dispositivos móveis pequenos.

  5. Adicione outros widgets do jQuery Mobile conforme necessário.

  6. Visualize a página em um dispositivo.

    Para obter mais informações, consulte Visualizar páginas da Web do Dreamweaver em vários dispositivos.

  7. Salve a página do jQuery Mobile e todos os arquivos relacionados.

Esta obra está licenciada sob uma licença não adaptada da Creative Commons Attribution-Noncommercial-Share Alike 3.0  As publicações do Twitter™ e do Facebook não são cobertas pelos termos do Creative Commons.

Avisos legais   |   Política de privacidade online