Tempo de leitura: 5 minutos
Olá desenvolvedor, tudo bem com você? Depois do artigo sobre o jQuery Mobile, chegou a vez de abordarmos o jQuery UI.
Baseada em jQuery, o Framework jQuery UI oferece vários componentes visuais muito comuns em aplicações web.
O que iremos aprender a seguir?
// Como configurar o jQuery UI na sua aplicação?
O que é JQuery
jQuery é framework JavaScript gratuito e de código aberto, foi desenvolvido com o objetivo de simplificar o desenvolvimento de scripts no lado do cliente, com o propósito de manipular o HTML de forma mais rápida e eficaz.
Além do mais, provê produtividade no momento de se fazer uso de scripts client side para deixar as páginas mais dinâmicas.
>> O que é jQuery – Aprendendo os fundamentos e como usar
O que é JQuery UI
jQuery UI nada mais é do que um conjunto de widgets e componentes visuais pré-criados com jQuery para simplificar o desenvolvimento de telas e páginas web, também possibilita customizar os estilos dos mesmos via temas (pacotes de CSS e JavaScript com estilos pré-definidos contemplando desde, fonte do texto, cores, estruturação dos elementos HTML, e por aí vai).
O pacote de interface é basicamente uma coleção de funções de interface de usuário que estão relacionadas e podemos dividi-las em três módulos principais:
Widgets, que contêm interfaces de usuário pré-construídas e customizáveis.
Efeitos, que são animações muito simples e fáceis que você pode fazer para um elemento de uma página tais como agitá-lo, explodi-lo e assim por diante.
Interação ampliada do mouse com os elementos da página (por exemplo, arrastar e soltar).
Como configurar o jQuery UI na sua aplicação?
Primeiramente precisamos baixá-lo e para fazer isso basta ir até o site do JQuery UI, lá você irá customizar sua biblioteca para poder baixá-la.
Depois que você fizer todos os ajustes que deseja, é só clicar em download e fazer as devidas declarações no HTML.
CSS
<link rel="stylesheet" href="suaPasta/jquery-ui.min.css"> <!-- Caso você tenha escolhido algum tema --> <link rel="stylesheet" href="suaPasta/jquery-ui.theme.min.css">
SCRIPTS
<script src="suaPasta/jquery.js"></script> <script src="suaPasta/jquery-ui.min.js"></script>
Agora veremos na prática como funcionam algumas funcionalidades do JQuery UI
Datepicker
Para iniciar vamos criar um seletor de data bem simples para você ver como é simples usar o JQuery UI.
HTML
<div id="container"> <div class="blocos"> <p>Data: <input type="text" name="" id="datepicker"></p> </div> </div>
CSS
.blocos {
width: 300px;
min-height: 100px;
color: white;
background-color: rgb(3, 22, 71);
border: 3px dashed aqua;
border-radius: 15px;
}
#container {
width: 800px;
height: 600px;
background: aqua;
border: 3px solid rgb(3, 22, 71);
JavaScript
Depois de ter dado um id para seu input no HTML, agora vamos criar o datepicker no nosso JavaScript.
Basta selecionar o ID com um seletor JQuery normal e depois chamar a função datepicker(). Não tem segredos, irá ficar exatamente assim:
$(document).ready(function() {
$(‘#datepicker’).datepicker();
})
Assim quando clicamos no nosso input, vamos ter o datepicker que colocamos.
Nós podemos também enviar por parâmetro um objeto com as configurações que desejamos para nosso datepicker, por exemplo:
$(‘#datepicker’).datepicker({
dateFormat: “dd/mm/yy”,
dayNamesMin: [“Dom”, “Seg”, “Ter”, “Qua”, “Qui”, “Sex”, “Sab”],
monthNames: [“Janeiro”, “Fevereiro”, “Março”, “Abril”, “Maio”,
“Junho”, “Julho”, “Agosto”, “Setembro”, “Outubro”,
“Novembro”, “Dezembro”]
Você pode também mudar a animação de apresentação, existem muitas customizações que podem ser usadas, veja mais clicando aqui.
Draggable
Agora vamos criar um item draggable, que é muito fácil de fazer com o JQuery UI.
Utilizaremos o mesmo css e html, apenas adicionaremos algumas linhas dentro da div com id=”container”:
HTML
<div id="container">
<div class="blocos">
<p>Data: <input type="text" name="" id="datepicker"></p>
</div>
<div id="block" class="blocos">
<p>Draggable</p>
</div>
</div>
JS
Para fazer essa div ficar draggable é muito simples, tão simples quanto fazer o datepicker, basta fazer esse código:
$(‘#block’).draggable();
Irá ficar assim:
Mas, como sempre, essa não é nossa única opção. Temos mais coisas que podemos fazer com esse draggable(), como por exemplo, travar ele no nosso container, não deixar que ele seja arrastado para fora, fica assim:
$(‘#block’).draggable({
containment: “#container”
});
Para mais opções de draggable, acesse aqui.
Conclusão de jQuery UI
Gostou de aprender sobre o JQuery UI? Hoje vimos os conceitos mais básicos, instalação e exemplo de como funciona este Framework, e tenho algo especial reservado para você!
Sabe qual o próximo passo que deve tomar? É colocar a mão na massa comigo em projetos reais, pois além de muitos anos no mercado de desenvolvimento Web, sou professor com vasta experiência para te conduzir nesta jornada e tirar todas as suas dúvidas.
E não sou eu que digo, são os mais de 14.000 alunos capacitados por mim na Danki Code, por isso sei bem do que eu estou falando.
E uma excelente forma de você começar a desenvolver projetos reais comigo é adquirindo o Pacote Full-Stack. Nele você vai construir os projetos mais incríveis e cobiçados do mercado.
