Jquery / mootools en joomla sin problemas

TuKa · 28 Mar 2010

hola que tal aqui les explico como agregar Jquery y mantener moootols sin morir en el intento y sin que mueran tus códigos. Es muy simple y sencillo. Primero agregamos el Framework desde google en este caso a nuestro template/index.php de nuestra plantilla.
Entre la etiqueta <head>
en las primeras lineas

Código:

<head>
<jdoc:include type="head" />
<?php JHTML::_('behavior.mootools'); ?>

Incluimos...
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>

Así nos quedaría

Código:

<head>
    <jdoc:include type="head" />
    <?php JHTML::_('behavior.mootools'); ?>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>

Agregando nuestro Codigo Jquery

En este caso escogí unas Tabs en jquery bastante simples podrán revisar su funcionamiento normal sin joomla aqui y funcionando con joomla en el modulo de comentarios

Código Jquery Original

Código:

<script type="text/javascript">
    $(document).ready(function() {
        //When page loads...
        $(".tab_content").hide(); //Hide all content
        $("ul.tabs li:first").addClass("active").show(); //Activate first tab
        $(".tab_content:first").show(); //Show first tab content
        //On Click Event
        $("ul.tabs li").click(function() {
            $("ul.tabs li").removeClass("active"); //Remove any "active" class
            $(this).addClass("active"); //Add "active" class to selected tab
            $(".tab_content").hide(); //Hide all tab content
            var activeTab = $(this).find("a").attr("href"); //Find the href attribute value to identify the active tab + content
            $(activeTab).fadeIn(); //Fade in the active ID content
            return false;
        });
    });
    </script>

Aquí viene la magia, agregaremos jQuery.noConflict(); al inicio de código y cambiaremos los símbolos $ por jQuery

así debería quedar

Código:

<script type="text/javascript">
            jQuery.noConflict();
    jQuery(document).ready(function() {
        //When page loads...
        jQuery(".tab_content").hide(); //Hide all content
        jQuery("ul.tabs li:first").addClass("active").show(); //Activate first tab
        jQuery(".tab_content:first").show(); //Show first tab content
        //On Click Event
        jQuery("ul.tabs li").click(function() {
   jQuery("ul.tabs li").removeClass("active"); //Remove any "active" class
            jQuery(this).addClass("active"); //Add "active" class to selected tab
            jQuery(".tab_content").hide(); //Hide all tab content
            var activeTab = jQuery(this).find("a").attr("href"); //Find the href attribute value to identify the active tab + content
            jQuery(activeTab).fadeIn(); //Fade in the active ID content
            return false;
        });
    });

    </script>

lo metemos entre los Head como hicimos con el primer codigo.
Lo eh probado con Jquery 1.4.2 y 1.3.2 junto con joomla 1.1.

Porque usar Jquery si mootools permite cosas similares?

Al principio quise usar mootools solamente pero no pude actualizar porque no todas las extensiones de joomla que usan mootools usan la version 1.2 y no funcionan los codigos para 1.1 con 1.2 y viceversa.

Buscando ejemplos de mootools encontre mas para jquery, mas gente, o al menos las busquedas que hacia en google para lo que necesitaba, siempre aparecia mas ejemplos en Jquery.

Por ultimo decidi quedarme con mootools 1.1 para Rocksearch que es el unico que uso, y jquery para mis demas codigos. Espero les sirva

OJO: no coloque el CSS de las Tabs, ya que era solo un ejemplo para el codigo jquery, si quieren seguir con las tabs Tabs Jquery

Fuentes
Jquery no ConflictJquery no Conflict
Tabs Jquery

algapa · 10 Jun 2010

EXCELENTE APORTE TUKA, ESTABA 2 LARGOS DÍAS TRATANDO DE IMPLEMENTAR UN SIMPLE SLIDE CON JQUERY EN JOOMLA, ME FUNCIONABA TODO OK, EN TODOS LOS NAVEGADORES, PERO EN EL MALDITO INTERNET EXPLORER EN LA BARRA DE ESTADO, APARECÍAN ADVERTENCIAS DE ERROR EN EL CÓDIGO JAVASCRIPT DEL JQUERY .... ERA DESESPERANTE, PUES TODO ESTABA OK

DESPUÉS DE BUSCAR Y ENCONTRARME CON MUCHAS SONSERAS QUE PUBLICAN Y Q NO SON DE UTILIDAD, DOY CON ESTE POST TUYO ... EN EFECTO EL MOOTOOLS Y JQUERY EN JOOMLA TENIAN CONFLICTOS, Y ESTE ARTILUGIO DE USAR EL PREFIJO """jQuery""" CON LA FUNCIÓN """ noConflict()"""" .... RESOLVIÓ EL PROBLEMA QUE TENÍAN MOOTOOLS Y JQUERY EN JOOMLA .... MUCHAS GRACIAS, A VECES SE NOS PRESENTAN PROBLEMAS QUE LLEGAMOS A SOLUCIONAR ... MÁS NUNCA COMPARTIMOS ESA EXPERIENCIA QUE PARA OTROS ES A VECES ANGUSTIANTE ....

AHHHHH, TAMBIÉN PROBABA USAR EL EFECTO SLIDE CON EL MISMO MOOTOOLS, TOTAL JQUERY = MOOTOOLS, O PARECIDO ... PERO LA VERSIÓN DE MOOTOOLS CON LA QUE TRABAJA JOOMLA, NO ES LA APROPIADA PARA TRABAJAR EL TIPO DE EFECTO Q NECESITABA :S

EN FIN, SOLUCIONÉ MI PROBLEMA, TE ESTOY MUY AGRADECIDO ....

SALUDOS DESDE PERÚ

Jquery / mootools en joomla sin problemas

TuKa

Becerro

algapa

Becerro