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