Arquivo da categoria ‘JQuery’

JQuery UI – Elementos – Javascript

Publicado: 9 de fevereiro de 2015 em JavaScript, JQuery

O JQuery UI permite que você utilize os elementos de interface gráfica de usuário comuns da linguagem de marcação HTML e os ligue aos elementos de sua biblioteca visual, deste modo você pode você se beneficiar de todos os efeitos visuais e recursos dos componentes modernos que o JQuery UI fornece para que você construa aplicações web altamente interativas, além de possibilitar a manipulação dos elementos de um página web de uma forma simples e fácil, utilizando a biblioteca JQuery.

Utilizando Elementos do JQuery UI

1 – Crie uma pagina HTML para o cadastro e outra para a exibição do resultado e utilize os códigos abaixo para criar sua aplicação. Entre com os dados e clique no botão para envia-los:

JQuery UI - Elementos

JQuery UI – Elementos

2 – A pagina de resultado recupera e exibe os parâmetros enviados através de Javascript e JQuery:

JQuery - Resultado

JQuery – Resultado

Exemplo:

Neste exemplo criamos um cadastro utilizando os elementos HTML e os ligando ao JQuery UI.

JQuery

index.html

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

#meucheck, #genero {
	font: 62.5% "Trebuchet MS", sans-serif;
	margin-top: 1em;
	width: 50px;
}

#cargo {
	width: 300px;
}

#cadastro label {
	width: 250px;
}

#cadastro label.error, #cadastro input.submit {
	color: darkorange;
	margin-left: 253px;
}
</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>

<!-- JQuery Validator -->

<script type="text/javascript"
	src="./js/jquery-validation-1.13.1/dist/jquery.validate.js"></script>

<!-- Script JQuery - JQuery UI -->

<script type="text/javascript">
	// Declara UI e funções JQuery

	$(document).ready(function() {

		// Método de validação    
		$.validator.addMethod("regex", function(value, element, regexp) {
			var re = new RegExp(regexp);
			return this.optional(element) || re.test(value);
		}, "Please check your input.");

		// Cria regras de valicação e customiza mensagens

		$("#cadastro").validate({
			rules : {
				nome : {
					required : true,
					regex : /[a-zA-Z]+/
				},
				sobrenome : {
					required : true,
					regex : /[a-zA-Z]+/
				},
				cargo : {
					required : true,
					regex : /[a-zA-Z]+/
				},
				datepicker : {
					required : true
				},
				salario : {
					required : true,
					regex : /(?:\d*\.)?\d+/
				},

			},

			messages : {
				nome : {
					required : "O campo nome é obrigatório.",
					regex : "Campo suporta somente letras"
				},
				sobrenome : {
					required : "O campo sobrenome é obrigatório.",
					regex : "Campo suporta somente letras"
				},
				cargo : {
					required : "O campo cargo é obrigatório.",
					regex : "Campo suporta somente letras"
				},

				datepicker : {
					required : "O campo data é obrigátorio"
				},

				salario : {
					required : "O campo salário é obrigatório.",
					regex : "Campo suporta somente decimais"
				},
			},
		});

		$("#accordion").accordion({
			heightStyle : "content"
		}).accordion("option", "icons", null)

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

		$("#genero").buttonset().find('label').width(100);

		$("#meucheck").buttonset().find('label').width(100);

		$("#abrir").button()

	});
</script>
</head>
<body>
	<h1>Desenvolvimento Aberto - JQuery - UI</h1>

	<h2>Form Validator - Validação</h2>
	<div id="accordion">
		<h3>Cadastro</h3>
		<div>
			<form id="cadastro" method="get" action="resultado.html">
				<table>
					<tr>
						<td><label for="nome">Nome:</label></td>
						<td><input id="nome" name="nome" size="27" required>
							<br></td>
					</tr>

					<tr>
						<td><label for="sobrenome">Sobrenome:</label></td>
						<td><input id="sobrenome" name="sobrenome" size="35" required>
							<br></td>
					</tr>

					<tr>
						<td><label for="cargo">Cargo:</label></td>
						<td><select id="cargo" name="cargo" required>
								<option value="Vocalista">Vocalista</option>
								<option value="Guitarrista">Guitarrista</option>
								<option value="Baixista">Baixista</option>
								<option value="Baterista">Baterista</option>
						</select>
					</tr>

					<tr>
						<td><label for="datepicker">Data de admissão:</label></td>
						<td><input type="text" id="datepicker" name="data" required></td>
					</tr>

					<tr>
						<td><label for="salario">Salario:</label></td>
						<td><input id="salario" name="salario" size="18" required>
							<br></td>
					</tr>

					<tr>
						<td><label for="genero">Gênero:</label></td>
						<td>
							<div id="genero">
								<input type="radio" id="radio1" name="genero"><label
									for="radio1">Masculino</label> <input type="radio" id="radio2"
									name="genero"><label for="radio2">Feminino</label>
							</div>
						</td>

					</tr>
					<tr>
						<td><label>Ativo:</label></td>
						<td><div id="meucheck">
								<input type="checkbox" id="ativo" name="ativo"><label
									for="ativo">Situação</label>
							</div></td>
					</tr>

					<tr>

						<td><label for="observacao">Observação:</label></td>
						<td><textarea id="observacao" name="observacao" rows="5"
								cols="40"></textarea></td>

					</tr>

				</table>
				<br>
				<button id="abrir" type="submit">Enviar Dados</button>
			</form>
		</div>
	</div>

