jQuery Dialog – Melhorias Interessantes/Improvements

AGRADEÇA AO AUTOR COMPARTILHE!

Ola pessoal!

Hoje vou puxar um pouco mais para minha área, que é desenvolvimento web. Mais especificamente vou falar um pouco de algumas alterações que fiz na jQuery UI Dialog.

Depois de conversar bastante no fórum da jQuery e achando que as melhorias poderiam ser implementadas em futuras versões, levei UM NÃO de um dos mantenedores do projeto. Não entendi muito bem o porque da recusa, mas fazer o que, eles é quem mandam.

Chega de choradeira…e vamos ao que interessa!

Nos exemplos apresentados ja estou utilizando arquivos da última versão estável da jQuery UI – vs1.5.2 juntamente com a vs1.2.6 da jQuery. O único arquivo que foi alterado foi o ui.dialog.js e os arquivos .css que estão na pasta css, portanto, caso haja necessidade de atualizar para versões mais novas, basta atualizar os outros arquivos deixando o ui.dialog.js e os css’s intactos.

As melhorias que fiz foram:

  • Permitir maximizar e restaurar a janela aberta (inclusive com duplo-clique na barra de títulos);
  • Permitir retirar o ícone de fechar juntamente com a possibilidade de fechar com ESC (para casos que há obrigatoriedade de clicar em um botão);
  • Não permitir arrastar as janelas pra fora do corpo do documento ou de outro elemento;
  • Ajuste automático das barras de rolagem de leitura do conteúdo da janela;

Todas as alterações estão comentadas no arquivo ui.dialog.js. Relembro que, podem ja existir outras funcionalidades (não creio que tenham muitas) em versões mais novas, porém, esta que utilizo supri todas as necessidades.

Se voce encontrar algum bug nas alterações que fiz, por favor, deixe seu comentário a respeito.

Conheça também o menu com múltiplos níveis gerado com a jQuery + CSS.

Testado em: IE6, IE7, FF2.x, FF3, GChrome

Espero que seja útil.

Até a próxima.

AGRADEÇA AO AUTOR COMPARTILHE!

23 Comentários

Bojan Zivanovic
1

Good job on the dialog, and the response time in regards to my question. Certanly saved me time. Btw, you should add a google translate link ( portugese => english), so that people who speak only english can understand what this is about. Cheers, Thanks again.

dpawusiak
3

It is very usefull, this is excatly what I was looking for.

I think there is a bug. when i resize dialog (so there is scrollbar) and then use maximize button the content is not resized . if I resize it manually its ok.
Thanks

Jackson CasetJackson Caset Autor do Post
5

The problem reported by dpawusiak was corrected. The file ui.dialog.js was the unique changed. You can download the package again ;)

If you find more problems, let me know.

Hug

Raphael Domingues
6

Boa tarde Jackson,
Achei muito interessante e pertinente as melhorias no ui.dialog, porém gostaria de ressaltar que o scrollbar no “internet explorer” quando se redimensiona a janela ele não se adapta assim tão bem quando se faz no firefox.
Abraço.

Jackson CasetJackson Caset Autor do Post
7

Ola Raphael,

Agradeço o comentário. Vc testou no IE6? Caso positivo, realmente no IE6 ainda há alguns bugs :(

Se por acaso conseguires resolver e se quiseres postar aqui, fica a vontade.

Um abraço

Bruno
10

I’m a little late here but..

Great improvements!

Is there a chance you can make this work on latest jQuery 1.3.2 and ui 1.7 ?

Thanks!

BrunoBruno Autor do Post
12

I decided to port your improvements of ui.dialog to work with latest jquery 1.3.2 and ui 1.7.

I’m using a modified version of your dialog.css and images. About the ui.dialog.js, I decided to start from the UI version because there where some major refactoring since the ui.dialog.js you used.

So far I’ve managed to get maximiza/restore button working and translucent windows (by using pngs) as you can see here:

http://img93.imageshack.us/img93/3366/screenshotjquerydesktop.png

I’ll also add a minimize button that when clicked hides the window and triggers a onMinimize() event.

I also made it respect it’s parent container, so you can now do…

var a = $(‘Hello world!’)
.appendTo(‘#dialogContainner’);
a.dialog();

…so that dialog can’t move out or be resized ou of of #dialogContainner.

I’ll post the source code when I finish here. I hope to get it ready in one week given the short time I currently have.

Kudos to your work!
http://www.brunocassol.com/

thiago radice
15

Olá JC! Gostei muito das suas modificações, ficaram realmente muito interessantes, ateh ja implementei, mas estou enfrentando problemas… qndo vou redimensionar no FF ele nao redimensiona, no IE tá ok… explico…
Consigo alterar o tamanho da janela, mas o conteúdo não acompanha… não sei o que pode estar errado, usei até mesmo o seu exemplo e continua dando este erro. Mas isso é o de menos. Gostaria que a janela ficasse do tamanho do meu conteúdo por default, deixando que o usuáro depois diminua ou aumente o aumente. Existe uma forma de se fazer isso? Outra coisa, gostei muito do exemplo do BRUNO, ele teria disponibilizado os arquivos pra vc? Um abraço e parabens pelo trabalho

thiago radice
16

Opa JC… depois de muito tempo apanhando aqui, descobri que não está funcionando prq minha versao do JQuery é a mais recente… existe uma forma de usar seu plugin com essa nova versao?

Jackson CasetJackson Caset Autor do Post
17

@Thiago

Desculpe pela demora no retorno. Bom, eu não trabalhei mais nestes códigos, mas acredito que algumas alterações fariam funcionar na nova versão da jQuery.

Vou avaliar se por acaso já não fiz estas alterações, realmente não me recordo. Se vc fizer algo, avise-me ;-)

Abraço

Frank
20

Tem um bug.
Se abrir mais de uma dialog c/ a opção de maximizar, quando maximizada somente a primeira janela que fica com o icone respectivo.

Fora isso, gostei da alteração.

abs

Marcos Wênyo
21

Boa tarde, gostei muito das alterações e gostaria de saber se alguém peoderia me ajudar. Eu estou desenvolvendo um sistema web para controlar requisições de fotocópias do IFPI campus Picos. O problema é o seguinte: quando envio o formulario via ajax post, ele me retorna uma mensagem se deu certo ou não, só que o “overlay” vai ficando cada vez mais forte, como uma sobreposição sobre outra, como resolver?

Deixe seu comentário

Seu endereço de e-mail não será publicado. Campos com * são obrigatórios!

Você pode usar estas tags e atributos de HTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">