martes, 25 de mayo de 2010

Usar jquery y mootools juntos

En la creación de páginas web es común el uso de ciertas librerias ya hechas que nos ahorran un montón de tiempo, pero nos podemos encontrar con ciertas incompatibilidades por la utilización de librerías javascript incompatibles entre si.
Imaginemos que queremos usar la librería de imágines slimbox, y a parte algún efecto hecho con jquery. Nos encontraremos que la slimbox no funciona.
Para solucionarlo, debemos usar el método jQuery.noConflict(), guardarlo en una variable, y usar esta en vez de la funcion $.

Ejemplo de uso:

Código incompatible:
<script type="text/javascript" src="/js/mootools-yui-compressed.js"></script>
<script type="text/javascript" src="/js/jquery.js"></script>

<script type="text/javascript">
$(document).ready(init);
function init(){
$('.winblogrollcat').children('ul').hide();
$('.winblogrollcat .trigger').click(function(evt){
$(this.parentNode).children('ul').slideToggle('fast');
});
}
</script>


Código compatible:
<script type="text/javascript" src="/js/mootools-yui-compressed.js"></script>
<script type="text/javascript" src="/js/jquery.js"></script>

<script type="text/javascript">
var jq=jQuery.noConflict();
jq(document).ready(init);
function init(){
jq('.winblogrollcat').children('ul').hide();
jq('.winblogrollcat .trigger').click(function(evt){
jq(this.parentNode).children('ul').slideToggle('fast');
});
}
</script>