</body>
</html>

resultado.html

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

.rotulo {
	font: 62.5% "Trebuchet MS", sans-serif;
	color: darkorange;
	font-weight: bold;
}

.dados {
	font: 62.5% "Trebuchet MS", sans-serif;
	color: cadetblue;
}
</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() {

		// Cria função para recuperar paramentros

		$("#accordion").accordion({
			heightStyle : "content"
		}).accordion("option", "icons", null);

		function getUrlParameter(sParam) {
			var sPageURL = window.location.search.substring(1);
			var sURLVariables = sPageURL.split('&');
			for (var i = 0; i < sURLVariables.length; i++) {
				var sParameterName = sURLVariables[i].split('=');
				if (sParameterName[0] == sParam) {
					return sParameterName[1];
				}
			}
		}
		// Está é a URL
		// ?nome=Eddie&sobrenome=Vedder&cargo=Vocalista&data=02%2F09%2F2015&salario=1234.56&genero=on&ativo=on&observacao=teste

		// Recupera parametros

		var nome = getUrlParameter('nome');
		var sobrenome = getUrlParameter('sobrenome');
		var cargo = getUrlParameter('cargo');
		var dataAdmissao = getUrlParameter('data');
		var salario = getUrlParameter('salario');
		var genero = getUrlParameter('genero');
		var ativo = getUrlParameter('ativo');
		var observacao = getUrlParameter('observacao');

		// Mostra valores
		$("#nome").html(nome);
		$("#sobrenome").html(sobrenome);
		$("#cargo").html(cargo);
		$("#dataAdmissao").html(unescape(dataAdmissao));
		$("#salario").html("R$ " + salario);
		$("#genero").html(genero);
		$("#ativo").html(ativo);
		$("#observacao").html(unescape(observacao));

	});
</script>
</head>
<body>
	<h1>Desenvolvimento Aberto - JQuery - UI</h1>

	<h2>Form UI - Resultado - GET</h2>
	<div id="accordion">
		<h3>Resultado</h3>

		<div>

			<table>
				<tr>
					<td class="rotulo">Nome:</td>
					<td><label id="nome" class="dados"></label></td>
				</tr>

				<tr>
					<td class="rotulo">Sobrenome:</td>
					<td><label id="sobrenome" class="dados"></label></td>
				</tr>

				<tr>
					<td class="rotulo">Cargo:</td>
					<td><label id="cargo" class="dados"></label></td>
				</tr>

				<tr>
					<td class="rotulo">Data de Admissão:</td>
					<td><label id="dataAdmissao" class="dados"></label></td>
				</tr>

				<tr>
					<td class="rotulo">Salário:</td>
					<td><label id="salario" class="dados"></label></td>
				</tr>

				<tr>
					<td class="rotulo">Gênero:</td>
					<td><label id="genero" class="dados"></label></td>
				</tr>

				<tr>
					<td class="rotulo">Ativo:</td>
					<td><label id="ativo" class="dados"></label></td>
				</tr>

				<tr>
					<td class="rotulo">Observação:</td>
					<td><label id="observacao" class="dados"></label></td>
				</tr>

			</table>

		</div>

	</div>
</body>
</html>

Anúncios

Em ciência da computação teórica e teoria da linguagem formal, uma expressão regular abreviada de Regex ou Regexp e, por vezes chamado de uma expressão racional é uma sequência de caracteres que forma um padrão de pesquisa, principalmente para uso na correspondência de padrões com Strings, ou sequência correspondente, ou seja, como operações de localizar e substituir. O conceito surgiu na década de 1950, quando o matemático americano Stephen Kleene formalizava a descrição de uma linguagem regular, e entrou em uso comum com os utilitários Unix de processamento de texto.

Cada caractere em uma expressão regular ou é entendido como um MetaCharacter com seu significado especial, ou um caractere regular com o seu significado literal. Em conjunto, eles podem ser usados para identificar material textual de um determinado padrão, ou processar um número de instâncias do mesmo que podem variar de uma igualdade exata para uma semelhança muito geral do padrão.

