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.
- Para visualizar os exemplos, acesse: www.profissionaisti.com.br/jquery/dialog.
Baixe os arquivos aqui. - To view the examples, access: www.profissionaisti.com.br/jquery/dialog.
Download files here.
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.
23 Comentários
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.
Bojan,
Thanks again. I’ll put a translator as soon as possible.
Hugs.
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
@dpawusiak,
Many thanks for comment.
The bug really exists. I will check it and return soon.
Hugs.
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
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.
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
Muito bom o artigo, parabéns! Vou baixar e testar!!!
[]s
Neto
Ola Neto,
Agradeço o comentário e espero que continue prestigiando o PTI.
Após seus testes se tiver algo a complementar, fique a vontade.
Abraço
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!
@Bruno,
Thanks for participating!
I dont have estimate to make any changes, but if you do something, please, let me know to post here.
Regards
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/
Excelentes modificações, tb não entendi o pq.. mais ficou ótimo!
Parabéns pela iniciativa!
Abraços, Fernando
@Fernando
Pois é, levei um nãozão…rs
Obrigado pela participação. Abraço!
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
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?
@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
a wonderful expression thanks
Julgando pelos exemplos, muito bom o trabalho, uma pena não ser consideradas estas funções.
Abraços.
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
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?