Pinceladas da Web

Todo desenvolvedor um dia já utilizou o famoso efeito Lightbox ao menos uma vez em seus projetos, seja para mostrar uma galeria de fotos, ou para mostrar formulários de login, objetos multimídia. Ele se tornou uma bela alternativa ao popup. Para os utilizadores do framework jquery existe uma alternativa chamada prettyPhoto. Sua utilização é muito simples, basta efetuar o download do jquery, e dos arquivos do prettyPhoto. Exemplo de como adicioná-lo na página:

<script src="js/jquery.js" type="text/javascript" charset="utf-8"></script>
<script src="js/prettyPhoto.js" type="text/javascript" charset="utf-8"></script>
<link rel="stylesheet" href="css/prettyPhoto.css" type="text/css" media="screen" title="prettyPhoto main stylesheet" charset="utf-8" />

Depois basta adicionar o atributo rel=”prettyOverlay” em sua tag que o JavaScript executa todo o processo. Exemplo:

<a href="images/fullscreen/1.jpg" rel="prettyOverlay" title="Descrição da Imagem">IMAGEM 1</a>

O jQuery é o framework javascript utilizado por cerca de 50% dos desenvolvedores hoje em dia devido as suas facilidades de uso, e se você quer começar a utilizá-lo e não quer fazer feio para seus amigos, aconselho a dar uma olhada nesse guia que foi criado por Simon Willison:

| View | Upload your own

Nesses slides você tem uma rápida introdução a tudo o que o Framework jQuery oferece:

| View | Upload your own

Recentemente, Trevor Davis postou em seu site uma solução para abrir links externos em uma nova janela com jQuery, que consiste no seguinte:

$(document).ready(function(){
	$("a[@href^='http']“).attr(’target’,'_blank’);
});

O que esse script faz é pegar todos os links da página que iniciem com http e com isso o JavaScript adiciona o atributo target com valor _blank. É uma solução muito interessante, mas a meu ver, eu utilizaria uma solução mais semântica:

$(document).ready(function(){
	$("a[@rel=external]").attr('target','_blank');
});

Minha solução pega todos os links da página que contenham o atributo rel=”external” e faça com que os mesmos abram em uma outra aba/janela. A meu ver, bem mais semântico. E você, tem alguma sugestão?

Update: A partir da versão 1.3 do jQuery, deve ser eliminado o @ do código, ficando dessa forma:

$(document).ready(function(){
	$("a[rel=external]").attr('target','_blank');
});

Enquanto eu aos 12 anos não sabia mexer no computador, esse NERD já contribui para a comunidade Open-Source mantendo códigos do Drupal e jQuery, e dando palestras por Los Angeles. Nas horas vagas ele diz que gosta de compor e tocar música contemporânea.

Via: Freak Group.

Se você utiliza o dreamweaver no seu dia-a-dia agora pode ficar feliz, pois demorou mais chegou, e agora o suporte do dreamweaver as livrarias JavaScript vieram em forma de extensões.

Todos os créditos do vídeo são do site Xtnd.us

Você pode encontrar extensões para:

• jQuery API para Dreamweaver MX-CS3
• Prototype API para Dreamweaver MX-CS3
• Mochikit API para Dreamweaver MX-CS3
• MooTools API para Dreamweaver MX-CS3
• YUI API para Dreamweaver MX-CS3
• Ext API para Dreamweaver MX-CS3

Para utilizá-las, basta ter o Extension Manager instalado no micro.

Referências

• Intenta – Extensiones de Dreamweaver para librerías Javascript.