Usar jQuery e Scriptaculous ao mesmo tempo

Aprenda a usar jQuery e Scriptaculous ao mesmo tempo, sem nenhum problema

Um dia você acorda de manhã, liga o computador e descobre um menu, enquanto navegava, com um efeito espetacular e magnífico, ilumina o seu dia com a esperança de vê-lo enfeitando o seu blog, assim você coloca as mãos para trabalhar, adiciona códigos aqui, ali e de repente... Caramba, o menu não funciona!

Deprimido, você investiga um pouco e descobre que jQuery não funciona com Scriptaculous.
E lá se vai o entusiasmo do dia.

E sim, é um fato meio que se você usar jQuery não poderá usar Scriptaculous ou vice-versa. E mais do que um problema de incompatibilidade o que acontece é que ambos usam a mesma sintaxe para chamar as funções do script, isso faz com que ambas as bibliotecas não sabe a quem prestar atenção, pois ambas usam o mesmo modo de ler essas instruções.

No entanto, o jQuery soluciona isso desde a versão 1.0 usando uma variável na sintaxe, isso é para que não entrem em conflito as duas bibliotecas e se possa usar jQuery mesmo que se tenha Scriptaculous, Prototype ou Mootools no blog.

Para aplicar esta variável é preciso fazer uso do comando jQuery.noConflict();
Por exemplo, um código que usa jQuery seria semelhante a esta:

<script src="URL do arquiivo jQuery" type="text/javascript" />
<script src="URL de algum script que necessita jQuery" type="text/javascript" />

<script type="text/javascript">
$(document).ready(function(){
$("div").hide();
});
</script>

O que vamos fazer agora é adicionar antes das instruções do script o comando jQuery.noConflict(); e também alterar todos os $ que encontrarmos pela palavra jQuery
Por exemplo

<script src="URL do arquivo jQuery" type="text/javascript" />
<script src="URL de algum script que necessita jQuery" type="text/javascript" />
<script src="" type="text/javascript" />

<script type="text/javascript">
jQuery.noConflict();
jQuery(document).ready(function(){
jQuery("div").hide();
});
</script>

E tendo feito que jQuery pode ser usado sem problemas, mesmo quando tivermos outra biblioteca de scripts no blog.
Podemos ver um exemplo mais preciso, o de arrastar as imagens com jQuery.

<script src='http://code.jquery.com/jquery-1.8.0.min.js' type='text/javascript'/>
<script src='https://dl.dropbox.com/u/19945343/JS/jquery.easydrag.js' type='text/javascript'/>

<script type="text/javascript">
$(function(){
$("#easydrag1").easydrag();});
</script>

Esse seria o código comum que utilizariamos, mas se aplicamos o "patch" para que funcione com Scriptaculous então o código seria assim:

<script src='http://code.jquery.com/jquery-1.8.0.min.js' type='text/javascript'/>
<script src='https://dl.dropbox.com/u/19945343/JS/jquery.easydrag.js' type='text/javascript'/>

<script type='text/javascript'>
jQuery.noConflict();
jQuery(function(){
jQuery(&quot;#easydrag1&quot;).easydrag();});
</script>

E dessa forma poderiamos usar o arrastar imagens com jQuery e com Scriptaculous ao mesmo tempo.

 

Em resumo, adicionamos a função jQuery.noConflict(); e alteramos todo os $ por jQuery.

Desta forma na maioria dos casos, você pode usar jQuery e Scriptaculous ao mesmo tempo, sem ficar em dúvida a escolher um ou outro.