Behave

Behave

An Implementation of Javascript Behaviours

The Problem (Motivation)

The dialog

The Idea

Use CSS selectors to bind functionality to nodes. I.e.,

The Implementations

Behaviour Registration

  registerRules({
    'p.active .shed' : {
      onmouseover : function() {
        document.getElementById('enlighten').style.color='yellow';
      },
      onmouseout : function() {
        document.getElementById('enlighten').style.color='';
      }}});
      

The Dialog (2)

  registerRules({
    'div.example2 input' : {
      onkeypress : function(e) {
        if (e.which == 13) {
          alert("You pressed Enter");
          return false;
        }}}});
      

Outside the Registry

Problem: Decorate external links.

Solution: Use callForElementsBySelector() to manipulate all external links.

Example 3

The Dialog (3)

   callForElementsBySelector('div.dialog3 div.dialog', document,
     function(node) {
       var submitNode;
       callForElementsBySelector('input[type=submit]', node,
               function(curSubmitNode) { submitNode = curSubmitNode });
       callForElementsBySelector('input[type]', node,
         function(inputNode) {
           registerEventHandler(inputNode, 'onkeypress',
             function(e) { if (e.which == 13) alert(submitNode.value) });
         });
      })
      

Behave Features