Cuando uno comienza un proyecto, se suele elegir el mejor lenguaje para su desarrollo y una de las desiciones es elegir el framework JS con que se trabajará, y casarse con éste. Ahora vengo a conocer que ésta desición no tiene que ser tan drástica, ya que jQuery incluye una funcionalidad que permite que se utilice junto con otras librerías, evitando el conflicto de interpretación entre diferentes formas de escribir javascript que conforma cada framework; en esta ocasión mostraré los diferentes usos de noConflict();

Supongamos que tenemos un simple efecto de mostrar/esconder el contenido al activar un link, lo que se llama SlideToggle. El HTML sería el siguiente:

<a href="#" class="boton">Muestra/Esconde</a>
<div class="caja">
     <p>Vivamus auctor leo vel dui...</p>
</div>

En Mootools el código para hacerlo funcionar se compone de la siguiente manera:

window.addEvent('domready', function() {
     new Fx.Slide('mooMuestra').hide()
     $('mooEsconde').addEvent('click', function(e){
          e.stop();
          new Fx.Slide('mooMuestra').toggle();
     });
});

Ver ejemplo con Mootools

Ya con jQuery, lo mismo se realiza de la siguiente manera:

$().ready(function(){
     $('#jMuestra').hide();
     $('#jEsconde').click(function(){
          $('#jMuestra').slideToggle();
     });
});

Ver ejemplo con jQuery

Ahora combinaremos ambos métodos en un mismo archivo, el cual estará linkeando las librerías de Mootools 1.2.0 y jQuery 1.3.1, y se realizará SlideToggle cada una con su método. Para eso, se cambiará la manera con el cual jQuery llama a sus selectores (que es una de las principales razones de conflicto; el uso resumido con $). Primero, se linkea el framework de jQuery y luego el de Mootools. Se escriben los eventos con los cuales se realizan los SlideToggle, pero con un leve cambio en jQuery. En vez de utilizar:

$('selector').slideToggle();

se cambiará a:

jQuery.noConflict();
jQuery('selector').slideToggle();

Esto se repetirá con cada selector en que antes utilizábamos $. Finalmente reciclando el mismo código mostrado anteriormente, quedaría:

jQuery.noConflict();
jQuery().ready(function(){
     jQuery('#jMuestra').hide();
     jQuery('#jEsconde').click(function(){
          jQuery('#jMuestra').slideToggle();
     });
});

Ver ejemplo integrando jQuery+Mootools

Otra manera es creando una variable con una nueva manera de escribir $, por ejemplo, $jQ:

var $jQ = jQuery.noConflict();
$jQ().ready(function(){
     $jQ('#jMuestra').hide();
     $jQ('#jEsconde').click(function(){
          $jQ('#jMuestra').slideToggle();
     });
});

Ver ejemplo 2 integrando jQuery+Mootools

Por suerte hacer estos tipos de menúes es bastante fácil: basta con tener claro cómo funcionan los menúes con listas e ir anidando unas dentro de otras; incluso sólo con CSS es suficiente para hacerla funcionar, pero lamentablemente el peor browser de la historia universal (IE6) no soporta pseudo-classes en selectores que no sean links (<a>). Así que lo mejor y que más soporte cross-browser nos entrega es utilizar Javascript en este proceso. Y qué mejor que utilizar jQuery ó Mootools, 2 de los frameworks con los que me gusta jugar.

En este artículo veremos el proceso para crear un menú con tabs y cómo hacerlo funcionar mediante CSS y con la ayuda de Javascript.

Como mencionaba, un menú con tabs se compone básicamente de listas anidadas sobre otras listas. El HTML sería el siguiente:

<ul id="menu">
  <li><a href="#">Uno</a></li>
  <li class="cabeza"><a href="#">Dos</a>
     <ul>
        <li><a href="#">Dos.Uno</a></li>
        <li><a href="#">Dos.Dos</a></li>
        <li><a href="#">Dos.Tres</a></li>
     </ul>
  </li>
  <li><a href="#">Tres</a></li>
  <li class="cabeza"><a href="#">Cuatro</a>
     <ul>
        <li><a href="#">Cuatro.Uno</a></li>
        <li><a href="#">Cuatro.Dos</a></li>
     </ul>
  </li>
