Este post podia também chamar-se “Substituição do javascript Script.aculo.us pelo Moo.fx” uma vez que é isso que eu tenho tentado fazer nestes 2 últimos dias e que pretendo terminar amanhã (o tempo disponÃvel não tem sido muito…).
Resumidamente, deixarão de existir os efeitos “eye-candy” de expandir/encolher layers e conteúdo (como o que continha a lista dos artigos actualizados no meu blog), e os meus comentários deixarão de ser instantâneos (ajax-powered).
Esta alteração tem como objectivo melhorar a rapidez/performance do site uma vez que o javascript do script.aculo.us é enorme (prototype.s + effects.js = 80kb) quando comparado com o Moo.fx (6kb).
Como poderão ver ao fundo desta página decidi implementar um menu horizontal (um género de tabs) que mais não é do que uma lista não ordenada (ul) e formatada com css, cujas opções ao serem clickadas vão buscar a informação pretendida a um outro ficheiro e o mostram de imediato através de ajax. A ideia surgiu-me depois de ler o artigo do Valerio onde podem encontrar tudo explicado. Como a implementação era simples pu-la em prática.
Aqui fica o código principal com algumas explicações:
Ou seja, ao clickarem no link são executadas duas funções: uma é responsável pelo Ãcone animado de “loading” (função Apagar) e a outra (a função ajax) vai buscar o conteúdo ao ficheiro “pages.php” e mostra-o no layer “ajaxdiv”.
Agora se alguém me conseguir ajudar a criar com o pack de .js Moo.fx uns comentários ajax faça o favor de comentar 
- no meu sistema de tabs, quando escolhia uma opção 1 e depois escolhia uma opção 2, não conseguia voltar à opção 1 (o conteúdo não aparecia);
- no caso de o javascript estar desactivado, ao clicar numa das tabs o browser abria o ficheiro correspondente (updated.php, por exemplo) que é um ficheiro sem formatação de estilo e estrutura (daà que o output fosse uma página branca apenas com os últimos posts actualizados);
- Não consegui resolver o problema anterior com o código < ?php if($_GET["ajax"] != "true"){ get_header() } ?>
- São 8kb de código que não permitem nenhum efeito visual (ora, todos nós gostamos de ver algo bonito)
E optando pelo Moo.fx estarei a sacrificar a usabilidade? Não acho. Quem não tiver o javascript activo consegue aceder a todos os conteúdos de igual modo, embora estes sejam apresentados de forma estética diferente.
Vitor,
Antes de mais deixa-me dizer que não estou familiarizado nem com o moo.fx (nunca o usei) nem com o prototype. Escrevo sempre o meu código para não irem coisas a mais para o browser. Por isso não te posso ajudar nisso dos comentários. :-\
E já agora, pergunto-te também qual a razão principal que te leva a usares Ajax para esta(s) funcionalidade(s) que falas? Não estou a dizer que não devas usar, só quero que penses no “porquê”.
Outra coisa.. só uma dica. é preferÃvel teres no href o link
javascript:void(0)do que o habitual #, senão o IE vai saltar para o topo da página.E deixo-te um link que deixo a toda a gente que me fala de Ajax:
http://www.domscripting.com/blog/display/41
E desculpa ser tão “esquisito”, é só para tentar ajudar. Estou a gostar da evolução do teu site. Keep up the good work.
Vou ser breve na resposta porque a placa 3G muito está lenta… Talvez ao final da tarde corrija pequenas gralhas no post e me alongue na resposta.
Essencialmente o ajax nas tabs permite que a página inicial do meu site seja mais rápida, carregando apenas o último post feito (1 query) e os links do del.icio.us. Torna-se assim mais rápido porque evito desse modo que 4 outras queries/chamadas à base de dados sejam feitas (páginas, posts comentados, etc.).
Boa dica essa do void(0)
tkx
Vejamos se os comentários não-ajax estão a funcionar.
Mas o “javascript:void(0)” já tira a acessibilidade dos links para browsers não-ajax e naum permite a indexação do Google achar os links…