10 caixas de diálogo – jQuery Modal »

12fev 2011, às 11:01

Publicado em Recursos jQuery | Deixe o seu comentário (3) »

publicado por: Magno Valdetaro

Uma ótima maneira de mostrar informações rápidas para o usuário é o uso de caixas de diálogo modals ou janelas, como preferir. As caixas de diálogo também podem ser usadas para alerta-los para avisos, erros, para exibir formulários e muito mais. Apresento a vocês 10 opções deste ótimo recurso em jQuery, aproveite!

1. Exit Modal Box

Exibe um modal com uma mensagem específica antes que o usuário deixe seu site.

2. Smooth Popup Box

Tutorial de criação de popup utilizando jQuey (em inglês)

3. ThickBox

Este é uma caixa de diálogo escrita com jQuery para exibir uma ou múltiplas imagens, de conteúdo internos, em um iframe ou por meio de AJAX.

4. Boxy

É uma modal estilo Facebook escrito em jQuery com opção de arrastar e redimensionar.

5. Simple jQuery Modal

Cria um simples modal com jQuery

6. ColorBox

Elegante modal aos moldes do lightbox, fácil de customizar e leve.

7. Upload in Modal Window

Um modal para upload semelhante ao do Wordpress.

8. UI Dialog

Ui Dialog faz parte da biblioteca de interface de usuário para jQuery, flexível em seu uso, porém trabalho na customização.

9. Ajax Contact Form

Um excelente formulário de contato usando AJAX e jQuery.

10. Impromptu

Permite a criação de formulários com caixas de diálogo.

Highcharts–Gráficos interativos com JavaScript »

13jan 2011, às 09:59

Publicado em Ajax/Javascript/Jquery | Deixe o seu comentário (1) »

publicado por: Magno Valdetaro

Uma excelente solução para gerar gráficos crossbrowser com JavaScript.

Highcharts é uma biblioteca de gráficos escritos em JavaScript puro, oferecendo uma maneira fácil de adicionar gráficos interativos para seu site ou aplicação web. Highcharts atualmente suporta uma série dos mais utilizados tipos de gráficos como: Line, spline, barra, pizza entre diversas outras variações como pode ser visto nesta página de demonstração.

Compatibilidade

Sabe o melhor?A biblioteca Highcharts funciona em todos os browsers moderno, incluindo o iPhone/iPad (chupa Google Analytics!) e no Internet Explorer a partir da versão 6 (Morra!) utilizando VML, já em outros navegadores utilizam SVG para a renderização dos gráficos.

Recursos

Ao utilizar a biblioteca é dispensando o uso de plugins do lado do cliente, como Flash ou Java. è de simples implementação e permite escolher entre Jquery ou MooTools para trabalhar junto ao núcleo do Highcharts.

É open source, permitindo qualquer alteração em seu código o que ajuda na flexibilidade e personalização. Oferece inúmeros tipos de gráficos como citados acima, sintaxe de configuração simples, permite exibir gráficos dinâmicos através de uma api em combinação com jQuery o MooTools recebendo valores a partir do servidor. Múltiplos eixos para que você possa comparar variáveis. Tooltip para exibir informações de pontos específicos do gráfico. Recursos de zoom, exportação e impressão.

Licença

Highcharts é grátis para fins não lucrativos. Então se você quiser utilizar em seu site, trabalhos internos entre outros, fique à vontade. Se for usar para fins comercias visite a página de licenças e preços. Os preços variam de $80 a $2000.

Uma simples e elegante galeria de imagens com jQuery »

12out 2010, às 09:42

Publicado em Ajax/Javascript/Jquery Recursos jQuery | Deixe o seu comentário (1) »

publicado por: Magno Valdetaro

Sideways é uma simples, mas elegante galeria de imagens desenvolvida em HTML, CSS e do já conhecido framework jQuery. Esta galeria faz uso de alguns plugins, estes são:  jQuery UI (jQuery User Interface), jQuery Easing desenvolvido por George Smith McGinley, somando e completando o time de plugins, Sideways também faz uso do plugin Mousewheel jQuery de Aaron Brandon.

Você pode usar Sideways tanto em projetos pessoais como comerciais (victory!), sendo assim esta galeria é toda sua você desenvolvê-la ou apenas torná-la melhor.

Demo: http://manos.malihu.gr/sideways-jquery-fullscreen ...

Download: Sideways download

jConfirmAction: Um plugin jQuery para caixa de confirmação »

10mai 2010, às 10:23

Publicado em Ajax/Javascript/Jquery jQuery | Comentários desativados »

publicado por: Magno Valdetaro

jConfirmAction é mais um plugin jQuery que visa substituir a caixa de confirmação padrão por basicamente um elemento DIV flutuante que surge e desaparece em um fading suave e contém as informações e opções de confirmação.