</ul>

Ver ejemplo del HTML

Si el mundo fuera hermoso y no existiera IE6, nos bastaría con un poco de CSS y selectores avanzados de atributos para hacerlo funcionar:

ul {
  list-style: none;
}
  ul li {
    float: left;
    width: 100px;
    text-align: center;
  }
    li.cabeza>ul {
      display: none;
    }
      li.cabeza:hover>ul {
        display: block;
      }

Ver ejemplo con CSS

Para mejorar el manejo del despliegue de los subniveles, le coloqué una class="cabeza" a cada elemento de lista (<li>) que contenga cada nuevo subnivel. Ahora es más fácil diferenciarlas con CSS ó Javascript, como mostraré a continuación. Primero, con jQuery:

$(document).ready(function(){
  // primero escondemos todos los subniveles
  $('li.cabeza > ul').hide();
  // luego le agregamos el evento de mouseover y mouseout mediante hover de jQuery
  $('li.cabeza').hover(
    function() {
      $('ul', this).show();
    },
    function() {
      $('ul', this).hide();
  }); });

Ver ejemplo jQuery

Muy simple. Ahora, con Mootools (1.11):

window.addEvent('domready', function() { 
  // creamos una variable 'list' que será el selector <li> con class="cabeza", ya que la usaremos más de una vez.
  var list = $$('li.cabeza'); 
  // luego escondemos cada <ul> que esté contenido dentro de li.cabeza mediante display: none
  list.getElement('ul').setStyle('display', 'none');
  // ahora agregamos los eventos de mouseenter y mouseout respectivos
  list.each(function(el) {
    el.addEvent('mouseenter', function(){
      $(this).getElement('ul').setStyle('display', 'block');
    });
    el.addEvent('mouseleave', function(){
      $(this).getElement('ul').setStyle('display', 'none');
    });
  }); 
});

Ver ejemplo Mootools

Finalmente si usas un browser bueno, cualquier de los 3 métodos funcionará igual; viene de ti implementarlo de la mejor forma para que tus usuarios que aún usen IE6 para visitar tu sitio puedan disfrutar de una buena navegación y del contenido que ofrece.

$(elemento)
     .effects({duration: 1000, transition: Fx.Transitions.Quad.easeInOut})
     .start({
          ’width’: 800,
          ’height’: 410
     })
     .chain(function(){
          this.start({
               ’width’: 200,
               ’height’: 600
          })
     });

Ver ejemplo 1

En este ejemplo estoy modificando el tamaño de un #contenedor que tiene dentro una imagen del lápiz posicionado absolutamente; con ello logro que a medida que varían las dimensiones del #contenedor mediante Javascript, simula el movimiento del lápiz con física de movimiento incluída (otra gran gracia de Mootools). Dejé el borde del #contenedor visible para que se aprecie el cambio de tamaño.

Y el resto va por cuenta de la creatividad que le quieran dar, o mejor dicho, encadenar. Pueden realizar muchas acciones y como mencionaba, incluir pausas en lapsus de milisegundos antes de desencadenar la siguiente función, como en el siguiente ejemplo:

$(elemento)
     .effects({duration: 3000, transition: Fx.Transitions.Elastic.easeInOut})
     .start({
          ’width’: 600,
          height’: 210
     }).chain(function(){
          this.start({
               ’opacity’: 0.5
          })
     }).chain(function(){
          this.start({
               ’opacity’: 1
          })
     }).chain(function(){
          this.start.delay(500, this, {
               ’height’: 400,
               ’width’: 200
          })
     }).chain(function() {
          this.start({
               ’opacity’: 0.5,
               ’width’: 100,
               ’height’: 100
          });
     }).chain(function() {
          this.start.delay(1000, this, {
               ’opacity’: 1,
               ’width’: 1500,
               ’height’: 600
          })
     }).chain(function() {
          this.start({
               ’width’: 100,
               ’height’: 100
          })
     });

