TWiki> TWiki Web>BehaviourContrib (revision 1)EditAttach

Behaviour Javascript framework Contrib

This contrib packages the third-party Behaviour Javascript event library, available from http://bennolan.com/behaviour/.

Behaviour is suited to create javascript based interaction that degrades well when javascript is not available.

Javascript file: behaviour.js (8.1K). The compressed javascript file (2.9K) has been processed by ShrinkSafe.

Introduction

From the website:
After all the work of WASP and others to promote clean markup, valid pages and graceful degradation via css - it sucks that we're going back to tag soup days by throwing javascript tags into our html.

The better way to do javascript is to do it unobtrusively. PPK and Simon Willison have been recommending this approach for ages. And it's definitely the way to go. The only problem is that it's a bit of a pain in the ass.

That's why I came up with Behaviour - my solution to unobtrusive javascript behaviours.

How does it work?

Behaviour lets you use CSS selectors to specify elements to add javascript events to. This means that instead of writing:

<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>

And then use css selectors to select that element and add javascript functions to it.

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

      }
   }
};

Behaviour.register(myrules);

Usage

Include the javascript file:

<script type="text/javascript" src="%PUBURL%/%TWIKIWEB%/BehaviourContrib/behaviour.compressed.js"></script>

In your code you create a "rules" object, with sub-objects for each html element class name or id:

var myrules = {
   '.classname' : function(element) {
      // element event
      element.onclick = function() {
         // code here
      }
   },
   
   '#id' : function(element) {
      // element event
      element.onclick = function() {
         // code here
      }
   }
};

Or use nested identifiers:

var myrules = {
   '.menu li a' : function(element) {
      element.onclick = function() {
         // code here
      }
   }
};

Apply the rules with:

Behaviour.register(myrules);

Example

If we have a 'normal' link to TWiki Web hometopic: TWiki Web Home, we can use javascript to make it open a popup window. When javascript is not available the link behaviour defaults to opening the page in the current window.

<span class="link%TWIKIWEB%%HOMETOPIC%">[[%TWIKIWEB%.%HOMETOPIC%][TWiki Web Home]]</span>

<script type="text/javascript">
// <![CDATA[
var myrules = {
   '.link%TWIKIWEB%%HOMETOPIC% a' : function(el){
      el.onclick = function() {
         // open in a popup with no other attributes than template 'viewplain'
         launchTheWindow(this.href,null,null,null,"viewplain");
         return false;
      }
   }
};

Behaviour.register(myrules);
// ]]>
</script>

The class name link%TWIKIWEB%%HOMETOPIC% will get expanded to linkTWikiWebHome

Creates:

TWiki Web Home

Development

License

Behaviour is freely distributable under the terms of an BSD license. For details, see the Behaviour website.

Links

Contrib Info

Author: TWiki:Main.ArthurClemens
Copyright: version 1.1 - Copyright (c) Ben Nolan and Simon Willison
License: BSD
Dependencies: None
4 June 2006 1.000 First Version. Included Behaviour version: 1.1
Home: http://TWiki.org/cgi-bin/view/Plugins/BehaviourContrib
Feedback: http://TWiki.org/cgi-bin/view/Plugins/BehaviourContribDev
Appraisal: http://TWiki.org/cgi-bin/view/Plugins/BehaviourContribAppraisal

Related Topics: TWikiPreferences

Topic attachments
I Attachment Action Size Date Who CommentSorted ascending
jsjs behaviour.compressed.js manage 2.8 K 28 Oct 2006 - 19:49 UnknownUser  
jsjs behaviour.js manage 8.0 K 18 Oct 2006 - 16:19 UnknownUser  
Edit | Attach | Print version | History: r4 < r3 < r2 < r1 | Backlinks | Raw View | Raw edit | More topic actions...
Topic revision: r1 - 01 Nov 2006 - 12:20:33 - TWikiContributor

 
This site is powered by the TWiki collaboration platformCopyright � by the contributing authors. All material on this collaboration platform is the property of the contributing authors.
Ideas, requests, problems regarding TWiki? Send feedback
Note: Please contribute updates to this topic on TWiki.org at TWiki:TWiki.BehaviourContrib