Powered by Foswiki, The Free and Open Source Wiki
System  BehaviourContrib (compare)

Difference: BehaviourContrib (r2 vs. r1)

Behaviour Javascript framework Contrib

This contrib packages the third-party Behaviour Javascript event library, written by Ben Nolan.

Behaviour uses CSS selectors to subscribe to javascript event handlers. This allows to create clean code, separated from HTML (and well suited to create javascript based interaction that degrades nicely when javascript is not available).

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:
  • Click me to delete me
  • You can use:
    
    
    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:

    
    

    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 a web hometopic: 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.

    MOUSE OVER ME

    Creates:

    MOUSE OVER ME

    Leaking danger

    Behaviour code leaks memory on Windows Explorer prior to version 7. To prevent leaking, set the element variable to null:

    var myrules = {
        'table.test td' : function(element) {
            element.onmouseover = function() {
                this.style.backgroundColor = highlightColor;
                return false;
            }
            element = null; // by setting this IE will not leak  
        }
    };
    Behaviour.register(myrules);
    

    Development

    License

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

    Links

    Installation Instructions

    You do not need to install anything in the browser to use this extension. The following instructions are for the administrator who installs the extension on the server.

    Open configure, and open the "Extensions" section. Use "Find More Extensions" to get a list of available extensions. Select "Install".

    If you have any problems, or if the extension isn't available in configure, then you can still install manually from the command-line. See http://foswiki.org/Support/ManuallyInstallingExtensions for more help.

    Contrib Settings

    • Set SHORTDESCRIPTION = Behaviour Javascript event library to create javascript based interactions that degrade well when javascript is not available

    You can also set the global preference settings BEHAVIOURCONTRIB_DEBUG to 1 to make the contrib use uncompressed javascript sources, in the event of problems.

    Contrib Info

    Author: Foswiki:Main.ArthurClemens
    Copyright: Code: behaviour.js version 1.1 - Copyright (c) Ben Nolan and Simon Willison. Foswiki distribution and updates/additions: Foswiki:Main.ArthurClemens.
    License: BSD
    Version: 5016 (2009-09-20)
    Release: 1.5
    Change History:  
    20 Sep 2009 1.5 Minor documentation updates for Foswiki 1.0.7. No functional changes
    03 Dec 2008 1.4 Foswiki release version.
    17 Oct 2007 1.3 Replaced "faster code" by other code from Dean Edwards, Raymond Irving?.
    02 Jul 2007 1.2 Integrated other faster code by Dean Edwards: faster onload (again).
    08 Mar 2007 1.1 Integrated code by Dean Edwards (see Code update version 1.1 with faster DOM queries).
    04 Jun 2006 1.0 First Version. Included Behaviour version: 1.1.
    Dependencies: None
    Home: http://foswiki.org/Extensions/BehaviourContrib
    Support: http://foswiki.org/Support/BehaviourContrib
    IAttachmentActionSizeDateWhoComment
    behaviour.compressed.jsjsbehaviour.compressed.jsmanage 7.2 K 20 Sep 2009 - 13:40AdminUser  
    behaviour.compressed_src.jsjsbehaviour.compressed_src.jsmanage 8.7 K 20 Sep 2009 - 13:40AdminUser  
    behaviour.jsjsbehaviour.jsmanage 7.2 K 20 Sep 2009 - 13:40AdminUser  
    behaviour_src.jsjsbehaviour_src.jsmanage 8.7 K 20 Sep 2009 - 13:40AdminUser  

    Revision r2 - 24 Jun 2011 - 08:50 - AdminUser
    Revision r1 - 08 Jul 2007 - 16:54 - ProjectContributor
    This site is powered by FoswikiCopyright &© by the contributing authors. All material on this site is the property of the contributing authors.
    Ideas, requests, problems regarding UTfit? Send feedback