Marcelo Andrade » jQuery

Modal com jQuery – Simple Modal

Marcelo Andrade — Mon, 12 Dec 2011 17:07:30 +0000

SimpleModal é um plugin jQuery para abrir janelas do tipo modal. Pode ser usado para gerar um alerta ou para fazer janelas de confirmações com muito pouca linha de código.

Como usar?

É muito simples, bastam poucas linhas de código para utilizar o SimpleModal, veja:

Para fazer uma janela de alerta

1
2
3
4
5
6
7

$("myElement").addEvent("click", function(){
var SM = new SimpleModal({"btn_ok":"Alert button"});
SM.show({
"title":"Title",
"contents":"Your message..."
});
});

Para fazer uma janela modal

1
2
3
4
5
6
7
8
9
10
11
12
13

$("myElement").addEvent("click", function(){
var SM = new SimpleModal({"btn_ok":"Confirm button"});
SM.addButton("Action button", "btn primary", function(){
alert("Add your code");
this.hide();
});
SM.addButton("Cancel", "btn");
SM.show({
"model":"modal",
"title":"Title",
"contents":"Your message..."
});
});

Para fazer uma janela AJAX

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

$("myElement").addEvent("click", function(){
var SM = new SimpleModal({"width":600});
SM.addButton("Action button", "btn primary", function(){
this.hide();
});
SM.addButton("Cancel", "btn");
SM.show({
"model":"modal-ajax",
"title":"Title",
"param":{
"url":"ajax-content.php",
"onRequestComplete": function(){ /* Action on request complete */ }
}
});
});

Para fazer um Modal com Imagens

1
2
3
4
5
6
7
8
9
10
11

$("myElement").addEvent("click", function(){
var SM = new SimpleModal();
SM.show({
"model":"modal-ajax",
"title":"Image title",
"param":{
"url":"http://url-file.jpg",
"onRequestComplete": function(){ }
}
});
});

Para dar uma olhada em alguns exemplos visite esta página: http://simplemodal.plasm.it/#examples

O download do SimpleModal pode ser feito através deste link: https://github.com/plasm/simplemodal/zipball/master

Até a próxima pessoal.

bxSlider, Slide de imagens e textos com jQuery

Marcelo Andrade — Fri, 16 Sep 2011 13:00:17 +0000

bxSlider é um plugin jQuery de transição, slide, pode servir tanto para imagens como para textos.

Seu funcionamento é bem simples mas com várias opções de personalização e diversas funcionalidades, entre elas estão:

Transições horizontal, vertical com ou sem fade.
Exibição de vários slides que só vez (carousel).
Botões de próximo / anterior ou ativar o modo automático.

Estas foram apenas algumas das funções que este poderoso plugin proporciona.

Veja as demonstrações do plugin em ação:

http://bxslider.com/examples

Para mais informações de como implementar este plugin em seu projeto, acesse o site do bxSlider

http://bxslider.com/

jQuery pageSlide, painel de conteúdo deslizante

Marcelo Andrade — Tue, 16 Aug 2011 02:26:16 +0000

Hoje em dia qualquer espaço na tela é crucial, o jQuery pageSlide mostra em forma de slide um painel com o conteúdo, podendo escolher a direção do slide.

Para conferir uma demonstração e fazer o download do plugin, acesse o site do desenvolvedor.

- http://srobbin.com/jquery-pageslide/

Até a próxima.

sNotify, Notificações com jQuery

Marcelo Andrade — Mon, 15 Aug 2011 11:57:24 +0000

sNotify é um plugin muito útil desenvolvido com jQuery para quem está desenvolvendo aplicações web. sNotify permite ao desenvolvedor mostrar notificações em uma maneira rápida e fácil.

É possível ver uma demonstração neste link:

- http://www.gayadesign.com/scripts/sNotify/

Para fazer o download e saber mais de como utiliza-lo, acesse a página do plugin:

- http://www.gayadesign.com/diy/snotify-easy-notifications-in-jquery/

Até a próxima galera.

Galileory jQ, galeria de imagens com jQuery

Marcelo Andrade — Fri, 12 Aug 2011 12:21:29 +0000

Galileory jQ oferece uma forma bem interessante de se apresentar imagens em um site.

Todas as imagens são colocadas em uma única caixa que pode ser posicionada, aumentada e esticada como quiser. É totalmente relativa ao cliente, compatível com todos os SGC e pode ser integrado em qualquer site ou blog. O processo de integração do Galileory é extremamente simples e não requer habilidades de programação avançadas.

Para mais detalhes e visualizar esta excelente galeria de imagens, visite o site do plugin.

- http://galileory.sourceforge.net/

Espero que tenham gostado desta dica. Até a próxima.

Galleria – Uma galeria de imagens em jQuery

Marcelo Andrade — Wed, 10 Aug 2011 00:51:48 +0000

Galleria é um framework JavaScript galeria de imagens construída em cima da biblioteca jQuery. O objetivo é simplificar o processo de criação de galerias de imagens profissionais para a web e dispositivos móveis.

O Galleria tem a possibilidade de escolher diversos temas, mas como tudo não pode ser perfeito, somente um tema é gratuito.

Quem quiser conferir como é o Galleria, veja uma demonstração no link abaixo:

- http://galleria.aino.se/themes/classic/

Para detalhes de como implementar em seus website, acesse o site do plugin:

- http://galleria.aino.se/

Esta foi a dica de uma galeria de imagens, espero ter colaborado. Até a próxima.