TWiki/BehaviourContrib.mdwn

   1 # <a name="Behaviour Javascript framework C"></a><a name=" Behaviour Javascript framework "></a> Behaviour Javascript framework Contrib
   2
   3 This contrib packages the third-party `Behaviour` Javascript event library, available from <http://bennolan.com/behaviour/>.
   4
   5 Behaviour is suited to create javascript based interaction that degrades well when javascript is not available.
   6
   7 Javascript file: [behaviour.js](http://www.dementia.org/twiki//view/TWiki/%TOPIC%/behaviour.js) (8.1K). The [compressed javascript file](http://www.dementia.org/twiki//view/TWiki/%TOPIC%/behaviour.compressed.js) (2.9K) has been processed by [ShrinkSafe](http://alex.dojotoolkit.org/shrinksafe/).
   8
   9 <div><span>On this page:</span><ul>
  10     <li><a href="#Introduction"> Introduction</a></li>
  11     <li><a href="#Usage"> Usage</a></li>
  12     <li><a href="#Example"> Example</a></li>
  13     <li><a href="#Development"> Development</a></li>
  14     <li><a href="#License"> License</a></li>
  15     <li><a href="#Links"> Links</a></li>
  16     <li><a href="#Contrib Info"> Contrib Info</a></li>
  17   </ul>
  18 </div>
  19
  20 ## <a name="Introduction"></a> Introduction
  21
  22 From the website:
  23
  24 > 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.
  25 >
  26 > 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.
  27 >
  28 > That's why I came up with Behaviour - my solution to unobtrusive javascript behaviours.
  29 >
  30 > **How does it work?**
  31 >
  32 > Behaviour lets you use CSS selectors to specify elements to add javascript events to. This means that instead of writing:
  33 >
  34 >     <li>
  35 >        <a onclick="this.parentNode.removeChild(this)" href="#">
  36 >           Click me to delete me
  37 >        </a>
  38 >     </li>
  39 >
  40 > You can use:
  41 >
  42 >     <ul id="example">
  43 >        <li>
  44 >           <a href="/someurl">Click me to delete me</a>
  45 >        </li>
  46 >     </ul>
  47 >
  48 > And then use css selectors to select that element and add javascript functions to it.
  49 >
  50 >     var myrules = {
  51 >        '#example li' : function(el){
  52 >           el.onclick = function(){
  53 >              this.parentNode.removeChild(this);
  54 >
  55 >           }
  56 >        }
  57 >     };
  58 >
  59 >     Behaviour.register(myrules);
  60
  61 ## <a name="Usage"></a> Usage
  62
  63 Include the javascript file:
  64
  65 > <script type="text/javascript" src="%PUBURL%/%TWIKIWEB%/BehaviourContrib/behaviour.compressed.js"></script>
  66
  67 In your code you create a "rules" object, with sub-objects for each html element class name or id:
  68
  69 > var myrules = {
  70 >        '.classname' : function(element) {
  71 >           // element event
  72 >           element.onclick = function() {
  73 >              // code here
  74 >           }
  75 >        },
  76 >
  77 >        '#id' : function(element) {
  78 >           // element event
  79 >           element.onclick = function() {
  80 >              // code here
  81 >           }
  82 >        }
  83 >     };
  84 >
  85 > Or use nested identifiers:
  86 >
  87 >     var myrules = {
  88 >        '.menu li a' : function(element) {
  89 >           element.onclick = function() {
  90 >              // code here
  91 >           }
  92 >        }
  93 >     };
  94
  95 Apply the rules with:
  96
  97 > Behaviour.register(myrules);
  98
  99 ## <a name="Example"></a> Example
 100
 101 If we have a 'normal' link to TWiki Web hometopic: [[TWiki Web Home|TWiki/WebHome]], 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.
 102
 103 > <span class="link%TWIKIWEB%%HOMETOPIC%">[[%TWIKIWEB%.%HOMETOPIC%][TWiki Web Home]]</span>
 104 >
 105 >     <script type="text/javascript">
 106 >     // <![CDATA[
 107 >     var myrules = {
 108 >        '.link%TWIKIWEB%%HOMETOPIC% a' : function(el){
 109 >           el.onclick = function() {
 110 >              // open in a popup with no other attributes than template 'viewplain'
 111 >              launchTheWindow(this.href,null,null,null,"viewplain");
 112 >              return false;
 113 >           }
 114 >        }
 115 >     };
 116 >
 117 >     Behaviour.register(myrules);
 118 >     // ]]>
 119 >     </script>
 120 >
 121 > The class name `link%TWIKIWEB%%HOMETOPIC%` will get expanded to `linkTWikiWebHome`
 122
 123 Creates:
 124
 125 <span>[[TWiki Web Home|TWiki/WebHome]]</span>
 126
 127 ## <a name="Development"></a> Development
 128
 129 - [Google Groups: Behaviour Javascript Library](http://groups.google.com/group/behaviour)
 130 - [Dean Edwards: Faster DOM Queries](http://dean.edwards.name/weblog/2006/03/faster/) - with a speed-up hack to Behaviour
 131
 132 ## <a name="License"></a> License
 133
 134 Behaviour is freely distributable under the terms of an BSD license. For details, see the Behaviour website.
 135
 136 ## <a name="Links"></a> Links
 137
 138 - [Behaviour website](http://bennolan.com/behaviour/)
 139 - [Behaviour Google Group](http://groups.google.com/group/behaviour)
 140
 141 ## <a name="Contrib Info"></a> Contrib Info
 142
 143 <table border="1" cellpadding="0" cellspacing="0">
 144   <tr>
 145     <td> Author: </td>
 146     <td> TWiki:Main.ArthurClemens </td>
 147   </tr>
 148   <tr>
 149     <td> Copyright: </td>
 150     <td> version 1.1 - Copyright (c) Ben Nolan and Simon Willison </td>
 151   </tr>
 152   <tr>
 153     <td> License: </td>
 154     <td> BSD </td>
 155   </tr>
 156   <tr>
 157     <td> Dependencies: </td>
 158     <td> None </td>
 159   </tr>
 160   <tr>
 161     <td> 4 June 2006 </td>
 162     <td> 1.000 First Version. Included Behaviour version: 1.1 </td>
 163   </tr>
 164   <tr>
 165     <td align="right"> Home: </td>
 166     <td><a href="http://TWiki.org/cgi-bin/view/Plugins/%TOPIC%" target="_top">http://TWiki.org/cgi-bin/view/Plugins/%TOPIC%</a></td>
 167   </tr>
 168   <tr>
 169     <td align="right"> Feedback: </td>
 170     <td><a href="http://TWiki.org/cgi-bin/view/Plugins/%TOPIC%Dev" target="_top">http://TWiki.org/cgi-bin/view/Plugins/%TOPIC%Dev</a></td>
 171   </tr>
 172   <tr>
 173     <td align="right"> Appraisal: </td>
 174     <td><a href="http://TWiki.org/cgi-bin/view/Plugins/%TOPIC%Appraisal" target="_top">http://TWiki.org/cgi-bin/view/Plugins/%TOPIC%Appraisal</a></td>
 175   </tr>
 176 </table>
 177
 178 **_Related Topics:_** [[TWikiPreferences]]