O jQuery UI é uma coleção de widgets que é usado para criar uma interface do usuário que contém, efeitos visuais animados e temas implementados com jQuery, que utiliza sua biblioteca JavaScript, Cascading Style Sheets, e HTML. Todos os efeitos, widgets e temas foram construídos em cima da Biblioteca JavaScript jQuery. O Jquery e jQuery UI são softwares livres e de código aberto distribuído pela Fundação jQuery sob a licença MIT.
jQuery UI foi desenvolvido por designers e desenvolvedores, no qual projetaram todos os plug-ins para que você comece a trabalhar rapidamente de um modo flexível o suficiente para evoluir com suas necessidades e resolver uma infinidade de casos de uso.
JQuery UI: http://jqueryui.com/
Instalando e Usando o JQuery UI
1 – Ao instalar o JQuery, você possui varias opções e uma delas é escolher um dos vários temas e baixa-lo com a configuração da biblioteca desejada, ou seja você pode escolher somente o que precisa usar. Entre no menu temas e em seguida clique em Gallery e escolha um tema desejado, nos escolhemos o Redmond e clique em download:
JQuery UI – Galeria de Temas
2 – Você será redirecionado para a pagina de download, nela você pode escolher a versão do JQuery UI desejada e os elementos de sua biblioteca, somente clique em download:
JQuery UI – Download
3 – Descompacte o JQuery no diretório de sua aplicação Web:
Descompactar JQuery
4 – O pacote já contempla a biblioteca JQuery, JQuery UI e a folha de estilos CSS. Você precisa chama-los de sua pagina Web:
JQuery UI – Bibliotecas
5 – Para utilizar os widgets do JQuery UI você simplesmente os chama utilizando o ID do elemento HTML e referenciando através de instruções JQuery para cada componente, utilize o código abaixo para criar uma simples página web.
JQuery UI – Aplicação
Exemplo:
Neste exemplo utilizamos as bibliotecas JQuery e JQuery UI e sua folha de estilos para criar elementos da interface do usuário que utiliza um menu do tipo acordeão e um botão que dispara uma caixa de dialogo.
JQuery
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta name="generator" content="Bluefish 2.2.6" />
<meta charset="utf-8" />
<title>Desenvolvimento Aberto</title>
<style type="text/css">
body {
font: 62.5% "Trebuchet MS", sans-serif;
margin: 50px;
}
</style>
<!--
Está é uma instalação do JQuery, você apenas precisa apontar
para o respectivo script da versão que você deseja utilizar
jquery.js = JQuery
jquery-ui.js = JQuery UI
jquery-ui.css = JQuery Theme
-->
<link href="./jquery-ui-1.11.2.custom/jquery-ui.css" rel="stylesheet"
type="text/css" />
<script type="text/javascript"
src="./jquery-ui-1.11.2.custom/external/jquery/jquery.js">
</script>
<script type="text/javascript"
src="./jquery-ui-1.11.2.custom/jquery-ui.js">
</script>
<!-- Script JQuery - JQuery UI -->
<script type="text/javascript">
// Declara UI e funções JQuery
$(document).ready(function() {
$("#accordion").accordion()
$("#abrir").button()
$("#dialogo").dialog({
autoOpen : false,
show : {
effect : "blind",
duration : 1000
},
hide : {
effect : "explode",
duration : 1000
}
});
$("#abrir").click(function() {
$("#dialogo").dialog("open");
});
});
</script>
</head>
<body>
<h1>Desenvolvimento Aberto - JQuery - UI</h1>
<h2>Accordion - Dialog - Button</h2>
<div id="accordion">
<h3>Sobre</h3>
<div>
<p>Desenvolvimento Aberto utiliza um método de desenvolvimento de
software que utiliza a transparência do processo. A promessa de
código aberto é de melhor qualidade, maior confiabilidade, maior
flexibilidade e um menor custo.</p>
<p>Desenvolvimento Aberto é uma organização voltada para o
aprendizado e discussão de técnicas de desenvolvimento focado em
algumas linguagens de programação sendo parcialmente/totalmente
abertas ou com licenças gratuitas para desenvolvedores de cada uma
de suas respectivas marcas registradas.</p>
</div>
<h3>Clique em mim!</h3>
<div>
<div id="dialogo" title="Desenvolvimento Aberto">
<p>Desenvolvimento Aberto é formado para educar sobre e defender
os benefícios do código aberto e de construir pontes entre os
diferentes círculos eleitorais na comunidade de código aberto.</p>
</div>
<button id="abrir">Clique Aqui.</button>
</div>
</div>
</body>
</html>
Ricardo Mantovani
Desenvolvimento Código Aberto 