Para utilizar este recurso, basta incluir o plugin jConfirmAction a sua página, crie um link, de um nome a uma class e chame a função jConfirmAction, e assim você terá uma caixa de confirmação muito mais simpática e bonita.

Não se esqueça que é necessário também a aplicação do framework jQuery em sua página.

Veja o demonstrativo do jConfirmAction.

Slider de Imagens jQuery com 9 efeitos e transições »

15abr 2010, às 08:04

Publicado em Ajax/Javascript/Jquery Recursos jQuery | Comentários desativados »

publicado por: Magno Valdetaro

Björn Crüger (já sei, nome esquisito) após conhecer o CU3ER desenvolvido por Stefan Kovac ficou fascinado pelo seus efeitos de corte de uma imagem em pedaços e vê-la se transformando em outra, resolveu criar seu próprio slider o Nivo Slider.

Diferente do CU3ER que foi desenvolvido em flash, Nivo Slider é um novo slider em jQuery com 9 efeitos de transição. Simples e leve tem controle direcional e de navegação. Funciona no Internet Explorer 7+, Firefox 3+, Google Chrome e Safari 4. E não posso esquecer de dizer que requer o jQuery Framework e é de uso livre, então aproveite.

JQuery MultiSelect Plugin »

03fev 2010, às 08:24

Publicado em Ajax/Javascript/Jquery Recursos jQuery | Comentários desativados »

publicado por: Magno Valdetaro

Eric Hynds do erichhynds.com ´gastou algumas horas dos seus últimos meses desenvolvendo um plugin para jQuery que transforma o controle SELECT do HTML comum em uma elegante lista de múltipla escolha.

Agora que o plugin está o suficientemente estável e com boa velocidade de resposta Eric o disponibilizou para download em seu blog e ainda incluindo suporte a temas!

Confira as imagens:

Alguns recursos:

• Suporte a temas
• Suporte a Optgroup
• Cabeçalho opcional com opção de marcar  todos / desmarcar todos
• Alteração fácil de velocidade do fade, altura do recipiente de rolagem, texto, links.
• Apenas 5.3Kb (minified)

Veja o demonstrativo

Download source (9,5 Kb) ou minified (5.3Kb)

jParse – jQuery XML plugin »

10nov 2009, às 08:13

Publicado em jQuery | Comentários desativados »

publicado por: Magno Valdetaro

 jParse é um plugin jQuery que permite exibir facilmente um arquivo XML através de uma solicitação ajax. jParse lhe dá opções de customização, quantidade e contagem de itens a serem exibidos e possibilita executar funções antes e depois do jParse ter sido executado. jParse tem um código leve e rápido e foi testado com Firefox 2+, IE 6+, Safari 3 + e Opera 9+.

O método ajax do jQuery não permite realizar pedidos de um outro domínio, logo o arquivo XML deve estar no mesmo domínio qual você está trabalhando (FAIL). Mas usando o jParse é bem simples puxar um valor de um nó, o valor de um atributo de um nó, ou o de um  do documento XML.

Desenvolvido por Kyle Rush; jParse – jQuery XML Parse Plugin está disponível para download sob licença MIT. Mais informações, demos e download no site jParse.

O que achou desta dica?

Cheat Sheet para Webdesigners »

24set 2009, às 08:56

Publicado em Recursos | Comentários desativados »

publicado por: Magno Valdetaro

Posso afirmar que você não lembra de todos os atributos, classes, tags, funções e atalhos que todo desenvolvedor web precisa conhecer no dia a dia, certo ou errado?

É aí que entra uma Cheat Sheet, uma “colinha”, para te ajudar naquele momento em que a memória falhar (tá lembrando do colégio?). A Cheat Sheet é um documento que contém as informações mais básicas sobre um software, linguagem e por aí vai.

Extensões que não podem faltar no seu Dreamweaver »

20set 2009, às 13:21

Publicado em Dreamweaver Ferramentas | Deixe o seu comentário (5) »

publicado por: Magno Valdetaro

Todo mundo já ouviu o velho clichê: “Tempo é dinheiro!” ou “ Money é good nós no have!”. OK, este segundo foi apenas uma lembrança dos Mamonas Assassinas.

Então, se tempo é dinheiro que tal aceleramos um pouco o desenvolvimento de sites e aplicativos no Adobe Dreamweaver, o editor mais conhecido e utilizado para desenvolvimento web. Abaixo uma pequena lista de extensões para Dreamweaver que vai acelerar sua vida e economizar seus dedos. Espero que gostem!

jQTouch - Crie sofisticadas aplicações móveis com HTML, CSS e jQuery! »

08set 2009, às 08:49

Publicado em Ferramentas jQuery | Comentários desativados »

publicado por: Magno Valdetaro

jQTouch é um plugin do framework jQuery de desenvolvimento web para dispositivos móveis (PDA, iphone, celular, tablet e por aí vai). Com este plugin você pode criar sofisticadas aplicações apenas utilizando HTML, CSS e JQuery.