Ver ejemplo 2

Dejo claro que estoy utilizando la versión 1.11 de Mootools, que aún está mejor documentada que la más reciente 1.2 y con más ejemplos disponibles.

Links:

• Mootools Demos – Chain

Ver ejemplo

En esta ocasión utilicé bastantes más capas que en el ejemplo original (6 en total… un poco exagerado ya que los PNG‘s pesan bastante), pero el HTML fue construído de igual manera:

<div id="nube">
   <div id="montanas">
      <div id="ciudad">
         <div id="personas">
            <div id="persona1">
               <img src="imgs/persona1.png" width="280" height="280">
               <p>Nulla facilisi. In vel sem…</p>
            </div>
            <div id="persona2">
               <img src="imgs/persona2.png" width="280" height="280">
               <p>Aliquam et nisl vel ligula…</p>
            </div>
            <div id="persona3">
               <img src="imgs/persona3.png" width="280" height="280">
               <p>Nunc auctor bibendum eros….</p>
            </div>
         </div>
         <div id="enredadera">
            <div id="hojas">
            </div>
         </div>
      </div>
   </div>
</div>

Y el CSS:

#nube, #montanas, #ciudad, #enredadera, #hojas, #personas {
   position: absolute;
   height: 100%;
   width: 200%;
   left: -150px;
}

Un detalle importante fue ampliar bastante el ancho de todas las cajas para que puedan soportar un desplazamiento horizontal contínuo (cuidando siempre que sea en porcentaje; así se conserva el efecto Parallax). Cada imagen es aplicada como background y posicionada horizontalmente en porcentaje y verticalmente de acuerdo a su ubicación (top ó bottom).

#nube {
   background: url(../imgs/nube.png) 20% top repeat-x;
}
#montanas {
   background: url(../imgs/montanas.png) 10% bottom repeat-x;
}
#ciudad {
   background: url(../imgs/ciudad.png) 30% bottom repeat-x;
}
#enredadera {
   background: url(../imgs/enredadera.png) 40% top repeat-x;
}
#hojas {
   background: url(../imgs/hojas.png) 50% bottom repeat-x;
}

Si modifican el ancho de la ventana verán que se conserva el efecto Parallax, salvo la capa de personas la que pretendo que sea contenido (dado el caso que se requiera así).

Ahora, la magia se aplica a través de Mootools. El efecto de desplazamiento está dentro del .js que incluí al bajar el archivo y se llama FX.Style. Con él haremos que mediante un evento de click en cada botón, cada <div> se desplace en diferentes medidas de su margin-left. O sea, la primera capa #nubes se moverá -100px a la izquierda, luego #montanas lo harán -200px y así sucesivamente, logrando un efecto de profundidad en cada capa ya que se moverán en diferentes medidas:

$(‘btn_uno’).addEvent(‘click’, function(){
   nube.start({
      ’margin-left’: 0
   });
   montanas.start({
      ’margin-left’: 0
   });
   ciudad.start({
      ’margin-left’: 0
   });
   enredadera.start({
      ’margin-left’: 0
   });
   hojas.start({
      ’margin-left’: 0
   });
   personas.start({
      ’margin-left’: 0
   });
});
$(‘btn_dos’).addEvent(‘click’, function(){
   nube.start({
      ’margin-left’: -100
   });
   montanas.start({
      ’margin-left’: -200
   });
   ciudad.start({
      ’margin-left’: -300
   });
   enredadera.start({
      ’margin-left’: -400
   });
   hojas.start({
      ’margin-left’: -1000
   });
   personas.start({
      ’margin-left’: -500
   });
});
$(‘btn_tres’).addEvent(‘click’, function(){
   nube.start({
      ’margin-left’: -500
   });
   montanas.start({
      ’margin-left’: -600
   });
   ciudad.start({
      ’margin-left’: -700
   });
   enredadera.start({
      ’margin-left’: -800
   });
   hojas.start({
      ’margin-left’: -1500
   });
   personas.start({
      ’margin-left’: -900
   });
});

