Utilizar jQuery con Typo3

Por defecto Typo3 tiene instaladas las librerias javascript de Mootools y Prototype y si queremos utilizar jQuery nos encontraremos con el problema del símbolo $, que ya no será accesible por jQuery. Así que después de buscar una solución he encontrado una bastante sencilla.

En el siguiente código podemos ver los archivos insertados por Typo3 en la plantilla y las líneas enlazando al API de Google donde se alojan las librerías jQuery y jQueryUI.

A continuación añadimos un script en el que configuraremos un nuevo símbolo para nuestras funciones jQuery:

<script src="fileadmin/templates/scripts/prototype.js" type="text/javascript"></script>
<script src="fileadmin/templates/scripts/lightbox.js" type="text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js" type="text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.11/jquery-ui.min.js" type="text/javascript"></script>

En el ejemplo añadimos a una capa el efecto slide de la librería jQueryUI.

    var j=jQuery.noConflict();
    j(function() {
        j( "#slideGracias" ).effect(
            'slide',
            {  direction: "up",
                distance: "-283" ,
	        mode: "show"
            },
            1000
        );
    }

El truco está en la línea var j=jQuery.noConflict(). Esto hace que podamos utilizar una j en lugar del símbolo $ típico de jQuery. De esta forma no interferirá con las otras librerías.

About Post Author

pablocia

Lo mejor para observar la corriente es no estar en ella, así que toma distancia, piensa y verás la solución. <a href="https://es-es.facebook.com/visualxtudio">Facebook</a>
Happy
Happy
0 %
Sad
Sad
0 %
Excited
Excited
0 %
Sleepy
Sleepy
0 %
Angry
Angry
0 %
Surprise
Surprise
0 %

Average Rating

5 Star
0%
4 Star
0%
3 Star
0%
2 Star
0%
1 Star
0%

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Entrada anterior Montar Servidor web Apache +Router Speedtouch 580
Entrada siguiente Formulario de contacto desplegable con jQuery y Typo3