Introdução ao jQuery

5 jQuery UI

5.1 O que é jQuery UI

jQuery UI (user interface) é uma biblioteca complementar ao jQuery que utiliza a base de funcionalidades deste para ampliar o conjunto de efeitos especiais, componentes gráficos, temas de layout e estilo com propósito de facilitar a construção de sites profissionais. O jQuery UI é composto de duas partes: código JavaScript e folhas de estilo CSS. Ele possui uma série de componentes como calendários, menus, sliders, caixas de diálogos, entre outros. Neste capítulo veremos alguns desses elementos.

5.2 Principais componentes

A função autocomplete()

A função autocomplete possibilita oferecer um conjunto de valores para um usuário à medida que o mesmo digita um termo num campo de entrada de dados. Por exemplo, se o usuário digita o termo "ac", a função autocomplete busca na sua fonte de dados por strings que contenham como substring esse termo, e retorna todas estas sugestões para o usuário poder selecionar uma dessas. À medida que o usuário digita mais caracteres, a busca vai se reduzindo e sendo filtrada. Vejamos o código a seguir:

<!DOCTYPE html>

<head>

<title>Autocomplete</title>

href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-

ui.css">

$(document).ready(function() {

var listaDeAlunos = [

"Amanda","Angelica","Carlos","Carolina", "Cristina","Daniel","Daniela","Eduardo", "Emanuele","Emanuel","Fabricio","Fabiana", "Fatima","Fernando","Gisele","Gabriel"

];

$( "#aluno" ).autocomplete({

source: listaDeAlunos

});

</script>

</head>

<body>

<label for="aluno">Localizar aluno: </label> <input id="aluno">

</div>

</body>

</html>

Primeiro observe que estamos importando 3 arquivos essenciais para o funcionamento do script, que são:

jqueryui.js : arquivo JavaScript da biblioteca jQuery UI.

jquery-ui.css : arquivo de estilos usado pelo biblioteca jQuery UI.

jquery-1.10.2.js: arquivo com a biblioteca jQuery.

Nesse exemplo usamos o CDN do jQuery, o que significa que esses arquivos não precisam ser baixados para a mesma pasta do arquivo .html. Quando o navegador abrir o arquivo html, estes 3 arquivos serão automaticamente baixados pelo browser.

Continuando no exemplo, precisamos agora definir o source do autocomplete, isto é, o local onde se encontra os dados que alimentarão a busca. Para isso, foi definido um vetor JavaScript chamado listaDeAlunos que contém os nomes dos alunos. Em seguida é vinculada a função autocomplete à input "#aluno". Nesse momento a input passa a ser um componente autocomplete e automaticamente um ouvinte de eventos de teclado é associado à mesma. Por fim, é passado por parâmetro o source do autocomplete, ou seja, onde serão buscados os valores do autocomplete, no caso na própria variável listaDeAlunos.

O resultado será:

A função datepicker()

Com esta função conseguimos criar um calendário no HTML. Este tipo de componente é muito útil para facilitar a seleção de datas pelo usuário. Até a versão 4 do HTML, a única opção de gerar um calendário era via JavaScript.

O jQuery UI torna muito fácil a tarefa de incorporar um calendário. Vejamos o código:

<!DOCTYPE html>

<head>

<title>Datepicker</title>

ui.css">

$(document).ready(function() {

$( "#calendario" ).datepicker();

});

</script>

</head>

<body>

<p>Data de pagamento:

</p>

</body>

</html>

Basta chamar a função datepicker() sobre a input "#calendario". Automaticamente ela passa a ser um datepicker.

A função dialog()

Esta função permite criar uma caixa de diálogo do tipo modal, onde o restante do site fica em segundo plano e a única opção do usuário é interagir com esta caixa. Considere o seguinte código:

<!DOCTYPE html>

<head>

<title>Modal</title>

ui.css">

$(document).ready(function() {

$("#caixaModal").dialog({

modal: true,

buttons: {

Ok: function() {

$( this ).dialog("close");

}

});

</script>

</head>

<body>

<p>

<span class="ui-icon ui-icon-circle-check" style="float:left;

margin:0 7px 50px 0;"></span>

Transferência realizada com sucesso.

</p>

</div>

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do

eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut

enim ad minim veniam, quis nostrud exercitation ullamco laboris

nisi ut aliquip ex ea commodo consequat.

</p>

</body>

</html>

Para criar a modal, basta chamar a função dialog() sobre o elemento que será exibido como caixa de mensagem. No caso, usamos a div #caixaModal. É necessário passar como parâmetro para a função dialog a propriedade modal com valor true, e definir a propriedade buttons, especificando os botões que serão anexados na caixa, que neste caso será apenas o botão ok. Uma função anônima é associada ao botão, definindo que quando este é executado a caixa de dialogo é fechada.

O resultado do código:

A função tabs()

Esta função cria um componente com várias abas onde a navegação é facilitada, pois diversos conteúdos podem ser colocados na mesma região da tela, sendo alternados por abas intercaladas. Considere o seguinte código:

<!DOCTYPE html>

<head>

ui.css">

$(document).ready(function() {

$( "#tabs" ).tabs();

});

</script>

</head>

<body>

<ul>

<li><a href="#tabs1">Horários</a></li>

<li><a href="#tabs2">Tarifas</a></li>

<li><a href="#tabs3">Roteiros</a></li>

</ul>

<p>Horários de funcionamento: das 08h-12h e 14h-18h</p>

</div>

<p>Valores do ingresso: R$12,00 para turistas e R$7,00 para

moradores da regi ão </p>

</div>

<p>Saídas a partir da Argentina, Brasil e Paraguai.</p>

</div>

</body>

</html>

O resultado do código acima:

A função menu()

Esta função transforma uma lista simples ou encadeada em um componente do tipo menu, com a possibilidade de criar submenus para cada entrada do menu. Veja o exemplo abaixo:

<!DOCTYPE html>

<head>

ui.css">

$(document).ready(function() {

$("#opcoes").menu();

});

</script>

<style>

.ui-menu { width: 150px; }

</style>

</head>

<body>

<li>Abrir</li>

<li>Salvar</li>

<li>Avançado

<ul>

<li>Recortar</li>

<li>Colar</li>

<li>Copiar</li>

</ul>

</li>

<li>Fechar</li>

</ul>

</body>

</html>

Como é possível observar, o menu nada mais é do que uma lista identificada por um id. No jQuery, basta chamar a função menu() para a lista #opcoes.

Resultado do código:

A função accordion()

A função accordion permite criar um efeito sanfona entre várias divs. Uma div começa visível, e à medida que o usuário clica em outras divs, o accordion fecha uma e expande outra. Vejamos um exemplo:

<!DOCTYPE html>

<head>

<title>Accordion</title>

ui.css">

$(document).ready(function() {

$( "#accordion" ).accordion(

{heightStyle: "content"}

);

});

</script>

</head>

<body>

<h3>Turismo</h3>

<div>

As cataratas é um conjunto de cerca de 275 quedas de água no

Rio Iguaçu localizada entre o Parque Nacional do Iguaçu

Paraná no Brasil 20%, e o Parque Nacional Iguazú em Misiones,

na Argentina 80%, na fronteira entre os dois países.

</p>

</div>

<h3>Horários</h3>

<div>

<p>

Sed non urna. Donec et ante. Phasellus eu ligula. Vestibulum

sit amet purus. Vivamus hendrerit, dolor at aliquet laoreet,

mauris turpis porttitor.

</p>

</div>

<h3>Passeios</h3>

<div>

<p>

Nam enim risus, molestie et, porta ac, aliquam ac, risus.

Quisque lobortis. Phasellus pellentesque purus in massa. Aenean

in pede. Phasellus ac libero

ac tellus pellentesque semper.

</p>

</div>

</body>

</html>

OceanofPDF.com

Ajuda e políticas

Idioma

5 jQuery UI

Ajustes do texto

Tamanho do texto · 18 px

Fonte

Espaçamento

Tema

Capítulos

Apêndices

Marcadores neste navegador