O Regex pode ser usado para analisar rapidamente grandes quantidades de texto para encontrar padrões de caracteres específicos; para extrair, editar, substituir ou excluir substrings de texto, também é comum serem utilizadas para validar campos.

Regular Expression

Existe muito material sobre expressões regulares, inclusive a API do Javascript contempla métodos para combinar sequências de caracteres contra padrões especificados por expressões regulares

Regex: https://developer.mozilla.org/pt-BR/docs/Web/JavaScript/Guide/Regular_Expressions

Por outro lado existem alguns sites que proporcionam ótimos materiais sobre Regex e permitem que você crie e teste sua própria expressão regular antes de a utilizar.

RegExr: http://regexr.com/

Expressão regular que contempla caracteres maiúsculos e minúsculos: Pattern [a-zA-Z]+

Regex - [a-zA-Z]+

Regex – [a-zA-Z]+

Expressão regular que contempla números inteiros e flutuantes: Pattern (?:\d*\.)?\d+

Regex - (?:\d*\.)?\d+

Regex – (?:\d*\.)?\d+

Usando Expressões Regulares

1 – Crie uma página web, utilize os scripts JQuery adequados no qual você pode conferir no código abaixo:

JQuery UI - Validação - Regex

JQuery UI – Validação – Regex

Exemplo:

Neste exemplo utilizamos expressões regulares para validar o conteúdo dos campos de uma aplicação JQuery. Na aplicação se um campo de texto conter caracteres que não correspondem a expressão serão automaticamente invalidados.

JQuery

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title>Desenvolvimento Aberto</title>

<style type="text/css">
body {
	font: 62.5% "Trebuchet MS", sans-serif;
	margin: 50px;
}

#cadastro label {
	width: 250px;
}

#cadastro label.error, #cadastro input.submit {
	color: darkorange;
	margin-left: 253px;
}
</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>

<!-- JQuery Validator -->

<script type="text/javascript"
	src="./js/jquery-validation-1.13.1/dist/jquery.validate.js"></script>

<!-- Script JQuery - JQuery UI -->

<script type="text/javascript">
	// Declara UI e funções JQuery

	$(document).ready(function() {

		// Método de validação  - Adiciona método JQuery Validation
		$.validator.addMethod("regex", function(value, element, regexp) {
			var re = new RegExp(regexp);
			return this.optional(element) || re.test(value);
		}, "Menssagem substituída pela mensagem do Plug-in JQuery Validation.");

		// Cria regras de validação e customiza mensagens

		$("#cadastro").validate({
			rules : {
				nome : {
					required : true,
					regex : /[a-zA-Z]+/
				},
				sobrenome : {
					required : true,
					regex : /[a-zA-Z]+/
				},
				cargo : {
					required : true,
					regex : /[a-zA-Z]+/
				},
				salario : {
					required : true,
					regex : /(?:\d*\.)?\d+/
				},

			},

			messages : {
				nome : {
					required : "O campo nome é obrigatório.",
					regex : "Campo suporta somente letras."
				},
				sobrenome : {
					required : "O campo sobrenome é obrigatório.",
					regex : "Campo suporta somente letras."
				},
				cargo : {
					required : "O campo cargo é obrigatório.",
					regex : "Campo suporta somente letras."
				},
				salario : {
					required : "O campo salário é obrigatório.",
					regex : "Campo suporta somente decimais."
				},
			},
		});

		$("#accordion").accordion({
			heightStyle : "content"
		}).accordion("option", "icons", null)

		$("#abrir").button()

	});
</script>
</head>
<body>
	<h1>Desenvolvimento Aberto - JQuery - UI</h1>

	<h2>Form Validator - Validação</h2>
	<div id="accordion">
		<h3>Cadastro</h3>
		<div>
			<form id="cadastro" method="get" action="">
				<table>
					<tr>
						<td><label for="nome">Nome:</label></td>
						<td><input id="nome" name="nome" size="27" required>
							<br></td>
					</tr>
					<tr>
						<td><label for="sobrenome">Sobrenome:</label></td>
						<td><input id="sobrenome" name="sobrenome" size="35" required>
							<br></td>
					</tr>
					<tr>
						<td><label for="cargo">Cargo:</label></td>
						<td><input id="cargo" name="cargo" size="28" required>
							<br></td>
					</tr>
					<tr>
						<td><label for="salario">Salario:</label></td>
						<td><input id="salario" name="salario" size="18" required>
							<br></td>
					</tr>
				</table>
				<br>
				<button id="abrir" type="submit">Enviar Dados</button>
			</form>
		</div>
	</div>

</body>
</html>

JQuery UI – Validation Plug-in – Linux

Publicado: 31 de janeiro de 2015 em JavaScript, JQuery

