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
<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
http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js</a>">
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
<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
<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
