Introduction

VIVO is a javascript framwork which builds upon scriptaculous and prototype.  It provides 'tools' (a.k.a. widgets) that can be easily added to the DOM of a document without using javascript.  The goal of vivo is to separate and eliminate the javascript embedded in DOM elements required to create widgets.  Ultimately, there should be no javascript in DOM elements.

This toolkit makes it easy to implement DHTML/AJAX tools into your website or web application.

To accomplish this, VIVO tools are setup by adding a special attribute on an element, which represents the tool and is effectively that tools initialization call.  This is most easily explained by way of an example.  In this example, the inpagetooltip is used, which creates an xhtml popup tooltip on an item:

<div id="info-title"
     vivo:inpagetooltip="tooltipElement=tooltip">
 Click for more information
</div>
<div style="display:none" id="tooltip">
 This is a tooltip giving more information
</div>

When the page is loaded, the VIVO initializer parses the DOM for all elements containing attributes in the vivo namespace.  These attributes represent the VIVO tools, and the initializer calls the tools init function to create the tool on that element.  The value of the vivo attribute contains parameters to configure that tool.

In this case, the only parameter needed to create a tooltip is the id of the element containing the tooltip text (any xhtml, really). 

I see two methods to implement this tool using strictly javascript:

1. When the page is loaded, an initializer is called wich manually sets up the widgets located on that specific page. 
   
2. #info-title has an onclick attribute, which does the stuff necessary to show/hide the tooltip.

In the first case, the relationship between DOM elements and widgets isn't represented in the DOM.  That certainly makes the DOM clean, but by looking at the DOM there is no way of knowing how elements interact.  The latter places the details of that interaction in the DOM.  However, the symatic relationships are still coded in javascript, and there is no easy way to determine those relationships in the DOM.  Depending on the implementation it could be obvious by reading the source code what does what and how, but it isn't clean.

By using a namespace with attributes representing tools, VIVO is able to remove the javascript code from the DOM elements while retaining the symantic relationship between tools and the DOM elements.

More Information

1. VIVO Users Guide
2. VIVO Tools
   
3. VIVO Developers Guide (a.k.a Developing VIVO tools)

Download VIVO

The current release is version 1.1.1  Get it now.
Read the changelog

All versions:

1.1.1

1.1

VIVO was inspired by Johnny's Widgeteer javascript library