*scottstuff*

Behavior: CSS-like application of Javascript

Posted by Scott Laird Sat, 02 Jul 2005 23:00:25 GMT

Lamda the Ultimate just pointed out a cool new Javascript tool that should make AJAX-ifying web sites much cleaner and more maintainable. By using Behavior, you can strip all of the ugly little <script> and onclick="" tags out of your website and then specify all of the Javascript actions out of line using CSS selectors. Here’s the example from their website:

So, instead of this:

<li>
  <a onclick="this.parentNode.removeChild(this)" href="#">
    Click me to delete me
  </a>
</li>

You can use:

<ul id="example">
  <li>
    <a href="/someurl">Click me to delete me</a>
  </li>
</ul>

Then you feed something like this into Behavior:

var myrules = {
  '#example li' : function(el){
    el.onclick = function(){
      this.parentNode.removeChild(this);
    }
  }
};

Behaviour.register(myrules);

It’s a little too verbose to use in this example, but the basic mechanism is really cool. I’d love to see this extended one step further, with Behavior being able to parse a configuration more like this:

#example li:onclick {
  this.parentNode.removeChild(this);
}

You’d drop that into a file on your web server, say mylayout.jcss. Then you’d have a block like this at the top of the HTML file:

<script>Behavior.import("mylayout.jcss");</script>

I’m not exactly a Javascript wiz, but this looks vastly cleaner to me. I’d love to see something like this included into a future release of Rails.

Posted in Web stuff | Tags css, html, javascript, rails, rubyonrails | no comments