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

Já viram o novo site da jQuery?

Update: Parece que ouviram a comunidade desenvolvedora e removeram o Rock Stars do site

Aqueles que buscam referências para consulta rápida sobre o Framework jQuery podem ficar despreocupados, pois no site charupload você pode encontrar a referência completa em formato .chm para futuras consultas offline. Você terá acesso também a documentação de alguns plugins, como também ao core do jQuery e a jQuery UI.

Para pegar as coordenadas do mouse com jQuery, é muito simples, por exemplo, o script abaixo nos mostra as coordenadas de onde o usuário clicou na página nos Eixos x e Y.

$("html").click(function(e){ alert('X: ' + e.pageX +', Y:'+ e.pageY); });

Veja esse exemplo e teste o script. Via Worldtechies.

Está procurando dar mais interatividade a sua aplicação? Imagine então o usuário interajindo com sua aplicação através so teclado. Agora o imagine deletando dados gravados com um simples alt+d. Então você precisa conhecer o plugin jQuery Hotkeys.

Através da captura de combinações de teclas, você pode simplesmente fazer tudo aquilo que quiser, basta utilizar a criatividade. Veja só um exemplo do script em ação.

Mais informações

• JS Hotkeys

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>