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>
Suscribirse a:
Enviar comentarios (Atom)
2 comentarios:
ojala esto pueda solucionar mi problema, ya que actualmente tengo una plantilla en Joomla que usar Mootools para ciertas cosas y tengo unos plugin en jQuery
muchas gracias por el articulo, me ha funcionado de lujo...
Publicar un comentario