O JQuery possui uma gama de plug-ins escritos sob o código aberto que permitem que você estenda as funcionalidades do JQuery, o JQuery Validation faz a validação de formulários do lado cliente de um modo simples e fácil, enquanto continua a oferecer uma abundância de opções de personalização. Faz dele uma boa escolha se você está construindo algo novo a partir do zero, mas também se você está tentando integrar algo em uma aplicação existente com muita marcação.

O JQuery Validation é open source e escrito sob a licença MIT e foi construído por um desenvolvedor líder na equipe jQuery UI, com o plug-in você pode validar campos requeridos de uma forma simples, ou customizar suas validações contando com inúmeras possibilidades, desde simples mensagens personalizadas até complexas validações sob regras que você pode definir. O download do JQuery Validation conta com vários exemplos de como utilizar o plug-in.

JQuery Validation: http://jqueryvalidation.org/

JQuery Validation

JQuery Validation

Exemplo:

Neste exemplo utilizamos o JQuery Validation para validar automaticamente os campos requeridos de um formulário. Para utiliza-lo basta efetuar o download e usar o arquivo contido na pasta Dist.

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

#cadastro label {
	width: 250px;
}

#cadastro label.error, #cadastro input.submit {
	color: darkorange;
	margin-left: 253px;
}
</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>

<!-- JQuery Validatr -->

<script type="text/javascript"
	src="./js/jquery-validation-1.13.1/dist/jquery.validate.js"></script>

<!-- Script JQuery - JQuery UI -->

<script type="text/javascript">
	// Declara UI e funções JQuery
	$(document).ready(function() {

		$("#cadastro").validate();

		$("#accordion").accordion({
			heightStyle : "content"
		}).accordion("option", "icons", null)

		$("#abrir").button()

	});
</script>
</head>
<body>
	<h1>Desenvolvimento Aberto - JQuery - UI</h1>

	<h2>Form Validator - Validação</h2>
	<div id="accordion">
		<h3>Cadastro</h3>
		<div>
			<form id="cadastro" method="get" action="">
				<table>
					<tr>
						<td><label for="nome">Nome:</label></td>
						<td><input id="nome" name="nome" size="27" required>
							<br></td>
					</tr>
					<tr>
						<td><label for="sobrenome">Sobrenome:</label></td>
						<td><input id="sobrenome" name="sobrenome" size="35" required>
							<br></td>
					</tr>
					<tr>
						<td><label for="cargo">Cargo:</label></td>
						<td><input id="cargo" name="cargo" size="28" required>
							<br></td>
					</tr>
					<tr>
						<td><label for="salario">Salario:</label></td>
						<td><input id="salario" name="salario" size="18" required>
							<br></td>
					</tr>
				</table>
				<br>
				<button id="abrir" type="submit">Enviar Dados</button>
			</form>
		</div>
	</div>

</body>
</html>

 

Os Widgets do JQuery UI são ricos em recursos, são plugi-ns que têm um ciclo de vida completo, você pode utiliza-los juntamente com métodos e eventos do JQuery. Você usar os Widgets para criar formulários modernos, interativos e animados na medida certa.

Os elementos basicos são o Accordion que converte um par de cabeçalhos e painéis de conteúdo em um acordeão, você pode usa-lo de varias maneiras. O Button permite que você use botões que possuem temas. O Dialog abre um conteúdo em uma sobreposição interativa e animada.

Widgets: http://api.jqueryui.com/1.10/category/widgets/

JQuery - Widgets

JQuery – Widgets

Exemplo:

Neste exemplo utilizamos o JQuery e o JQuery UI para criar um simples cadastro e exibir a informação inserida pelo usuário em 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({
					heightStyle : "content"
				}).accordion("option", "icons", null)

				$("#abrir").button()

				$("#dialog").dialog({
					autoOpen : false,
					show : {
						effect : "blind",
						duration : 1000
					},

					hide : {
						effect : "blind",
						duration : 1000
					}

				});

				$("#abrir").click(
						function() {

							$("#dialog").html(
									"Você digitou: <br><br>" + "Nome:      "
											+ $("#nome").val() + "<br>"
											+ "Sobrenome: "
											+ $("#sobrenome").val() + "<br>"
											+ "Cargo:     " + $("#cargo").val()
											+ "<br>" + "Salario:   "
											+ $("#salario").val())

							$("#dialog").dialog("open");

						});

			});
</script>
</head>
<body>
	<h1>Desenvolvimento Aberto - JQuery - UI</h1>

	<h2>Accordion - Dialog - Button</h2>
	<div id="accordion">
		<h3>Cadastro</h3>
		<div>
			<table>
				<tr>
					<td><label for="nome">Nome:</label></td>
					<td><input id="nome" size="27" /> <br></td>
				</tr>
				<tr>
					<td><label for="sobrenome">Sobrenome:</label></td>
					<td><input id="sobrenome" size="35" /> <br></td>
				</tr>
				<tr>
					<td><label for="cargo">Cargo:</label></td>
					<td><input id="cargo" size="28" /> <br></td>
				</tr>
				<tr>
					<td><label for="salario">Salario:</label></td>
					<td><input id="salario" size="18" /> <br></td>
				</tr>
			</table>
			<br>
			<button id="abrir">Enviar Dados</button>
		</div>
	</div>
	<div id="dialog" title="Resultado">
		<p></p>
	</div>
