JQuery UI – Accordion, Dialog e Button – Linux

Publicado: 30 de janeiro de 2015 em JavaScript, JQuery
0

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>

Deixe um comentário