Cruiser Behaviors Library

Dan Yoder has created the Cruiser Behaviors Library, inspired by Ben Nolan’s Behaviours library, to use CSS selectors to decorate DOM elements with interfaces and event handlers. Dan has gone farther to pulled them out into a separate file, called an extended stylesheet (ESS). This is a superset of CSS that includes a number of additional attributes to […]

Dan Yoder has created the Cruiser Behaviors Library, inspired by Ben Nolan’s Behaviours library, to use CSS selectors to decorate DOM elements with interfaces and event handlers.

Dan has gone farther to pulled them out into a separate file, called an extended stylesheet (ESS). This is a superset of CSS that includes a number of additional attributes to support DOM decoration.

For example, you can add a mouseover handler to show a preview window for all links marked with the preview class like this:

a.preview { mouseover: preview; }

You can also include traditional CSS elements, so if you want, you can simply add you ESS attributes to your existing CSS.

a.preview { mouseover: preview; text-decoration: none; }

You can load an ESS file pretty much the same way you load an CSS file: with a link tag.

<link type="'text/ess'" rel="'extended-stylesheet'" href="'my-styles.ess'/">

The benefit of using ESS is two-fold:

  • Your Javascript can now focus more or less on the interfaces you want your DOM elements to support. You don’t need to clutter up your Javascript with the mappings between elements and methods / functions.
  • You can push out design-centric Javascript to the designer. In the ‘preview’ example above, you can let the CSS designer decide which links should provide a preview, rather than embedding that in your Javascript.

More info.... | Download | Demo

Source:→ ajaxian

Cruiser Behaviours Library, Java, Javascript, CSS, Library, Unobtrusive JS