Implementation of Behaviors in Internet Explorer

Implementation below is a generalization of Ben Nolan’ idea of behaviors. Behaviors were implemented natively in Sciter and HTMLayout and here is their emulation for the Internet Explorer.

Basic principle is simple, CSS declaration like this:

li.myclass 
    { 
      prototype: MyBehavior; /* see var MyBehavior below */
    }

binds class of DOM elements with the “prototype behavior object” – collection of event handlers defined in script nearby:

var MyBehavior = 
    {
      attached:    function() { ... },
      onclick:     function() { ... },
    }

Thus after loading HTML that contains something like this:

<ul>
  <li class="myclass">Element with MyBehavior</li>
  <li>Element without behavior</li>
</ul>

first element will behave as MyBehavior.

Here is an implementation of the Behaviors Framework – HTML document that demonstrates basic principle. Implementation is based on the fact that Internet Explorer allows you to define custom attributes in CSS declarations. I will appreciate if someone will tell me how to define something like this but for other UAs (browsers).

This may be interesting too:
“Designing Reusable UI Components in Sciter: Part I, Part II and Part III“.

---

Here is Dave Herman’ version of original behavior.js of Ben Nolan.

Here is another sample for IE: Simple collapsible tree.