Jquery UI: o que é e como utilizar em seus projetos

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?

// O que é jQuery

// O que é JQuery UI

// Como configurar o jQuery UI na sua aplicação?

// Datepicker

O que é JQuery

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

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.

Como configurar o jQuery UI na sua aplicação

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.

datepicker1Nó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:

datepicker2

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”
});

datepicker3

Para mais opções de draggable, acesse aqui.

Conclusão de jQuery UI

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

>> Conheça o treinamento completo “Pacote Full-Stack” e Domine as Tecnologias mais Atuais e Poderosas do Mercado! <<