| // |
| // Licensed to the Apache Software Foundation (ASF) under one |
| // or more contributor license agreements. See the NOTICE file |
| // distributed with this work for additional information |
| // regarding copyright ownership. The ASF licenses this file |
| // to you under the Apache License, Version 2.0 (the |
| // "License"); you may not use this file except in compliance |
| // with the License. You may obtain a copy of the License at |
| // |
| // http://www.apache.org/licenses/LICENSE-2.0 |
| // |
| // Unless required by applicable law or agreed to in writing, |
| // software distributed under the License is distributed on an |
| // "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY |
| // KIND, either express or implied. See the License for the |
| // specific language governing permissions and limitations |
| // under the License. |
| // |
| |
| = Usando o jQuery para Aprimorar a Aparência e a Facilidade de Uso de uma Página Web |
| :jbake-type: tutorial |
| :jbake-tags: tutorials |
| :jbake-status: published |
| :icons: font |
| :syntax: true |
| :source-highlighter: pygments |
| :toc: left |
| :toc-title: |
| :description: Usando o jQuery para Aprimorar a Aparência e a Facilidade de Uso de uma Página Web - Apache NetBeans |
| :keywords: Apache NetBeans, Tutorials, Usando o jQuery para Aprimorar a Aparência e a Facilidade de Uso de uma Página Web |
| |
| O link:http://jquery.com/[+jQuery+] é uma biblioteca JavaScript leve que permite aos programadores adicionar melhorias de maneira fácil e rápida à aparência e aos comportamentos de suas páginas Web. A sintaxe do jQuery é concisa e utiliza variáveis na forma de seletores CSS como uma maneira de conectar um efeito a qualquer elemento alvo do DOM, seja um elemento exclusivo (`id`) ou um conjunto de elementos (`class`) ou algum arbitrariamente escolhido. Como o jQuery é um JavaScript, ele pode ser incorporado em qualquer projeto onde o JavaScript possa ser aplicado. |
| |
| Este tutorial demonstrará como começar a usar o jQuery em projetos NetBeans e tirar vantagem do IDE ao trabalhar em qualquer projeto de frontend que envolva arquivos HTML, CSS e JavaScript. Inicialmente, será mostrado como chamar a funcionalidade autocompletar código nas funções e usar o suporte à API integrado. Também serão abordados os conceitos-chave do jQuery, incluindo a chamada de função `$(document).ready` , o uso de objetos jQuery tipo seletor CSS e o encadeamento de efeitos e comportamentos do jQuery. Também serão explorados os benefícios da link:http://jqueryui.com[+biblioteca de IU jQuery+] ao definir um simples documento de exemplo da “lista de contatos” e aplicar o link:http://jqueryui.com/demos/accordion/[+widget accordion do jQuery+] a ele. |
| |
| Para obter um exemplo de como usar jQuery em uma aplicação HTML5, consulte o tutorial link:../webclient/html5-gettingstarted.html[+Conceitos Básicos sobre Aplicações HTML5+]. |
| |
| |
| == Para concluir este tutorial, você precisará dos recursos a seguir: |
| |
| |=== |
| |Software ou Recurso |Versão Necessária |
| |
| |link:https://netbeans.org/downloads/index.html[+Pacote NetBeans IDE, Java EE ou HTML5 e PHP+] |7.0 ou superior |
| |
| |link:http://www.oracle.com/technetwork/java/javase/downloads/index.html[+JDK (Java Development Kit)+] |7 ou 8 |
| |
| |link:http://docs.jquery.com/Downloading_jQuery#Current_Release[+Biblioteca Core do jQuery+] |1.4.2 ou superior |
| |
| |link:http://jqueryui.com/download[+Widget Accordion do jQuery+] |1.8.1 ou superior |
| |
| |link:https://netbeans.org/projects/samples/downloads/download/Samples%252FJavaScript%252Fpix.zip[+Recursos do Projeto+] |n/d |
| |=== |
| |
| *Observações:* |
| |
| * Os link:https://netbeans.org/projects/samples/downloads/download/Samples%252FJavaScript%252FjQueryProjectFiles.zip[+recursos do projeto+] contêm arquivos JPG necessários para concluir este tutorial. |
| * Se você quiser comparar seu projeto com uma solução de trabalho, você pode link:https://netbeans.org/projects/samples/downloads/download/Samples%252FJavaScript%252FjQueryProjectFiles.zip[+fazer o download do projeto de amostra+]. (Inclui as versões PHP e Java Web.) |
| * Se planeja trabalhar em um projeto Java, considere configurar um servidor para o seu ambiente de desenvolvimento. O GlassFish Server está incluído no download Java do IDE e está configurado para ser executado no NetBeans por default. |
| * Se você planeja trabalhar em um projeto PHP, será necessário fazer o download do PHP e configurar seu ambiente. Para obter mais informações, consulte a link:../../trails/php.html[+Trilha de Aprendizado do PHP+]. |
| * Este tutorial pressupõe que você tenha alguma experiência com programação ou algum conhecimento básico de HTML, CSS e JavaScript. |
| |
| |
| |
| [[settingup]] |
| == Configurando um Projeto NetBeans |
| |
| 1. Comece criando um novo projeto. Selecione Arquivo > Novo Projeto (Ctrl-Shift-N; ⌘-Shift-N no Mac). |
| 2. Se você deseja trabalhar em um projeto PHP, selecione a categoria *PHP* e depois selecione *Aplicação PHP*. |
| |
| Se você deseja trabalhar em um projeto Java Web, selecione a categoria *Java Web* e depois selecione *aplicação Web*. |
| |
| |
| . Clique em Próximo e nomeie o projeto como `jqproject`. Além disso, especifique o diretório no computador onde deseja salvar o projeto. Clique em Próximo. |
| |
| |
| . Na Etapa 3, para os propósitos deste tutorial, aceite as definições default fornecidas no assistente. |
| |
| *Observação:* Se estiver criando um projeto PHP pela primeira vez e precisar de ajuda, consulte Configurando seu Ambiente para Desenvolvimento PHP na link:../../trails/php.html[+Trilha de Aprendizado do PHP+]. |
| |
| |
| |
| . Clique em *Finalizar* para concluir o assistente e criar um novo projeto. O `jqproject` será aberto na janela Projetos e o arquivo de boas-vindas do projeto, aberto no editor. |
| |
| |
| . Crie um arquivo HTML simples, no qual você poderá trabalhar para o restante deste tutorial. Devido ao código jQuery que será adicionado não exigir qualquer comunicação com um servidor de backend, o arquivo HTML será executado em um browser para exibir os resultados. |
| |
| Clique com o botão direito do mouse no nó do projeto e selecione Novo > Arquivo HTML (Ctrl-N). |
| |
| |
| |
| . Nomeie o arquivo como `index` e clique em *Finalizar*. Na janela Projetos, observe que o novo arquivo `index.html` está listado no projeto, e que o arquivo abre no editor. |
| |
| |
| . Veja como é a aparência da página de boas-vindas no browser. Para isso, clique com o botão direito do mouse no nó do `index.html` na janela Projetos e selecione Exibir. (Também é possível selecionar Exibir no menu de contexto do arquivo do editor.) A página será exibida em uma janela do browser. |
| |
| image::images/browser-test.png[title="Exibir o modelo HTML vazio em uma janela do browser"] |
| |
| |
| . No arquivo `index.html` do editor do NetBeans, digite `jQuery Test Project` entre as tags `<title>` e crie um par de tags `<style>` dentro das tags `<head>` da página. (Alterações em *negrito*.) |
| |
| [source,xml] |
| ---- |
| |
| <html> |
| <head> |
| <title>*jQuery Test Project*</title> |
| <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> |
| *<style type="text/css"> |
| |
| </style>* |
| </head> |
| <body> |
| TODO write content |
| </body> |
| </html> |
| ---- |
| |
| |
| . Configure seu projeto para que o `index.html` seja exibido como o arquivo de boas-vindas quando a aplicação estiver implantada e em execução. Para isso, clique com o botão direito do mouse no nó `jqproject` na janela Projetos e selecione Propriedades. |
| * *Projetos PHP:* Selecione a categoria *Executar Configuração* e, em seguida, digite `index.html` no campo *Arquivo de Índice*. |
| * *Projetos Java Web:* Selecione a categoria *Executar* e, em seguida, digite `index.html` no campo *URL Relativo*. |
| |
| |
| . Clique em OK para fechar a janela Propriedades do Projeto e salvar as alterações. |
| |
| |
| . Neste estágio, é possível deletar o arquivo original de índice criado com o seu projeto. Em projetos PHP, este é o arquivo `index.php`; em projetos Java Web, este é o arquivo `index.jsp`. |
| |
| Para deletar o arquivo, clique com o botão direito do mouse no arquivo na janela Projetos e selecione Deletar. Na caixa de diálogo de confirmação que será exibida, clique em *Sim*. |
| |
| |
| |
| [[addingjquery]] |
| == Adicionando a Biblioteca do jQuery ao Projeto |
| |
| Antes de começar a trabalhar com o jQuery, é necessário adicionar a biblioteca do jQuery ao projeto. Caso ainda não tenha feito isso, faça o download da biblioteca do jQuery em link:http://jquery.com/[+http://jquery.com/+]. |
| |
| Escolha a versão descompactada, ou seja, “Development”, antes de fazer o download. O uso da versão descompactada permitirá que você examine o código JavaScript no editor e ajudará em nos processos de depuração. |
| |
| Para adicionar a biblioteca do jQuery ao seu projeto NetBeans, basta copiar a pasta da biblioteca da sua localização no computador e colá-la diretamente no seu projeto na janela Projetos do IDE. Detalhes a seguir: |
| |
| 1. No IDE, crie uma pasta chamada `js` e adicione-a ao seu projeto. Para fazer isso, clique no botão Novo Arquivo (image:images/new-file-btn.png[]) na barra de ferramentas do IDE. (Como alternativa, pressione Ctrl-N; ⌘-N no Mac.) |
| 2. Selecione a categoria *Outro* e, em seguida, selecione *Pasta*. |
| 3. Nomeie a pasta como `js`. |
| |
| [alert]#Nos projetos Java Web, coloque a pasta `js` na raiz da Web do projeto. Para fazer isso, digite `web` no campo *Pasta Pai*.# |
| |
| |
| . Clique em *Finalizar* para sair do assistente. |
| |
| |
| . Localize a biblioteca do jQuery obtida por download no computador. No momento, a versão atual da biblioteca é 1.4.2, portanto, o arquivo é normalmente chamado de `jquery-1.4.2.js`. Copie o arquivo para a área de transferência (Ctrl-C; ⌘-C no Mac). |
| |
| |
| . Cole o arquivo da biblioteca na nova pasta `js`. Para isso, clique com o botão direito do mouse em `js` e selecione Colar (Ctrl-V; ⌘-V no Mac). O nó do arquivo `jquery-1.4.2.js` será exibido na pasta. |
| |=== |
| |
| | |
| ==== Projeto PHP: |
| |
| | |
| |
| |
| ==== Projeto Java Web: |
| |
| |
| |
| |image:images/jquery-lib-php.png[title="Cole a biblioteca do jQuery diretamente no seu projeto"] |image:images/jquery-lib-java.png[title="Cole a biblioteca do jQuery diretamente no seu projeto"] |
| |=== |
| |
| |
| . No editor, referencie a biblioteca do jQuery no arquivo `index.html`. Para tanto, adicione um par de tags `<script>` e use o atributo `src` para indicar o local da biblioteca. (Alterações em *negrito*.) |
| |
| [source,xml] |
| ---- |
| |
| <html> |
| <head> |
| <title>jQuery Test Project</title> |
| <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> |
| *<script type="text/javascript" src="js/jquery-1.4.2.js"></script>* |
| |
| <style type="text/css"> |
| |
| </style> |
| </head> |
| ... |
| ---- |
| |
| |
| . Salve o arquivo (Ctrl-S; &#8984-S no Mac). |
| |
| Agora, a biblioteca do jQuery está incluída no projeto `jqproject` e será referenciada no arquivo `index.html`. Podemos começar adicionando recursos jQuery à página. |
| |
| |
| |
| [[gettingacquainted]] |
| == Familiarizando-se com o JQuery |
| |
| O jQuery funciona conectando atributos e comportamentos do JavaScript aplicados dinamicamente a elementos do DOM (Modelo de Objetos do Documento). Adicione um elemento ao DOM e tente afetar suas propriedades. Criaremos um cabeçalho que altera a cor de preto para azul quando clicado. |
| |
| 1. Começaremos criando o cabeçalho, estruturalmente um elemento `<h1>`. Remova o comentário '`TODO write content`' e digite o seguinte entre as tags `<body>`: |
| |
| [source,xml] |
| ---- |
| |
| <h1>Test.</h1> |
| ---- |
| |
| |
| . Agora, criaremos uma classe CSS que faz com que um elemento apareça azul quando ela for aplicada. Digite o seguinte entre as tags `<style>` no `<head>` do documento: |
| |
| [source,java] |
| ---- |
| |
| .blue { color: blue; } |
| ---- |
| |
| |
| . A seguir, iremos configurar um local para colocar nossos comandos jQuery. Adicione um novo conjunto de tags `<script>` no `<head>` do documento, por exemplo, após as tags `<script>` vinculadas à biblioteca jQuery. (Alterações em *negrito*.) |
| |
| [source,xml] |
| ---- |
| |
| <html> |
| <head> |
| <title>jQuery Test Project</title> |
| <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> |
| <script type="text/javascript" src="js/jquery-1.3.2.js"></script> |
| |
| *<script type="text/javascript"> |
| |
| </script>* |
| |
| <style type="text/css"> |
| .blue { color: blue; } |
| </style> |
| </head> |
| ... |
| ---- |
| |
| Você pode organizar seu código clicando com o botão direito do mouse no editor e selecionando Formato. |
| |
| As instruções jQuery que adicionaremos deverão ser executadas somente depois de todos os elementos do DOM serem carregados pelo browser. Isso é importante porque os comportamentos do jQuery se conectam a elementos do DOM e esses elementos devem estar disponíveis para o jQuery para obtermos os resultados esperados. O jQuery cuida disso com sua função incorporada `(document).ready`, que segue o objeto jQuery, representado por `$`. |
| |
| |
| . Digite esta construção entre as tags de script recém-criadas: |
| |
| [source,java] |
| ---- |
| |
| $(document).ready(function(){ |
| |
| }); |
| ---- |
| |
| Há também uma versão abreviada dessa função que pode ser usada como alternativa: |
| |
| |
| [source,java] |
| ---- |
| |
| $(function(){ |
| |
| }); |
| ---- |
| Nossas instruções para o jQuery tomam a forma de um método JavaScript, com uma literal opcional de objeto representando um array de parâmetros, e devem ser colocadas entre chaves `{}` dentro da função `(document).ready` para serem executadas somente no momento apropriado, que é após o DOM ser completamente carregado. |
| |
| Neste estágio, o arquivo `index.html` deve se parecer com o seguinte: |
| |
| [source,xml] |
| ---- |
| |
| <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> |
| <html> |
| <head> |
| <title>jQuery Test Project</title> |
| <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> |
| <script type="text/javascript" src="js/jquery-1.3.2.js"></script> |
| |
| <script type="text/javascript"> |
| $(document).ready(function(){ |
| |
| }); |
| </script> |
| |
| <style type="text/css"> |
| .blue { color: blue; } |
| </style> |
| </head> |
| <body> |
| <h1>Test.</h1> |
| </body> |
| </html> |
| ---- |
| |
| |
| . Para demonstrar como a sintaxe do jQuery funciona, tentaremos algo simples. Adicionaremos instruções jQuery à nossa página que farão com que a palavra 'Teste' fique azul quando clicarmos nela. Para fazer isso, queremos que o jQuery adicione a classe CSS `.blue` ao elemento `<h1>` do DOM quando ele for clicado. |
| |
| Digite o seguinte código na função `(document).ready`, entre as chaves `{}`: |
| |
| [source,java] |
| ---- |
| |
| $("h1").click(function(){ |
| $(this).addClass("blue"); |
| }); |
| ---- |
| |
| |
| . Salve o documento (Ctrl-S; &#8984-S no Mac), e, em seguida, clique com o botão direito do mouse no editor e escolha Exibir para carregá-lo em seu Web browser. Teste para ver se funciona. Quando você clicar na palavra 'Teste', ela deverá ficar azul. |
| |
| image::images/blue-test.png[title="O texto fica azul quando clicado"] |
| |
| Esse exemplo usa a função `click()` do jQuery para chamar a função `addClass()` do jQuery quando um elemento que corresponde ao seletor do CSS "`h1`" é encontrado. O `$(this)` refere-se ao elemento chamador. Se fôssemos adicionar mais `<h1>`s à nossa página, o mesmo comportamento seria aplicado a todos eles com esse único conjunto de regras e cada um interagiria com o jQuery de forma independente. (Tente você mesmo como um rápido exercício.) |
| |
| |
| . Outra qualidade importante do jQuery é que as funções podem ser simplesmente encadeadas para criar comportamentos mais complicados ou em sequência. Para demonstrar isso, vamos adicionar uma instrução jQuery de um fadeOut lento à nossa função `click()`. Coloque uma função jQuery `fadeOut("slow")` depois da função `addClass` para que a linha de código fique dessa forma: |
| |
| [source,java] |
| ---- |
| |
| $(this).addClass("blue").fadeOut("slow"); |
| ---- |
| A função jQuery completa agora deve ter a seguinte aparência: |
| |
| [source,java] |
| ---- |
| |
| $(document).ready(function(){ |
| $("h1").click(function(){ |
| $(this).addClass("blue").fadeOut("slow"); |
| }); |
| }); |
| ---- |
| |
| |
| . No browser, atualize a página e a seguir clique em 'Teste'. Você verá que ela fica azul e esmaece, desaparecendo da página. (Para tentar novamente, é preciso atualizar a página.) |
| |
| |
| === Autocompletar código e suporte a APIs no NetBeans |
| |
| Sempre que você digitar no editor, você poderá chamar a funcionalidade autocompletar código pressionando Ctrl-Espaço. O IDE apresentará uma lista de sugestões para que você escolha, bem como uma janela de documentação da API que definirá os itens listados, fornecerá exemplo de snippets de código e mostrará o suporte do browser de destino. |
| |
| image::images/code-completion.png[title="Pressione Ctrl-Espaço para exibir as janelas autocompletar código e documentação da API"] |
| |
| É possível especificar os browsers de destino para autocompletar código e documentação da API abrindo a janela de opções do JavaScript do IDE. Selecione Ferramentas > Opções (NetBeans > Preferências no Mac) e, em seguida, selecione Diversos > JavaScript. |
| |
| |
| |
| |
| [[addingaccordion]] |
| == Adicionando o Widget Accordion do jQuery ao Projeto |
| |
| Criamos o teste simples acima, usando comportamentos do JavaScript que estão incluídos na biblioteca Core do jQuery. Agora, examinaremos um exemplo mais real definindo uma lista de contatos de funcionários usando marcação básica de HTML. A seguir, aplicaremos o link:http://jqueryui.com/demos/accordion/[+widget accordion do jQuery+] à lista de contatos. |
| |
| O widget accordion faz parte da link:http://jqueryui.com/[+biblioteca de IU do jQuery+]. A biblioteca de IU é construída sobre a biblioteca Core e fornece uma abordagem modular para ativar interações, widgets e efeitos em suas páginas Web. Você pode manter os tamanhos dos arquivos ao mínimo e selecionar somente os componentes de que precisa na interface de download do jQuery em link:http://jqueryui.com/download[+http://jqueryui.com/download+]. |
| |
| Caso ainda não o tenha feito, acesse link:http://jqueryui.com/download[+http://jqueryui.com/download+] e faça o download do widget accordion de navegação. Observe que, ao selecionar o widget accordion, a biblioteca Core de IU e a Widget Factory também serão automaticamente selecionadas. Observe também que, na página de download, o tema '`UI lightness`' é selecionado por default e é incluído no pacote de download. Aplicaremos esse tema à nossa lista de contatos na <<usingcss,seção a seguir>>. |
| |
| 1. Cole o código a seguir no seu documento no lugar de `<h1>Test.</h1>`. |
| |
| [source,html] |
| ---- |
| |
| <div id="infolist"> |
| |
| <h3><a href="#">Mary Adams</a></h3> |
| <div> |
| <img src="pix/maryadams.jpg" alt="Mary Adams"> |
| <ul> |
| <li><h4>Vice President</h4></li> |
| <li><b>phone:</b> x8234</li> |
| <li><b>office:</b> 102 Bldg 1</li> |
| <li><b>email:</b> m.adams@company.com</li> |
| </ul> |
| <br clear="all"> |
| </div> |
| |
| <h3><a href="#">John Matthews</a></h3> |
| <div> |
| <img src="pix/johnmatthews.jpg" alt="John Matthews"> |
| <ul> |
| <li><h4>Middle Manager</h4></li> |
| <li><b>phone:</b> x3082</li> |
| <li><b>office:</b> 307 Bldg 1</li> |
| <li><b>email:</b> j.matthews@company.com</li> |
| </ul> |
| <br clear="all"> |
| </div> |
| |
| <h3><a href="#">Sam Jackson</a></h3> |
| <div> |
| <img src="pix/samjackson.jpg" alt="Sam Jackson"> |
| <ul> |
| <li><h4>Deputy Assistant</h4></li> |
| <li><b>phone:</b> x3494</li> |
| <li><b>office:</b> 457 Bldg 2</li> |
| <li><b>email:</b> s.jackson@company.com</li> |
| </ul> |
| <br clear="all"> |
| </div> |
| |
| <h3><a href="#">Jennifer Brooks</a></h3> |
| <div> |
| <img src="pix/jeniferapplethwaite.jpg" alt="Jenifer Applethwaite"> |
| <ul> |
| <li><h4>Senior Technician</h4></li> |
| <li><b>phone:</b> x9430</li> |
| <li><b>office:</b> 327 Bldg 2</li> |
| <li><b>email:</b> j.brooks@company.com</li> |
| </ul> |
| <br clear="all"> |
| </div> |
| </div> |
| ---- |
| Observe que o elemento circundado `<div>` recebe um atributo `id` com um valor de `infolist`. Dentro desse elemento `<div>`, há quatro conjuntos de tags `<h3>` e `<div>` tags que contêm uma imagem e uma lista não ordenada. |
| |
| |
| . Adicione algumas regras CSS em linha na marcação acima. Delete a regra de estilo `.blue` criada acima para fins de teste. Em seu lugar, adicione as regras a seguir. (Alterações em *negrito*.) |
| |
| [source,xml] |
| ---- |
| |
| <style type="text/css"> |
| *ul {list-style-type: none} |
| img {padding-right: 20px; float:left} |
| |
| #infolist {width:500px}* |
| </style> |
| ---- |
| |
| Ao digitar nas tags `<style>`, aproveite a funcionalidade autocompletar código CSS integrada do IDE pressionando Ctrl-Espaço. |
| |
| |
| |
| . Salve o arquivo (Ctrl-S; &#8984-S no Mac). |
| |
| |
| . Agora, adicionaremos os retratos JPG referenciados no fragmento de código acima ao nosso projeto. Recupere o diretório `pix` dos <<requiredSoftware,recursos do projeto obtidas por download anteriormente>> e copie o diretório inteiro para a pasta do projeto, colocando-o no mesmo nível que `index.html`. Depois de um breve momento, o NetBeans automaticamente atualiza a janela Projetos para refletir que um novo diretório foi manualmente adicionado ao projeto. |
| |
| |
| . Alterne para o browser e atualize a página. |
| |
| image::images/structured-list.png[title="Exibições de lista estruturada em um browser"] |
| |
| Há uma série de problemas com este documento que trataremos. Primeiramente, é mais difícil do que o necessário varrer a lista rapidamente para encontrar a pessoa que você procura: é preciso rolar a página e inspecionar visualmente várias informações que não interessam no momento. É possível gerenciar quatro contatos em uma lista, mas, se o número crescer para, digamos, 50, será muito mais difícil utilizar a lista. Em segundo lugar, o documento é visualmente simples e é improvável que combine esteticamente com a maioria dos designs de site, particularmente, designs que tenham uma forte identidade gráfica. Trataremos esses problemas usando o widget accordion do jQuery juntamente com o tema default da IU do jQuery. |
| |
| |
| . Para produzir o efeito do accordion, navegue para o local em seu computador em que você fez o download do widget accordion. Na pasta obtida por download, você encontrará uma pasta chamada '`development-bundle`'. Na pasta `development-bundle`, expanda a pasta `ui` e localize os três scripts a seguir: |
| * `jquery.ui.core.js` |
| * `jquery.ui.widget.js` |
| * `jquery.ui.accordion.js` |
| |
| As versões de desenvolvimento de scripts do kit de ferramentas _não são minimizadas_, o que significa que seu código pode ser lido pelas pessoas quando exibido em um editor. Normalmente, você alternaria para as versões compactadas e minimizadas de uma aplicação pronto para a produção, de forma a economizar o tempo de download. |
| |
| |
| |
| . Copie (Ctrl-C; &#8984-C no Mac) os três scripts e, de volta ao IDE, cole-os na pasta `js` que você <<js,criou anteriormente>> na pasta de seu `jqproject`. |
| |
| É possível colar pressionando Ctrl-V (&#8984-V no Mac) ou clicando com o botão direito do mouse na pasta `js` e selecionando Colar. |
| |
| A pasta `development-bundle` > `ui` também contém um arquivo chamado `jquery-ui-1.8.1.custom.js`. Esse arquivo combina os três scripts listados anteriormente em um único script. Você também pode colar esse arquivo em seu projeto, em vez dos três scripts individuais. |
| |
| |
| |
| . Referencie os scripts na página `index.html` inserindo três tags `<script>` vinculadas a esses novos arquivos JavaScript. Você pode adicionar as tags `<script>` imediatamente após as tags `<script>` que referenciam a biblioteca Core do jQuery `jquery-1.4.2.js`. Use as tags `<script>` existentes como modelo. |
| |
| |
| . Delete o código de teste que criamos dentro da função `(document).ready`. ele não será mais necessário. |
| |
| As tags `<head>` de seu arquivo devem ter a seguinte aparência: |
| |
| [source,xml] |
| ---- |
| |
| <head> |
| <title>jQuery Test Project</title> |
| <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> |
| |
| <script type="text/javascript" src="js/jquery-1.4.2.js"></script> |
| <script type="text/javascript" src="js/jquery.ui.core.js"></script> |
| <script type="text/javascript" src="js/jquery.ui.widget.js"></script> |
| <script type="text/javascript" src="js/jquery.ui.accordion.js"></script> |
| |
| <script type="text/javascript"> |
| $(document).ready(function(){ |
| |
| }); |
| </script> |
| </head> |
| ---- |
| |
| |
| . Para que façamos com que nossa lista estática e sem estilo obtenha o comportamento do accordion, basta adicionar uma linha única de código jQuery. Digite esta linha na função `(document).ready`. (Alterações em *negrito*.) |
| |
| [source,java] |
| ---- |
| |
| $(document).ready(function(){ |
| *$("#infolist").accordion({ |
| autoHeight: false |
| });* |
| }); |
| ---- |
| Nessa linha de código, `#infolist` está um seletor CSS conectado a um único elemento do DOM que tem um atributo `id` com o valor `infolist`; em outras palavras, nossa lista de contatos. Ele é conectado usando notação de ponto ('`.`') típica do JavaScript à instrução jQuery que usa o método `accordion()` para exibir esse elemento. |
| |
| Você também especificou '`autoHeight: false`' no snippet de código acima. Isso impede o widget accordion de definir a altura de cada painel com base na parte mais alta do conteúdo contida na marcação. Para obter mais informações, consulte a link:http://docs.jquery.com/UI/Accordion[+documentação da API do accordion+]. |
| |
| |
| |
| . Salve o arquivo (Ctrl-S; &#8984-S no Mac). |
| |
| |
| . Retorne ao Web browser e atualize-o. Clique em um dos nomes (que não seja o mais acima) para ver o efeito do accordion em ação. O widget accordion do jQuery trata todos os detalhes do manuseio do DOM e da resposta aos cliques do mouse do usuário. |
| |
| image::images/accordion-list.png[title="O widget accordion manipula os cliques do usuário e produz o efeito accordion"] |
| |
| |
| |
| [[usingcss]] |
| == Utilizando o Tema Default do jQuery para Aprimorar o Estilo |
| |
| Agora, nosso projeto tem o comportamento que desejados, mas parece muito simples e ainda não tem uma aparência bem organizada. Vamos tratar isso incorporando o tema '`UI lightness`' default do jQuery. |
| |
| 1. Navegue até o local do seu computador em que você fez o download do widget accordion. Dentro da pasta de download, expanda a pasta `development-bundle` > `themes` > `ui-lightness`. |
| 2. Dentro da pasta `ui-lightness`, copie (Ctrl-C; &#8984-C no Mac) o arquivo `jquery-ui-1.8.1.custom.css` e a pasta `images`, que contém todas as imagens necessárias para que o tema seja renderizado adequadamente. |
| 3. No IDE, crie uma nova pasta dentro do projeto chamada `css`. Essa pasta conterá o tema '`UI lightness`' para o widget accordion. |
| |
| Para tanto, clique com o botão direito do mouse no nó do projeto e selecione Nova > Pasta. (Se Pasta não aparecer como uma opção, clique no botão Novo Arquivo ( image:images/new-file-btn.png[] ) da barra de ferramentas do IDE, em seguida, selecione Outra > Pasta no assistente de Novo Arquivo.) Chame a pasta `css` e coloque-a no mesmo diretório que o arquivo `index.html`. |
| |
| [alert]#Nos projetos Java Web, coloque a pasta `css` na raiz da Web do projeto. Para fazer isso, digite `web` no campo *Pasta Pai*.# |
| |
| |
| . Coloque os dois itens diretamente na nova pasta `css`. Para isso, clique com o botão direito do mouse no nó da pasta `css` e selecione Colar. A pasta do projeto deve ser semelhante ao seguinte: |
| |=== |
| |
| | |
| ==== Projeto PHP: |
| |
| | |
| |
| |
| ==== Projeto Java Web: |
| |
| |
| |
| |image:images/proj-win-php.png[title="O projeto contém o tema default do jQuery"] |image:images/proj-win-java.png[title="O projeto contém o tema default do jQuery"] |
| |=== |
| |
| |
| . Referencie o arquivo `jquery-ui-1.8.1.custom.css` de dentro da sua página Web `index.html`. Adicione a tag `<link>` a seguir ao cabeçalho da página. |
| |
| [source,java] |
| ---- |
| |
| <link rel="stylesheet" href="css/jquery-ui-1.8.1.custom.css" type="text/css"> |
| ---- |
| |
| |
| . Salve o arquivo (Ctrl-S; &#8984-S no Mac). |
| |
| |
| . Retorne ao browser e atualize a página. Observe que a lista agora é exibida usando o tema default do jQuery, o que representa uma melhoria estética em relação à versão simples e não estilizada. |
| |
| image::images/ui-lightness-theme.png[title="O tema default do jQuery aprimora a aparência do widget accordion"] |
| |
| |
| |
| [[summary]] |
| == Resumo |
| |
| Neste tutorial, você aprendeu como adicionar bibliotecas do jQuery ao seu projeto, bem como escrever algumas instruções básicas usando a sintaxe do jQuery. Você também aprendeu como o jQuery interage com o DOM (Modelo de Objetos de Documento) usando variáveis que lembram seletores CSS para afetar a aparência e o comportamento dos elementos em uma página Web. |
| |
| Finalmente, você explorou brevemente os recursos da biblioteca de IU do jQuery aplicando o widget accordion a uma lista de contatos simples. Depois de implementar o efeito accordion, você aplicou o tema de estilo default do jQuery à lista. Agora você é capaz de apreciar melhor como o jQuery pode ser usado para criar páginas Web dinâmicas, ao mesmo tempo em que melhora a aparência geral e a facilidade de uso. |
| |
| link:/about/contact_form.html?to=3&subject=Feedback: Using jQuery to Enhance the Appearance and Usability of a Web Page[+Enviar Feedback neste Tutorial+] |
| |
| |
| |
| |
| [[seealso]] |
| == Consulte Também |
| |
| Para obter mais informações sobre suporte para aplicações HTML5 e JavaScript no IDE, consulte os seguintes recursos em link:https://netbeans.org/[+netbeans.org+]: |
| |
| * link:../webclient/html5-gettingstarted.html[+Conceitos Básicos sobre Aplicações em HTML5+]. Um documento que demonstra como instalar a extensão NetBeans Connector para Chrome e criar e executar uma aplicação simples em HTML5. |
| * link:../webclient/html5-editing-css.html[+Trabalhando com Folhas de Estilo de CSS em Aplicações em HTML5+]. Um documento que continua com a aplicação que você criou neste tutorial que demonstra como usar alguns assistentes de CSS e janelas do IDE e como usar o modo Inspecionar no browser Chrome para localizar visualmente os elementos nas origens do projeto. |
| * link:../webclient/html5-js-support.html[+Depurando e Testando JavaScript em Aplicações em HTML5+]. Um documento que demonstra como o IDE oferece ferramentas que podem ajudá-lo a depurar e testar arquivos JavaScript no IDE. |
| * link:js-toolkits-dojo.html[+Conectando um Dojo Tree a uma ArrayList utilizando JSON+]. Uma introdução ao kit de ferramentas Dojo é fornecida e as etapas são passadas mostrando como interagir com um servidor de backend usando Ajax e JSON. |
| * link:../../docs/php/ajax-quickstart.html[+Introdução ao Ajax (PHP)+]. Descreve como construir uma aplicação simples usando a tecnologia PHP, ao mesmo tempo em que ensina o fluxo de processo subjacente de uma solicitação do Ajax. |
| * link:ajax-quickstart.html[+Introdução ao Ajax (Java)+]. Descreve como construir uma aplicação simples usando a tecnologia de servlet, ao mesmo tempo em que ensina o fluxo de processo subjacente de uma solicitação do Ajax. |
| |
| Para obter mais informações sobre o jQuery, consulte a documentação oficial: |
| |
| * Home Page Oficial: link:http://jquery.com[+http://jquery.com+] |
| * Home Page da IU: link:http://jqueryui.com/[+http://jqueryui.com/+] |
| * Tutoriais: link:http://docs.jquery.com/Tutorials[+http://docs.jquery.com/Tutorials+] |
| * Página Principal da Documentação: link:http://docs.jquery.com/Main_Page[+http://docs.jquery.com/Main_Page+] |
| * Demonstrações de IU e Documentação: link:http://jqueryui.com/demos/[+http://jqueryui.com/demos/+] |
| |
| |
