JQuery UI – Elementos – Javascript

Publicado: 9 de fevereiro de 2015 em JavaScript, JQuery
0

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>

Deixe um comentário