With each new browser’s version we found new programming features that let us make more advanced AJAX effects. Even when most of these improvements are present at the major browsers that are more standard every day, there are always many reasons to found different users configurations:

• Users that keep using old browser’s versions.
• Users that use less popular and less standard browsers.
• User that disable javascript or make other restrictions for security reasons.
• Search engine’s spiders that do not use to parse javascript and then some texts can leave hidden.
• Users with accessibility limitations that use other ways to read the pages.

In order to reach all these users we need that those pages that use javascript to make advanced AJAX effects gracefully degrade, that means that the page must be able to work even when javascript or another special features are disabled.

In the next post we will see a real case and how to solve it using Prototype.

Introdution

e24TabMenu is a plugin written for scriptaculous. It is a tab menu that expands collapse smoothly.

Demos

• All tabs hidden
• One tab expanded

Usage

Include Prototype 1.6.0.2 and Scriptaculous 1.8.1 in the HTML code header. Also include e24TabMenu after both:

<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>

Next, write the necesary HTML code to define de menu. We will need a container layer (“menu” on the example) and inside the container we will have a layer for each menu item where we will add its content. After that, add links (html tag “A”) for each menu’s tab, the “rel” attribute value must be e24menuitem[layer_id] where layer_id is the id of the content layer (on the example “ítem_3d”, “ítem_gall”, “ítem_menu”, “ítem_efec”). Bellow the links we can add contents that will show when all tabs are collapsed.

<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-->

Finally we write the necesary javascript code to define the menu. As first param we will pass the container layer id , and as second param an option’s array.

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

Options

• duration: Decimal, representing the time in seconds that will take the menu item movement. Default value: 1.0
• transition: Function that modifies each animation’s point: Effect.Transitions.sinoidal (default), Effect.Transitions.linear, Effect.Transitions.reverse, Effect.Transitions.wobble, Effect.Transitions.flicker
• callback: callback function that will be processed once the animation is complete. It is useful to concatenate animations.

Methods

• toggleMenu: Toggles the tab. Requieres the object reference of the corresponding link.

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

Known Issues

• Add more directions like, down-top, letf-right, right-left.

Download

e24TabMenu 0.8 beta (176 KB)