In VIVO 1.1, there are 8 tools.  Many of these tools are vivo wrappers to widgets/effects in script.aculo.us or prototype.

• vivo:autocomplete
• vivo:batchlink
• vivo:collapsible
• vivo:draggable
• vivo:droppable
• vivo:inpagetooltip
• vivo:inplaceeditor
• vivo:tab
  

vivo:autocomplete

This tool provides Google Suggest-like behavior on a text field.

Example:

<input name="search" id="search" type="text" 
 vivo:autocomplete="resultsElement=results|url=suggest.jsp|paramName=q" />
<div id="results" />

Notes:

The result of the url query is the contents of a <ul> (e.g. a list of <li>'s).  The contents of each <li> can be arbitrary html.  The afterUpdateElement callback can be used to take specific data from the selected item and palce it somewhere (e.g. a hidden field) where it can later be submitted. 

A good example of this is an autocomplete form to lookup person information.  Start typing the person's name, and the autocompletion shows matching names with photos.  In this case, afterUpdateElement should be used to pull the name of the person and place it in the text field.

vivo:batchlink

This tool is used to navigate between pages of data (e.g. search results, photo galleries, etc) without reloading the entire document.  The batchlink tools typically reside within the panel that is refreshed.

Example:

<div id="batch-container">
 <a href="http://altepeter.net/nextbatch/fulldocument"
    vivo:batchlink="ontentElement=gallery-images|url=url_to_next_batch_container"

Notes:

The contentElement element is replaced by the new content.  This is different from many other vivo tools, that only replace the contents of the contentElement (i.e.. target element).
The batchlink tool can be an html anchor.  If desired, the anchors 'href' can link to the full page for the next set of results, and the url parameter can return just the content of the next batch.  If implemented in this fashion, this tool will continue to work in browsers with javascript disabled.  Cerainly a useful feature for a photo gallery.

The afterComplete callback can be used if extra non-vivo initialization is needed within the new batch content.  For example, the 'Silva UCL Gallery' uses lightbox, which has it's own initialization that needs to be called on the new content.

vivo:collapsible

 function() {
  if (self.collapsibleElement.style.display == "none") {
    self.collapsibleElement.style.display = "block";
  }
  else {
    self.collapsibleElement.style.display = "none";
  }
}

vivo:draggable

A script.aculo.us component.  See Drag And Drop: Draggables, Droppables, Sortables for more information.

vivo:droppable

A script.aculo.us component.  See Drag And Drop: Draggables, Droppables, Sortables for more information.

vivo:inpagetooltip

Tooltips in html are usually displayed on mouseover of elements with the title attribute set.  These tooltips are restricted to text only.  Instead of using the title attribute, this tool creates a tooltip out of an arbitrary DOM element (e.g. a <div>), so the tooltip can contain arbitrary html and be fully styled using css.

Example:

<a id="tooltip-link" href="#" onclick="return false" 
   vivo:inpagetooltip="tooltipElement=tooltip-text|alignX=right">Click for more info</a>
<div id="tooltip-text">More information</div>

Notes:

A neat extension to this tool could be loading the tooltips on the fly, instead of containing them in the document.

vivo:inplaceeditor

A wrapper around Ajax.InPlaceEditor.

vivo:tab

This tool provides for the creation of a panel containing a list of tab titles, and a content panel containing the contents of the active tab.  The tab contents are loaded from a url.

function(content) {
  if ($("vivo-loading-tab") != null) {
    self.contentElement.removeChild($("vivo-loading-tab"));
  }
  if (content != null && content.length > 0) {
    self.fragment.innerHTML = content;
  }
  self.fragment.style.display = "block";
  var tabs = self.tabGroupElement.getElementsByTagName("li");
  for (var i = 0; i < tabs.length; i++) {
    if (tabs[i].nodeType == 1 && tabs[i].className.length > 0) {
      tabs[i].className = "";
    }
  }
  self.element.className = "active";
}

function() {
  var loadingDiv = document.createElement("div");
  loadingDiv.id = "vivo-loading-tab";
  loadingDiv.innerHTML = self.options.loadingText;
  self.contentElement.appendChild(loadingDiv);
}