Ajax style prototypes for the Web

Here's an example that fades & closes the image when the user clicks on it. (It's live, so go ahead and try it!)

$proto('img#avatar', {
  Click: {
    onClick: {
      Fade: {
        opacity: {to: 0},
        onComplete: {Close : {} }
      }
    }
  }
});

The protoscript above says: for an image with id avatar, fade it out when the user clicks on it and close it when the fade completes.

By combining different behaviors with different elements and events you can create complex interactions without writing JavaScript.

Want to see it in action? Here are the current set of behaviors.

Click any of them to see live examples.