JQuery – Instalando o JQuery UI – Linux

Publicado: 29 de janeiro de 2015 em JavaScript, JQuery

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

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

JQuery UI – Download

3 – Descompacte o JQuery no diretório de sua aplicação Web:

Descompactar JQuery

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

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

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>

Anúncios

Deixe um comentário

Preencha os seus dados abaixo ou clique em um ícone para log in:

Logotipo do WordPress.com

Você está comentando utilizando sua conta WordPress.com. Sair / Alterar )

Imagem do Twitter

Você está comentando utilizando sua conta Twitter. Sair / Alterar )

Foto do Facebook

Você está comentando utilizando sua conta Facebook. Sair / Alterar )

Foto do Google+

Você está comentando utilizando sua conta Google+. Sair / Alterar )

Conectando a %s