Calificación:
  • 0 voto(s) - 0 Media
  • 1
  • 2
  • 3
  • 4
  • 5
[TUTORIAL] Jquery / mootools en joomla sin problemas
#1
hey gente, despues de un tiempo desaparecido, aveces me entra nostalgia y me aburro de escribir XD regreso y 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.

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

Espero les haya sido de ayuda ya andare mas seguido por aqui
Fuentes

Jquery no ConflictJ
Tabs Jquery
WWW
#2
Interesante cítrico Sonrisa Muy interesante.

Agradezco q compartas la técnica q seguro a más de un usuario le vendrá de perlas.
[Imagen: firmabp.jpg][Imagen: mineenlineaentregadispo.jpg]
WWW
#3
Estupendo aporte Cítrico. Espero que le sea util a mas de uno Guiño
WWW
#4
relamente es muy simple sin embargo la información es casi nula, así que ay esta.
por aquí andaré con otros que tengo Saludos
WWW
#5
Estupendo, cítrico. Bienvenido de nuevo y esperamos tus aportes Guiño
WWW
#6
Gracias Cítrico... Te echábamos de menos, eh?? jajaja

Muy buen aporte Guiño
WWW


Posibles temas similares...
Tema Autor Respuestas Vistas Último mensaje
Información Joomla Tema Gratuito Asistente Transportes 9 133 02-03-2018, 05:58 PM
Último mensaje: ArtuGar
  descarga joomla jhoancito123 4 599 24-04-2016, 01:10 AM
Último mensaje: onspot
  Necesito un buen plugin para conectar mi Joomla a Google Analytics avdarie 4 567 09-02-2016, 11:47 AM
Último mensaje: avdarie
  [TUTORIAL] 2 dominios (o subdominios), 2 lenguajes y 1 instalación gerardo33 4 577 03-10-2015, 05:10 AM
Último mensaje: juanjj
  Extensión Joomla para conectar bases de datos en MySQL ArtuGar 7 1,704 28-09-2015, 06:28 AM
Último mensaje: garcon
  [Consulta]Joomla en Dispositivos moviles andrex.nava 14 2,279 28-04-2015, 09:22 PM
Último mensaje: AbaddonOrmuz
Bug [Ayuda] Algún plugin para instalar galerías de fotos en joomla? TaloBV 5 1,011 21-11-2014, 09:33 AM
Último mensaje: jeyzer
Bug [Problema] Al insertar videos de youtube en joomla TaloBV 5 1,092 21-11-2014, 09:32 AM
Último mensaje: jeyzer
  ¿Foros integrados en joomla? kirbypc2 13 2,509 21-11-2014, 09:20 AM
Último mensaje: jeyzer
  registro con joomla dormio 3 910 21-11-2014, 09:17 AM
Último mensaje: jeyzer



Usuarios navegando en este tema: 1 invitado(s)