Pueden ver el código completo de cada elemento:

• Código CSS
• Código JS

Ver ejemplo final

PD: El movimiento en Safari 3 anda perfecto, muy suave; ya en Firefox 2 y 3 se pega algunos saltos, y en Opera 9.2 anda mas cortado aún… Quizás sea mi computador, espero sus impresiones sobre esto.

<a href="" id="comienza">Rescata la info</a>
<div id="traelo_aqui">
     <p>Trae aqu&iacute; la info</p>
</div>

Básicamente es un botón que al ser presionado cargará la info desde una página determinada por nosotros mediante JS hasta el div que definimos. Ahora, mediante Mootools crearemos el evento:

$(‘boton’).addEvent(‘click’, function(e) {
     e = new Event(e).stop();
     var url = "http://www.csslab.cl/ejemplos/ajax_mootools/lipsum.html";
     $(‘traelo_aqui’).empty().addClass(‘cargando’);
          new Ajax(url, {
          method: ‘get’,
          update: $(‘traelo_aqui’),
          onComplete: function() {
               $(‘traelo_aqui’).removeClass(‘cargando’)
          }
     }).request();
});

Al elemento con id="boton" (o sea, <a id="boton">) le agregamos un evento de ‘click’ (addEvent). De ahí, comenzamos una función que a través del método ‘get’, trae lo que esté en la variable url (var url) y refresca lo que esté adentro del id="traelo_aqui" (o sea <div id="traelo_aqui">). Además, agregaremos una class="cargando" al contenedor mientras se está rescatando la información por si se demora mucho (addClass(‘cargando’);) y cuando termine todo, sacaremos esa class (removeClass). Básicamente esa es la explicación.

Ver ejemplo

Para esto, con Mootools es extremadamente fácil. Primero, creamos el evento inicial que gatillará la acción cuando los elementos del HTML (DOM) estén cargados. Luego, una codicional (if/else) que me dirá si el browser es IE6, ejecuta tal acción:

window.addEvent(‘domready’, function(){
     if(window.ie6){
          // haz algo aquí
     }
});

Ver ejemplo

A seguir, una lista de las posibilidades de browsers a ser detectables:

• window: cualquier browser.
• window.ie: cualquier Internet Explorer.
• window.ie6: sólo IE6.
• window.ie7: sólo IE7.
• window.gecko: Mozilla Firefox u otro browser que use gecko (Netscape 6+, Flock, Camino, Galeon, Epiphany).
• window.webkit: Apple Safari u otro que use Webkit (iCab, Konqueror, Omniweb, Shiira, Sunrise).
• window.webkit419: Apple Safari 2.
• window.webkit420: Apple Safari 3.
• window.opera: sólo Opera.

Link

• Mootools Docs: Core

Comenzamos con el marcado HTML. Primero, un <div class="overlay"></div> el que será el fondo semi-transparente que cubrirá la página entera, y albergará la ventana del mensaje. Luego, un <div class="modal"> que contendrá el mensaje o contenido de nuestra ventana modal. Estas 2 classes, .overlay y .modal, estarán escondidas desde un principio (display: none;) y serán gatilladas desde algún link (display: block;). Después de ellas, el contenido del resto del sitio web.

<div id="fade" class="overlay"></div>
<div id="light" class="modal">
     <p>Lorem ipsum dolor sit…..</p>
</div>
<p>Texto del sitio web. Con un <a href="">link</a> abriremos la ventana.</p>

Nada de eso nos sirve sin un correcto uso de CSS. Para la base semi-transparente le damos opacidad a través del método cross-browser:

.overlay{
     display: none;
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background: #000;
     z-index:1001;
     opacity:.75;
     -moz-opacity: 0.75;
     filter: alpha(opacity=75);
}

Y la ventana modal del contenido mismo:

.modal {
     display: none;
     position: absolute;
     top: 25%;
     left: 25%;
     width: 50%;
     height: 50%;
     padding: 16px;
     background: #fff;
     color: #333;
     z-index:1002;
     overflow: auto;
}

Ver ejemplo sólo con CSS

Ahora, lo echamos a andar. A ambos div‘s debemos darle id‘s únicos, los que nos ayudarán a identificar los elementos que serán mostrados vía Javascript. La orden para ejecutarlos es en Javascript puro:

document.getElementById(‘light’).style.display=’block’;
document.getElementById(‘fade’).style.display=’block’

Y a través de Mootools:

$(‘light’).setStyle(‘display’, ‘block’);
$(‘fade’).setStyle(‘display’, ‘block’);

Lo que dice ahí, en castellano universal es: toma los elementos con el id light y fade, y agrégales estilo display: block; a cada uno. O sea, los hará aparecer desde display: none (oculto) a display: block; (visible).

Ver ejemplo funcionando con JS

Links

• Create a Lightbox effect only with CSS – no javascript needed

Pero antes, me interesa comenzar con definir framework. Según mi instinto (y ayuda de Wikipedia), los frameworks Javascript (pueden ser de otros tipos) son una arquitectura que modela las relaciones del lenguaje Javascript. Provee una estructura y principalmente una metodología de trabajo que ayuda a ordenar una sintaxis de trabajo. Son diseñados principalmente para facilitar el desarrollo de sitios y aplicaciones web. Cada framework tiene su orden y estructuras definidos, y no pueden ser mezclados, ya que las reglas son diferentes entre ellos (imagínense sino jugar rugby con reglas de básquetbol… ¡un lío!).

En este artículo, crearemos unos simples Eventos donde manipularemos Elementos vía Javascript.

Cargando

Para comenzar a trabajar con Mootools debemos primero llamar la librería, la que puede ser descargada desde su sitio web ofreciéndonos mucha flexibilidad para bajar una versión optimizada a nuestros requerimientos. Por este detalle, Mootools puede intimidar, ya que quizás algunos Eventos o Efectos no funcionen a la primera (y frustren a quienes esperan prontos resultados), debido a que no han bajado el material necesario para ello. Así, Mootools puede ser considerado como un framework avanzado, pero prefiero verlo como versátil y liviano. Basta algo de estudio para entender bien y utilizar lo justo y necesario para nuestras necesidades. Resumiendo, para cagarlo se utiliza:

<script type="text/javascript" src="ruta_a/mootools.js"></script>

Luego, comenzaremos a escribir lo que queremos realizar vía Javascript. Para comenzar, debemos crear un Evento que nos diga cuando comenzar a realizar lo que queremos.

window.addEvent(‘domready’, function() {
     // nuestro código
});

Mootools nos ofrece más de una opción para comenzar a escribir código:

• domready: se ejecuta cuando todos los elementos de la página están listos, pero no espera por las imágenes. Gran aporte de Mootools.
• load: se ejecuta cuando toda la página (inclusive imágenes) se carga, lo que se hacía usualmente con Javascript puro. En algunos casos se demora bastante más.

Escribiendo

Bien, estamos listos para programar algo con ayuda de Mootools. Como mencioné, crearemos un Evento donde manipularemos aspectos de alguna etiqueta (Elemento). Primero, lo que queremos realizar:

$(‘enlace’).addClass(‘grandote’);

Ahora diseccionaremos esto: al elemento que tenga un id="enlace", agrega una class que se llame .grandote (que aumentará el tamaño de la tipografía del enlace).

$ todos los elementos
(‘enlace’) que tengan el id="enlace"
.addClass agrega la class
(‘grandote’) .grandote

Así de simple. Claro que tienen que tener definida la class .grandote en su hoja de estilos para que vean el resultado.

Ver ejemplo 1

Ojalá puedan ver el source desde Firefox con el plugin Web Developer o Firebug, y podrán apreciar la diferencia entre el código fuente y el código generado.

Ahora, si queremos alcanzar más de un id:

$$(['nombre:id', 'otro_id']).addClass(‘grandote’);