</body>
</html>

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>

O Document Object Model (DOM) ou modelo de objeto de documento é uma convenção multi-plataforma e independente de linguagem para representação e interação com objetos em documentos HTML, XHTML e XML. Os nós de cada documento são organizados em uma estrutura de árvore, chamada de árvore DOM. Os objetos na árvore DOM podem ser endereçados e manipulados pelo uso de métodos sobre os objetos. A interface pública de um DOM é especificada em sua interface de programação de aplicações (API). O JQuery possibilita através de seus métodos de manipulação a capacidade de manusear vários tipos de operações sobre os objetos DOM.

DOM: http://www.w3.org/DOM/

  • append() – Adiciona um elemento no parâmetro especificado no final do elemento.
  • remove() – Remove um elemento do DOM.

Você pode saber mais sobre manipulações DOM no seguinte link:

DOM: http://api.jquery.com/category/manipulation/

JQuery - DOM

JQuery – DOM

Exemplo:

Neste exemplo utilizamos métodos de manipulação para inserir e remover elementos  no modelo de objeto do documento .

JQuery


<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
    <meta charset="utf-8" />
    <title>Desenvolvimento Aberto</title>
    <style type="text/css">
     .imagem {
            border-style: double;
            border-width: 10px;
            width: 500px;
            height: 200px;

        }
    </style>

    <!-- Está é uma instalação do JQuery, você apenas precisa apontar
         para o respectivo script da versão que você deseja utilizar -->

   <script type="text/javascript" src="http://code.jquery.com/jquery-2.1.0.min.js"> </script>

   <!-- Este é um script JQuery básico que manipula o CSS e um evento de clique.
        Todo o script roda no evento equivalent ao OnLoad da pagina html-->   

   <script>

   // Declara eventos de clique
   $( document ).ready(function() {

       $(".imagem").append("<p>Este é um elemento adicionado na arvore DOM</p>");
       // Manipulação de atributos

       $( "#bnt01" ).click(function() {
           $("div").addClass("imagem");
           });

       $( "#bnt02" ).click(function() {
           $("div").removeClass("imagem");
           });            

       $( "#bnt03" ).click(function() {
           $(".imagem").remove();
           });
    });       

   </script>
</head>

<body>

<h1>Desenvolvimento Aberto - DOM</h1>

    <div class="imagem"
         ></div>
<p>
    Escolha uma opção:
    </p>
<button id="bnt01">Adicionar Classe CSS</button>
<button id="bnt02">Remover Classe CSS</button>
<button id="bnt03">Remover Elemento DOM</button>

</body>
</html>

O JQuery possui métodos para que você possa manipular elementos e seus atributos de varias maneiras diferentes, permitindo que você adicione, copie ou remova atributos dos elementos.

  • addClass() – Adiciona classes especificadas nos elementos designados.
  • removeClass() – Remove classes especificadas nos elementos designados.

Você pode saber mais sobre outros métodos de manipulação de atributos no seguinte link:

Manipulation: http://api.jquery.com/category/manipulation/

JQuery - Manipulação

JQuery – Manipulação

Exemplo:

Neste exemplo utilizamos o recurso de manipulação para inserir e remover uma classe CSS nos atributos da imagem.

JQuery

    <!DOCTYPE html>
    <html xmlns="http://www.w3.org/1999/xhtml">

    <head>
        <meta charset="utf-8" />
        <title>Desenvolvimento Aberto</title>
        <style type="text/css">
         .imagem {
                border-style: dashed;
                border-width: 10px;
            }
        </style>

        <!-- Está é uma instalação do JQuery, você apenas precisa apontar
             para o respectivo script da versão que você deseja utilizar -->

       <script type="text/javascript" src="http://code.jquery.com/jquery-2.1.0.min.js"> </script>

       <!-- Este é um script JQuery básico que manipula o CSS e um evento de clique.
            Todo o script roda no evento equivalent ao OnLoad da pagina html-->    

       <script>

       // Declara eventos de clique
       $( document ).ready(function() {

           // Manipulação de atributos

           $( "#bnt01" ).click(function() {
               $("img").addClass("imagem");
               });

           $( "#bnt02" ).click(function() {
               $("img").removeClass("imagem");
               });           

        });       

       </script>
    </head>

    <body>

    <h1>Desenvolvimento Aberto - Manipulação de Atributos</h1>

    <img src="Imagem/tecnologia.jpg" alt="tecnologia">
    <p>
        Escolha uma opção:
        </p>
    <button id="bnt01">Adicionar Classe CSS</button>
    <button id="bnt02">Remover Classe CSS</button>

    </body>
    </html>

