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
2 – A pagina de resultado recupera e exibe os parâmetros enviados através de Javascript e JQuery:
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>
Ricardo Mantovani
Desenvolvimento Código Aberto 