Ver ejemplo 2

Notaron como cambió la invocación al Elemento? Cuando es más de uno, se usa $$ y se agrupan entre corchetes []. Pequeños detalles que diferencian los Frameworks.

Se pueden hacer muchas cosas más manipulando Elementos o Selectores con Mootools, como por ejemplo:

• $(‘elemento’).remove(); remueve el elemento, literalmente.
• $(‘elemento’).removeClass(); remieve la class que tenga ese elemento.
• $(‘elemento’).setStyle(); agrega estilos CSS que definamos.
• $(‘elemento’).setOpacity(0.4); le da opacidad de 40%;
• $(‘elemento’).setText(‘Lorem Ipsum’); le inyecta Lorem Ipsum dentro de un elemento, por ejemplo <p></p>
• $(‘elemento’).empty(); vacía un elemento.

Siendo fiel con el título de este artículo, esta fue una introducción. La documentación de Mootools es completa pero lamentablemente pobre de aplicaciones reales. En el foro pueden encontrar más variedad, pero aún no es bastante satisfactorio.

Próximamente, artículo dedicado a JQuery.

Ver ejemplo final

Bueno, la idea es mostrar cómo se hace para que uds. puedan replicarlo según sus necesidades. Comenzaré por el HTML que se constituye de 3 partes: el menú (#menu, que lo pueden hacer cómo se les dé la gana, lo importante son los id‘s de los links), el <div> que albergará las secciones (#dentro, que están posicionadas absolutamente) y el contenedor que funciona como una ventana que esconde el resto (#envoltura esconde con overflow: hidden;):

<ul id="menu">
     <li><a id="link1" href="#">Contenido 1</a></li>
     <li><a id="link2" href="#">Contenido 2</a></li>
     <li><a id="link3" href="#">Contenido 3</a></li>
</ul>
<div id="envoltura">
     <div id="dentro">
          <div id="contenido1">
               <h1>1</h1>
          </div>
          <div id="contenido2">
               <h1>2</h1>
          </div>
          <div id="contenido3">
               <h1>3</h1>
          </div>
     </div>
</div>

Ya el CSS es lo que ayuda a la magia (obviaré el estilo del #menu):

#envoltura {
     overflow: hidden;
     height: 300px;
     width: 600px;
     position: relative;
}
#dentro {
     width: 1600px;
     height: 1600px;
     background: url(imgs/fondo.jpg) center center no-repeat;
     position: relative;
}
h1 {
     color: #fff;
     font-size: 200px;
}
#contenido1 {
     position: absolute;
     left: 250px;
     top: 80px;
}
#contenido2 {
     position: absolute;
     left: 800px;
     top: 1200px;
}
#contenido3 {
     position: absolute;
     left: 900px;
     top: 550px;
}

Y finalmente lo que hace la magia, el JS. Antes que todo se linkea mootools.js, y luego el <script> que podemos configurar a nuestro gusto:

var scroll = new Fx.Scroll(‘envoltura’, {
     // envoltura es el id que funciona como ventana
     wait: false,
     duration: 1000,
     // duration es la duración de las transiciones en milisegundos
     offset: {‘x’: -230, ‘y’: -20},
     // offset es la distancia del eje X Y que mostrará los elementos posicionados
     transition: Fx.Transitions.Back.easeInOut
     // transition es el tipo de transición que tendrá, ver ejemplos en mootools.net
});
$(‘link1′).addEvent(‘click’, function(event) {
     // aqui ya comenzamos a darle cada id del <a>…
     event = new Event(event).stop();
     scroll.toElement(‘contenido1′);
     // …hasta qué id tiene que llegar.
});
$(‘link2′).addEvent(‘click’, function(event) {
     event = new Event(event).stop();
     scroll.toElement(‘contenido2′);
});
$(‘link3′).addEvent(‘click’, function(event) {
     event = new Event(event).stop();
     scroll.toElement(‘contenido3′);
});

Bueno, nuevamente les dejo el link al ejemplo final:

Ver ejemplo final