O Brackets é um projeto de código aberto, inicialmente criado pela Adobe, agora mantido por uma comunidade de desenvolvedores ativa e crescente. O Brackets se encontra sob a licença MIT, e é atualmente mantido no GitHub, seu download está disponível para as plataformas para Mac, Windows e Linux.

O Brackets é um novo editor de código para HTML, CSS e JavaScript construídos com HTML, CSS e JavaScript. O Brackets possui vários recursos inovadores entre eles ​​atualizações HTML e CSS em tempo real (sem recarregar o navegador) e também possui realce de elementos selecionados em arquivos HTML e CSS que são destacados dentro do navegador, mas para estes recursos o Brackets requer trabalho em conjunto com Google Chrome. O Brackets também completa automaticamente código JQuery.

Projeto Brackets: http://brackets.io/

Outros Projetos Adobe OpenSource: http://html.adobe.com/opensource/

Instalando o Google Chrome no Ubuntu

Para instalar o Google Chrome no Ubuntu precisamos instalar alguns pacotes adicionais que podem ser encontrados no site de pacotes do Ubuntu.

1 – Primeiro baixe o Google Chrome: http://www.google.com.br/chrome/browser/

Google Chrome Downloads

Google Chrome Downloads

2 – Escolha a versão adequada a seu computador e aceite a licença:

Licença

Licença

3 – Baixe o pacote LibIndicator7: http://packages.ubunu.com/trusty/libs/libindicator7

libindicator7

libindicator7

4 – Baixe o pacote Libappindicator1: http://packages.ubuntu.com/trusty/libappindicator1

Libindicatator1

Libindicatator1

5 – Instale os três pacotes com a extensão Debian e instale o Brackets utilizando um PPA para o Ubuntu:

sudo dpkg -i libindicator7_12.10.2+14.04.20140402-0ubuntu1_amd64.deb
sudo dpkg -i libappindicator1_12.10.1+13.10.20130920-0ubuntu2_amd64.deb
sudo dpkg -i google-chrome-stable_current_amd64.deb

sudo add-apt-repository ppa:webupd8team/brackets
sudo apt-get update
sudo apt-get install brackets
Terminal

Terminal

6 – Você pode abrir o Google Chrome caso deseje testar a instalação:

Google Chrome

Google Chrome

7 – Abra o Brackets e utilize o código abaixo:

Brackets Editor

Brackets Editor

8 – Clique no ícone do raio localizado no canto superior direito do editor, chamado Live Preview para verificar o resultado do código:

Live Preview

Live Preview

Exemplo:

Verifique que o Brackets possui um ótimo editor cheio de recursos para desenvolvimento web, note que entre os recursos o Brackets auto completa seu código JQuery. Para saber como utilizar o Brackets clique no link a seguir:

Usando o Brackets: https://github.com/adobe/brackets/wiki/How-to-Use-Brackets

JQuery

    <!DOCTYPE html>
    <html xmlns="http://www.w3.org/1999/xhtml">

    <head>
        <meta charset="utf-8" />
        <title>Desenvolvimento Aberto</title>

        <!-- Está é uma instalação do JQuery, você apenas precisa apontar
             para o respectivo script da versão que você deseja utilizar -->

       <script type="text/javascript" src="http://code.jquery.com/jquery-2.1.0.min.js"> </script>

       <!-- Este é um script JQuery básico que manipula o CSS e um evento de clique.
            Todo o script roda no evento equivalent ao OnLoad da pagina html-->    

       <script>
       $( document ).ready(function() {

        // Seletores - seleciona todos os elementos
        // $(*).css("color", "blue");  

       // Seleciona por elemento
           $("body").css("background-color", "#FFFFFF");

        // Seleciona por ID
           $("#header").css("background-color", "#36648B")
                       .css("color", "white")
                       .css("padding", "5px")
                       .css("text-align","center");                  

           $("#section").css("width", "740px")
                        .css("float","left")
                        .css("padding","15px");

           $("#footer").css("background-color", "#36648B")
                       .css("color", "white")
                       .css("clear", "both")
                       .css("text-align", "center")
                       .css("padding","5px");

           // Seleciona por Classe
           $(".caixa").css("-moz-box-shadow", "5px 5px 5px 5px #777777")
                      .css("-webkit-box-shadow", "5px 5px 5px 5px #777777")
                      .css("box-shadow", "5px 5px 5px 5px #777777")
                      .css("padding", "20px");

           $(".imagem").css("padding", "5px")
                       .css("border", "10px");

           $("a").css("color", "#000000");

           $("p").slideUp(100).slideDown(3000);      

        $( "a" ).click(function( event ) {
            alert( "Desenvolvimento Aberto.\nObrigado por visitar!" );
        });
        });       

       </script>
    </head>

    <body>
    <div id="header">
    <h1>Desenvolvimento Aberto</h1>
    </div>

    <div id="section">

      <p class="caixa">

        <img src="Imagem/imagem01.jpg" width="350" height="300" alt="minha imagem" align="left" class="imagem"/>

        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.<br />  <br />
        Desenvolvimento Aberto foi escrito e desenvolve utilizando ferramentas gratuitas disponibilizadas
        pelas melhores empresas de software da atualidade, incluindo a própria hospedagem e design deste site,
        sendo assim, também proporciona conteúdo gratuito, isso quer dizer que você não paga nada para aprender
        e utilizar as tecnologias de ponta que podem ser manuseadas através das linguagens de programação mais
        requisitadas pelas empresas no mercado atual.       

        </p>
        <a href="#">Clique aqui!!!</a>
            </div>

    <div id="footer">
    Desenvolvimento Aberto © desevolvimento.aberto@live.com
    </div>

    </body>
    </html>

