Welcome to jQuery UI!
Esse foi um site que sempre me inspirou, principalmente por ser rico em exemplos e permitir criar aplicações com um design interessante e de modo simples e rápido.
Não digo que esta seja a melhor biblioteca para criação de interfaces gráficas com javascript nem a mais rápida, pois a avaliação desses quesitos depende de diversos fatores, como das características do navegador e da capacidade de processamento do lado do cliente web. Mas sua utilização tem permitido criar maior dinamismo e usabilidade em interfaces web com php de uma forma muito rápida, tanto em relação a sua implementação quanto ao tempo para entender seu funcionamento.
Não domino todos seus recursos, mas abaixo posto uma brincadeira com a função dialog dessa biblioteca, idéia que surgiu no comentário do meu post anterior.
O problema consiste em criar, com um único script, chamadas para janelas diferentes.
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>jQuery UI Example Page</title> <link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/redmond/jquery-ui.css"> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1/jquery-ui.min.js"></script> <script type="text/javascript"> $(function(){ // Dialog $('.dialog').dialog({ autoOpen: false, width: 600, buttons: { "Ok": function() { $(this).dialog("close"); }, "Cancel": function() { $(this).dialog("close"); } } }); // Dialog Link $('.dialog_link').click(function(){ $('.dialog').dialog('close'); var id_link = $(this).attr('id'); var index = id_link.split('_'); $('#txt_'+index[1]).dialog('open'); return false; }); //hover states on the static widgets $('.dialog_link, ul.icons li').hover( function() { $(this).addClass('ui-state-hover'); }, function() { $(this).removeClass('ui-state-hover'); } ); }); </script> <style type="text/css"> body{ font: 62.5% "Trebuchet MS", sans-serif; margin: 50px;} .demoHeaders { margin-top: 2em; } .dialog_link { padding: .4em 1em .4em 20px; text-decoration: none;position: relative; } .dialog_link span.ui-icon { margin: 0 5px 0 0;position: absolute; left: .2em;top: 50%;margin-top: -8px; } </style> </head> <body> <h1>Welcome to jQuery UI!</h1> <h2>Dialog</h2> <p><a href="#" id="lk_1" class="dialog_link ui-state-default ui-corner-all"><span class="ui-icon ui-icon-newwin"></span>Open Dialog 1</a></p> <br> <p><a href="#" id="lk_2" class="dialog_link ui-state-default ui-corner-all"><span class="ui-icon ui-icon-newwin"></span>Open Dialog 2</a></p> <br> <p><a href="#" id="lk_3" class="dialog_link ui-state-default ui-corner-all"><span class="ui-icon ui-icon-newwin"></span>Open Dialog 3</a></p> <br> <p><a href="#" id="lk_4" class="dialog_link ui-state-default ui-corner-all"><span class="ui-icon ui-icon-newwin"></span>Open Dialog 4</a></p> <br> <p><a href="#" id="lk_5" class="dialog_link ui-state-default ui-corner-all"><span class="ui-icon ui-icon-newwin"></span>Open Dialog 5</a></p> <div title="Dialog Title 1" id="txt_1" class="dialog"> <p>Lorem ipsum dolor sit amet, Nulla nec tortor. Donec id elit quis purus consectetur consequat. </p> <p>Nam congue semper tellus. Sed erat dolor, dapibus sit amet, venenatis ornare, ultrices ut, nisi. Aliquam ante. Suspendisse scelerisque dui nec velit. Duis augue augue, gravida euismod, vulputate ac, facilisis id, sem. Morbi in orci. </p> </div> <div title="Dialog Title 2" id="txt_2" class="dialog"> <p>Nulla purus lacus, pulvinar vel, malesuada ac, mattis nec, quam. Nam molestie scelerisque quam. Nullam feugiat cursus lacus.orem ipsum dolor sit amet, consectetur adipiscing elit. Donec libero risus, commodo vitae, pharetra mollis, posuere eu, pede. Nulla nec tortor. Donec id elit quis purus consectetur consequat. </p> </div> <div title="Dialog Title 3" id="txt_3" class="dialog"> <p>Nam congue semper tellus. Sed erat dolor, dapibus sit amet, venenatis ornare, ultrices ut, nisi. Aliquam ante. Suspendisse scelerisque dui nec velit. Duis augue augue, gravida euismod, vulputate ac, facilisis id, sem. Morbi in orci. Nulla purus lacus, pulvinar vel, malesuada ac, mattis nec, quam. Nam molestie scelerisque quam. </p> </div> <div title="Dialog Title 4 " id="txt_4" class="dialog"> <p>Nullam feugiat cursus lacus.orem ipsum dolor sit amet, consectetur adipiscing elit. Donec libero risus, commodo vitae, pharetra mollis, posuere eu, pede. Nulla nec tortor. Donec id elit quis purus consectetur consequat. Nam congue semper tellus. Sed erat dolor, dapibus sit amet, venenatis ornare, ultrices ut, nisi. Aliquam ante. </p> </div> <div title="Dialog Title 5" id="txt_5" class="dialog"> <p>Suspendisse scelerisque dui nec velit. Duis augue augue, gravida euismod, vulputate ac, facilisis id, sem. Morbi in orci. Nulla purus lacus, pulvinar vel, malesuada ac, mattis nec, quam. Nam molestie scelerisque quam. Nullam feugiat cursus lacus.orem ipsum dolor sit amet, consectetur adipiscing elit. Donec libero risus, commodo vitae, pharetra mollis, posuere eu, pede. Nulla nec tortor. Donec id elit quis purus consectetur consequat. Nam congue semper tellus. Sed erat dolor, dapibus sit amet, venenatis ornare, ultrices ut, nisi. </p> </div> </body> </html>
Esse é um código exemplo do que se pode fazer, manipulando os atributos dos elementos HTML.
Não sei dizer se é uma “gambi” utilizar um padrão no ID das divs, de modo que eu possa inclui-las em um loop via PHP, por exemplo. Mas espero que sirva de inspiração para códigos melhores 😉
10 comentários
1 menção
Pular para o formulário de comentário
Oi Querida, belo post.
Seguinte, tem como colocar uma página dentro ao invés de uma div???
Valeu
Olá, adorei o post! porém eu já tenho um pequeno conhecimento sobre ‘Ui Dialog’. rerer
Fabio, Assim como o Luiz Fernando disse esta corretismo, sei porque já fiz utilizando include ( cod: ), comigo funcionou direitinho, espero que vc consiga fazer no seu projeto! Boa sorte!
Fala Fabio, Acredito que pra adicionar uma página você tenha que puxar uma página usando Include do PHP, ou colocar o código dessa página aí em HTML mesmo, pois tudo que vai alí dentro é um HTML mesmo, lembrando apenas de não colocar Doctype..Head…Body e nem HTML =) pois senão num vai ser validado.
abraços
(não testei)
Olá muito bom o post, abriu um bomo leque de possibilidades, mas estou com problemas de funcionalidade para o IE8… infelizmente preciso fazer a página rodar em IE8, teria alguma opção?
Muito bom. Preciso fazer algumas coisas, ao clicar no X para sair. Como faço ? Você pode me ajudar ?Obrigado. Ricardo
Gostei muito, muito bom mesmo…..
Só gostaria de saber como aplicar opacidade para este dialog modal, ao mover o dialog!!!
gostei, mas falta uma coisa nesse widget, como aplicar opacidade? queria que esse comportamento acontecesse ao mover o Dialog
Oi Elaine,
Você sabe se tem como posicionar a janela modal no topo/esquerda ?
Valeu!
Muitíssimo obrigado, vc acabou de poupar algumas boas horas minhas lendo e entendendo código. Simples, bem escrito e objetivo!!! Parabéns e continue assim pois o mercado precisa de bons profissionais!!!
Extramamente util seu post, parabens, comecei a utilizar esta técnica a pouco tempo e estou tentando adaptar aos sites que ja fiz anteriormente. http://www.namorarcomigo.com.br
[…] http://www.digitaldev.com.br/2012/03/29/usando-jquery-ui-para-construcao-de-modal-dialog-window/ […]