Pinceladas da WebMovido a: XHTML, CSS, PHP e WebStandards

No site Effectize, você pode encontrar tudo, realmente tudo o que precisa saber sobre o Framework jQuery para iniciar no mundo do JavaScript.

Como referências nunca são demais, deixo aqui mais uma referência para consulta ao Framework JavaScript jQuery, só que dessa vez em formato Adobe AIR.

Para ter acesso a essa referência você deve o AIR instalado no micro, após vá até o site de Remy sharp’s e faça o download do aplicativo.

Hoje em dia você sabe que não pode sair por aí largando seu e-mail em qualquer página pois corre o risco dele cai nas mãos dos spammers, e é aí onde a dor de cabeça começa, mas no site KEVINLEARY.net existe uma solução bem simples para você proteger seus e-mails contra spam com jQuery.

Tudo o que você tem a fazer é, além do uso do Framework jQuery, é utilizar a seguinte sintaxe:

<a href="[email]pedrorogerio[at]pinceladasdaweb[dot]com[dot]br" rel="email">Pedro Rogério</a>

Depois, a mágica feita com jQuery:

$(document).ready(function(){
	$("a[rel='email']").each(function(){
		// Modifica o valor de mailto:
		var mailtoVal = $(this).attr('href');
		mailtoVal = mailtoVal.replace("[email]","mailto:");
		mailtoVal = mailtoVal.replace("[at]","@");
		mailtoVal = mailtoVal.replace("[dot]",".");
		// Gera automaticamente a tag title para os usuários
		var mailtoTitle = mailtoVal.replace("mailto:","Email: ");
		$(this).attr('title',mailtoTitle);
		// Evento onClick
		$(this).click(function(){
			window.location.href = mailtoHref;
			return false;
		});
	});
});

Vamos a explicação: O Script irá procurar por links que contenham o atributo rel=”email”, e as ações executadas serão as seguintes:

• “[email]” será substituído por mailto:
• “[at]” será substituído por @
• “[dot]” será substituído por .

Se você não quer utilizar jQuery, aqui você pode encontrar uma outra solução.

Você por um acaso já tentou alterar a aparência de algum radio button e algum checkbox com CSS e viu que isso não é possível? Pois então, com jQuery essa tarefa é muito fácil utilizando o plugin prettyCheckboxes, basta você adicionar o jQuery e o próprio plugin em sua página da seguinte forma:

<script src="js/jquery.js" type="text/javascript" charset="utf-8">
<script src="js/prettyCheckboxes.js" type="text/javascript" charset="utf-8">

E para inicializar a função, basta fazer o seguinte:

<script type="text/javascript">
$(document).ready(function(){
	$('input[type=checkbox],input[type=radio]').prettyCheckboxes();
});
</script>

Agora, todo campo input do tipo checkbox e do tipo radio em sua página será personalizado com jQuery através do plugin prettyCheckboxes. As imagens dos mesmos podem ser customizadas por CSS a partir de agora. Dúvidas em sua implementação, visite o site do desenvolvedor.

Esse é um interessante Jogo da Memória desenvolvido em PHP, CSS e jQuery, caso você queira customizar o jogo, basta efetuar o download.

O mais interessante é que se você tiver preguiça de jogar, é só dar uma olhada no código fonte para ver onde estão localizadas as imagens.

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?

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.