O JQuery emprestou do CSS o conceito de seletores para tornar fácil manipular qualquer elemento em uma pagina da web. Os seletores permitem acesso direto aos elementos de uma pagina utilizando varias técnicas diferentes, como seleção por atributos, seletores básicos, por filhos, utilizando filtros, forms, hierarquia, visibilidade e outros.

Você pode saber mais sobre os seletores de formulários no seguinte link:

Basic Filter: http://api.jquery.com/category/selectors/form-selectors/

Seletores de Formulários

Seletores de Formulários

Exemplo:

Neste exemplo utilizamos tipos de seletores para selecionar e modificar os elementos CSS da pagina web.

JQuery

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
	<meta charset="utf-8" />
	<title>Desenvolvimento Aberto</title>

	<!-- Está é uma instalação do JQuery, você apenas precisa apontar
	     para o respectivo script da versão que você deseja utilizar -->

   <script type="text/javascript" src="http://code.jquery.com/jquery-2.1.0.min.js"> </script>

   <!-- Este é um script JQuery básico que manipula o CSS e um evento de clique.
        Todo o script roda no evento equivalent ao OnLoad da pagina html-->     

   <script>
   $( document ).ready(function() {

    // Seleciona por ID
   	 $("#header").css("background-color", "#000000")
   	             .css("color", "white")
   	             .css("padding", "5px")
   	             .css("text-align","center");               	 

       $("#section").css("width", "350px")
                    .css("float","left")
                    .css("padding","15px");

       $("#legenda").css("width", "500px")
                    .css("float","right")
                    .css("padding","5px");       

       $("#footer").css("background-color", "#000000")
                   .css("color", "white")
                   .css("clear","both")
                   .css("text-align", "center")
   	             .css("padding","5px");

       // Seleciona por Classe
       $(".caixa").css("-moz-box-shadow", "5px 5px 5px 5px #777777")
                  .css("-webkit-box-shadow", "5px 5px 5px 5px #777777")
                  .css("box-shadow", "5px 5px 5px 5px #777777")
                  .css("padding", "10px");

       // Seleciona por elementos
       $("td, th").css("border","none")
                  .css("background-color","#dddddd")
                  .css("padding","5px")
                  .css("width","100px")

   	 $("a").css("color", "#000000");

       // ******************************
       // ** Seletores de Formulários **
       // ******************************	 

       $(":text").css("background-color","yellow");
       $(":password").css("background-color","limegreen");
       $(":radio").parent().css("background-color","aqua");
       $(":submit").css("background-color","fuchsia");

	});       

   </script>
</head>

<body>
<div id="header">
<h1>Desenvolvimento Aberto</h1>
</div>

<div id="section">

    <fieldset class="caixa">
        <legend>Desenvolvimento Aberto - JQuery</legend>
        <p>
          Nome: <br>
          <input type="text" name="nome">
        </p>
        <p>
          E-mail: <br>
          <input type="text" name="email" size="35">
        </p>

        <p>
          senha: <br>
          <input type="password" name="pwd">
        </p>
        <p>
          <input type="radio" name="usuario" value="registrado">Registrado <br>
          <input type="radio" name="usuario" value="naoregistrado">Não Registrado
        </p>
        <p>
          <hr>
          <input type="submit" name="enviar" size="35">
        </p>
    </fieldset>

	</div>

	<div id="legenda">
   <p>
        <span style="background-color:yellow;font-weight:bold">Formulário</span> seleciona elemento de texto.
   </p>
   <p>
        <span style="background-color:limegreen;font-weight:bold">Formulário</span> seleciona elemento de senha.
   </p>
   <p>
        <span style="background-color:aqua;font-weight:bold">Formulário</span> seleciona elemento de radio.
   </p>
   <p>
        <span style="background-color:fuchsia;font-weight:bold">Formulário</span> seleciona elemento de botão.
   </p>
   </div>

