Una de las mayores críticas a las aplicaciones web en AJAX es acerca de sus limitaciones de accesibilidad y usabilidad. Los usuarios tienen ya vicios y costumbres y no entiende de AJAX, ello solo quieren que si le dan al botón back funcione como siempre y valla a la página anterior, y que si marcan una página en sus favoritos que luego cuando vuelva valla a la pantalla que el marcó y no a la página principal que es lo que suele suceder con las páginas web en AJAX.

Digitarald.de ha desarrollado una solución HistoryManager - The Ajax Back-Button (v1.0) para aquellos que usan Mootools   Pueden probar sus ejemplos, y por mi parte yo lo he implementado en www.equipo24.com

Como también suelo desarrollar con Prototype he reescrito el código para que sea compatible con dicha librería, la forma de uso es muy similar al original. Espero que os sea útil.

Descargar prototype.historyManager.js

Introducción

e24TabMenu es un plugin de scriptaculous que permite hacer un tab menú que al clicar sobre sus pestañas se expanden hacia abajo.

Demos

• Con todas las pestañas ocultas
• Con una pestaña expandida por defecto

¿Cómo utilizarlo?

Incluya Prototype 1.6.0.2 y Scriptaculous 1.8.1 dentro del header del código HTML de la página. Incluya e24TabMenu después de ambos:

<script type='text/javascript' src='js/prototype.js'></script>
<script type='text/javascript' src='/js/scriptaculous.js?load=effects'></script>
<script type='text/javascript' src='js/e24tabmenu.js'></script>

Ahora escriba el código HTML necesario para definir el menú. Necesitaremos una capa contenedora (“menu” en el ejemplo) y dentro de la capa contenedora pondremos una capa para cada elemento del menú donde podremos añadir el contenido correspondiente. A continuación añada un enlace (etiqueta “A”) para cada pestaña del menú, el atributo “rel” debe tener como valor e24menuitem[id_de_la_capa_del_contenido] donde id_de_la_capa_del_contenido es el nombre de la capa que contiene el contenido del elemento de menú a desplegar (en el ejemplo “ítem_3d”, “ítem_gall”, “ítem_menu”, “ítem_efec”). Además, después de los enlaces podemos añadir contenido que aparecerá cuando el menú no tenga ninguna pestaña desplegada.

<div id="menu" ><!---menu container--> 
  <div id="item_3d" class="menutarget"> 
    Contenido
  </div> 
 
  <div id="item_gall" class="menutarget"> 
    Contenido
  </div> 
 
  <div id="item_menu" class="menutarget"> 
    Contenido
  </div> 
 
  <div id="item_efec" class="menutarget"> 
    Contenido
  </div> 
 
  <!---tabs del menu--> 
  <a id="3d" href="#3d" rel="e24menuitem[item_3d]"><img src="img/3d.gif" alt="Efectos 3D" /></a> 
  <a id="gall" href="#galerias" rel="e24menuitem[item_gall]"><img src="img/galerias.gif" alt="Galeria de fotos AJAX" /></a> 
  <a id="menus" href="#menus" rel="e24menuitem[item_menu]" ><img src="img/menus.gif" alt="Efectos de Menus" /></a> 
  <a id="efec" href="#efectos" rel="e24menuitem[item_efec]"><img src="img/efectos.gif" alt="Otros efectos ajax" /></a> 
  <!---tabs del menu--> 
 
  <div id="maincontent"> 
    Contenido principal 
  </div><!--texto--> 
</div><!--menu container-->

Ahora veremos el código javascript necesario para el funcionamiento del menú, donde pasaremos como primer parámetro el id de la capa contenedora del menú “menu” y un array de parámetros para el efecto.

oe24TabMenu = new e24TabMenu( 'menu', { duration: 1.0, transition: Effect.Transitions.sinoidal } );

Todas las Opciones

• duration: Un valor decimal que representa el tiempo en segundos que durará el despliegue de la pestaña del menú. Valor por defecto: 1.0
• transition: Función que modifica cada punto de la animación: Effect.Transitions.sinoidal (default), Effect.Transitions.linear, Effect.Transitions.reverse, Effect.Transitions.wobble, Effect.Transitions.flicker
• callback: función que se llamará cuando se complete la animación, útil para concatenar animaciones.

Métodos

• toggleMenu: Despliega o expande una pestaña de menú según sea el caso. Requiere como parámetro el objeto referente al enlace correspondiente al elemento de menú en cuestión.

  oe24TabMenu.toggleMenu($('3d'));

Errores conocidos y cosas por hacer

• Permitir el menú en varias direcciones, de abajo hacia arriba, izquierda a derecha, derecha a izquierda.

Descargar

e24TabMenu 0.8 beta (176 KB)

Introducción

e24Writer es un plugin de scriptaculous que permite hacer una animación donde los elementos van apareciendo progresivamente mediante una transición de opacidad. Los elementos pueden ser imágenes, elementos HTML o texto.

Demos

• Animación de Imágenes
• Animación de un Texto

¿Cómo utilizarlo?

Incluya Prototype 1.6.0.2 y Scriptaculous 1.8.1 dentro de header del código HTML de la página. Incluya e24Writer después de ambos

<script type='text/javascript' src='js/prototype.js'></script>
<script type='text/javascript' src='/js/scriptaculous.js?load=effects'></script>
<script type='text/javascript' src='js/e24writer.js'></script>

Este efecto consiste en hacer una aparición progresiva de un grupo de elementos, por ejemplo las letras de un texto. Para esto debemos separar cada uno de los elementos, si el texto a animar es una imagen entonces necesitaremos picar la imagen en cada una de las letras.

Ahora escriba el código HTML necesario para definir el contenido a animar. Necesitaremos una capa contenedora (“letters” en el ejemplo) y dentro de la capa contenedora pondremos una capa para cada elemento de la animación, por ejemplo una capa para cada letra.

<div id="letters" >
		<div class="letter"><img src="img/letter1.jpg" alt="letra1" /></div>
		<div class="letter"><img src="img/letter2.jpg" alt="letra2" /></div>
		<div class="letter"><img src="img/letter3.jpg" alt="letra3" /></div>
		<div class="letter"><img src="img/letter4.jpg" alt="letra4" /></div>
</div>

A continuación escribimos el código javascript necesario para ejecutar la animación. Le pasaremos como primer parámetro el id de la capa contenedora “letters” y un array de parámetros para el efecto.

oe24Writer = new e24Writer( 'letters', { autostart: true, duration: 1.0, interval: 0.3 });

Todas las Opciones

• autostart: Un valor booleano, si es true la animación se inicia automáticamente, si es false necesitaremos llamar al método start() para iniciar la animación. Valor por defecto: false
• duration: Un valor decimal que representa el tiempo en segundos que durará la transición de opacidad de cada elemento. Valor por defecto: 1.0
• interval: Un valor decimal que representa el tiempo en segundos que pasará entre cada aparición de cada elemento. Valor por defecto: 0.3
• callback: función que se llamará cuando se complete la animación, útil para concatenar animaciones.

Métodos

• start: No requiere parámetros, inicia la animación si el efecto se creó con el parámetro autostart como false.

Errores conocidos y cosas por hacer

• Permitir varias hacer la animación en varias direcciones, izquierda-derecha, derecha-izquierda.
• Permitir reiniciar la animación.

Descargar

e24Writer 0.4.1 beta (71.33 KB)