Vídeo: Aprende a implementar un calendario con jQuery en un formulario 2025
Escrever o código da UI jQuery não é difícil, mas obter as partes certas da biblioteca pode ser um pouco confuso para os programadores HTML5 e CSS3. A biblioteca jQuery UI é muito maior do que o pacote padrão jQuery, então você pode não querer incluir a coisa inteira se você não precisar dela.
As versões anteriores do jQuery UI permitem que você baixe todo o pacote, mas armazenou cada um dos vários elementos em um arquivo de JavaScript separado. Era comum ter uma meia dúzia de tags de script diferentes ativas apenas para obter os vários elementos no lugar.
Pior, alguns problemas de dependência existiam, então você precisava se certificar de que tinha determinados pacotes instalados antes de usar outros pacotes. Isso fez uma biblioteca simples bastante complexa para realmente usar.
Felizmente, as versões mais recentes da jQuery UI tornam este processo um pouco mais simples:
-
Escolha (ou crie) o seu tema.
Use o site themeRoller para escolher um local inicial a partir da biblioteca de modelos. Você pode então personalizar seu tema exatamente para fazer o que quiser (alterando cores, fontes e outros elementos).
-
Baixe o tema.
O temaRoller possui um botão de download. Clique neste quando estiver pronto para baixar seu tema.
-
Escolha os elementos que deseja.
Quando você começa pela primeira vez em um projeto, você provavelmente escolherá todos os elementos. Se você achar que a página está carregando muito devagar, você pode criar uma versão menor que contenha apenas os elementos que você precisa. Por enquanto, escolha tudo.
-
Baixe o arquivo.
Depois de escolher os elementos desejados, você pode baixá-los em um arquivo zip.
-
Instale o conteúdo do arquivo zip em seu diretório de trabalho.
O arquivo zip contém uma série de arquivos e diretórios. Copie os diretórios css e js para o diretório onde suas páginas da web serão (geralmente o diretório public_html ou htdocs). Você não precisa copiar o diretório do pacote de desenvolvimento ou o índice. página html.
-
Se você instalar vários temas, copie somente as informações do tema de temas adicionais.
Todos os temas usam o mesmo JavaScript. Somente os CSS (e arquivos de imagem relacionados) mudam. Se quiser ter vários temas no seu projeto, basta copiar os conteúdos do CSS. Cada tema será um subdiretório diferente do diretório principal do CSS.
-
Link para os arquivos CSS.
Use a técnica de link padrão para vincular aos arquivos CSS criados por jQuery UI. Você também pode vincular seus próprios arquivos CSS ou usar CSS interno, além do CSS personalizado. Certifique-se de que você obtenha o caminho certo.
-
Link para os arquivos JavaScript.
O jQuery UI toolkit também instala dois arquivos JavaScript: a biblioteca jQuery padrão e a biblioteca jQuery UI. Por padrão, ambos os arquivos estão instalados no diretório js. Você precisará vincular a ambos os arquivos. Às vezes, você verá arquivos minimizados ao lado de versões comuns. A versão minimizada terá o termo min incorporado. Qualquer uma das versões está bem, mas a versão minimizada será carregada mais rapidamente.
Se algo não estiver funcionando corretamente, verifique novamente seus caminhos de arquivos. Quase sempre, surgem problemas porque você não vinculou todos os arquivos certos. Além disso, note que os arquivos CSS criados pela jQuery UI também incluem imagens. Certifique-se de que o seu tema tenha um diretório de imagens associado ou seu projeto pode não funcionar corretamente. Se você copiou todos os diretórios CSS e JS do download, você deveria estar bem.