<div id="footer">
Desenvolvimento Aberto © desevolvimento.aberto@live.com
</div>

</body>
</html>

O JQuery emprestou do CSS o conceito de seletores para tornar fácil manipular qualquer elemento em uma pagina da web. Os seletores permitem acesso direto aos elementos de uma pagina utilizando varias técnicas diferentes, como seleção por atributos, seletores básicos, por filhos, utilizando filtros, forms, hierarquia, visibilidade e outros.

Você pode saber mais sobre os seletores de atributos no seguinte link:

Basic Filter: http://api.jquery.com/category/selectors/attribute-selectors/

JQuery - Seletores de Atributos

JQuery – Seletores de Atributos

Exemplo:

Neste exemplo utilizamos tipos de seletores para selecionar e modificar os elementos CSS da pagina web.

JQuery

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
	<meta charset="utf-8" />
	<title>Desenvolvimento Aberto</title>

	<!-- Está é uma instalação do JQuery, você apenas precisa apontar
	     para o respectivo script da versão que você deseja utilizar -->

   <script type="text/javascript" src="http://code.jquery.com/jquery-2.1.0.min.js"> </script>

   <!-- Este é um script JQuery básico que manipula o CSS e um evento de clique.
        Todo o script roda no evento equivalent ao OnLoad da pagina html-->     

   <script>
   $( document ).ready(function() {

    // Seleciona por ID
   	 $("#header").css("background-color", "#000000")
   	             .css("color", "white")
   	             .css("padding", "5px")
   	             .css("text-align","center");               	 

       $("#section").css("width", "400px")
                    .css("float","left")
                    .css("padding","15px");

       $("#footer").css("background-color", "#000000")
                   .css("color", "white")
                   .css("clear","both")
                   .css("text-align", "center")
   	             .css("padding","5px");

       // Seleciona por Classe
       $(".caixa").css("-moz-box-shadow", "5px 5px 5px 5px #777777")
                  .css("-webkit-box-shadow", "5px 5px 5px 5px #777777")
                  .css("box-shadow", "5px 5px 5px 5px #777777")
                  .css("padding", "8px");

       // Seleciona por elementos
       $("td, th").css("border","none")
                  .css("background-color","#dddddd")
                  .css("padding","5px")
                  .css("width","100px")                

   	 $("a").css("color", "#000000");

   	 // ***********************************
       // ** Seletores de Filtro Atributos **
       // ***********************************	 

       // Atributo nome
       $("td[colspan]").css("background-color", "yellow");

       // Atributo valor
       $("td[colspan=3]").css("background-color", "limegreen");

       // Atributo por partes do conteudo
       $("td[title*=Achar]").css("background-color", "aqua");

       // Atributo por partes finais do conteudo
       $("td[title$=final]").css("background-color", "fuchsia");
	});       

   </script>
</head>

<body>
<div id="header">
<h1>Desenvolvimento Aberto</h1>
</div>

<div id="section">

    <table class="caixa">
			<tr>
				<th></th>
				<th>10:00</th>
				<th>14:00</th>
				<th>16:00</th>
				<th>19:00</th>
			</tr>
			<tr>
				<th>Segunda</th>
				<td colspan="2"><span>Java</span></td>
				<td>C++</td>
				<td title="Achar um valor no conteudo do atributo">C#</td>
			</tr>
			<tr>
				<th>Terça</th>
				<td colspan="3">Ruby</td>
				<td>Rails</td>
			</tr>
			<tr>
				<th>Quarta</th>
				<td colspan="2">Javascript</td>
				<td>CSS</td>
				<td title="Procure minha palavra final">JQuery</td>
			</tr>
			<tr>
				<th>Quinta</th>
				<td colspan="3">Python</td>
				<td>Linux</td>
			</tr>
			<tr>
				<th>Sexta</th>
				<td colspan="3" >Abap</td>
				<td><span>NetWeaver</span></td>
			</tr>
		</table>
		  </div>

   <p>
     <span style="background-color:yellow;font-weight:bold">Atributo</span> busca um atributo da tag.
   </p>
   <p>
     <span style="background-color:limegreen;font-weight:bold">Atributo</span> busca um atributo da tag por valor.
   </p>
   <p>
     <span style="background-color:aqua;font-weight:bold">Atributo</span> busca um atributo da tag por partes do valor.
   </p>
   <p>
     <span style="background-color:fuchsia;font-weight:bold">Atributo</span> busca um atributo da tag pelo valor final.
   </p>	

<div id="footer">
Desenvolvimento Aberto © desevolvimento.aberto@live.com
</div>

</body>
</html>