Behaviour
Javascript event library to create Javascript based interactions that degrade well when Javascript is not available
Behaviour
Javascript event library, available from http://bennolan.com/behaviour/.
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).
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);
In your code you create a "rules" object, with sub-objects for each html element class name or id:<script type="text/javascript" src="%PUBURL%/%SYSTEMWEB%/BehaviourContrib/behaviour.js"></script>
Apply the rules with: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 } } };
Behaviour.register(myrules);
Creates:<div id="demoblock" style="padding:1em; width:100px; text-align:center;"> MOUSE OVER ME </div> <script type="text/javascript"> // <![CDATA[ var myrules = { '#demoblock' : function(el) { var defaultColor = '#A3D6F8'; var highlightColor = '#4A7FB5'; el.style.backgroundColor = defaultColor; el.onmouseover = function() { this.style.backgroundColor = highlightColor; return false; } el.onmouseout = function() { this.style.backgroundColor = defaultColor; return false; } }, '#demoblock span' : function(el) { var text = el.innerHTML; var fisherYates = function (inArray) { var i = inArray.length; if ( i == 0 ) return false; while ( --i ) { var j = Math.floor( Math.random() * ( i + 1 ) ); var tempi = inArray[i]; var tempj = inArray[j]; inArray[i] = tempj; inArray[j] = tempi; } } var randomize = function(inText) { var letters = inText.split(''); fisherYates(letters); return letters.join(''); } el.onmouseover = function() { this.innerHTML = randomize(text); return false; } el.onmouseout = function() { this.innerHTML = text; return false; } } }; Behaviour.register(myrules); // ]]> </script>
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);
configure
interface (Go to Plugins->Find More Extensions) .zip
or .tgz
archives
perl <module>_installer
)
configure
and enable the module, if it is a plugin.
,v
files in your existing install (take care not to lock the files when you check in)
Behaviour
Javascript event library to create Javascript based interactions that degrade well when Javascript is not available
Author: | TWiki:Main/ArthurClemens |
Copyright: | Code: behaviour.js version 1.1 - Copyright (c) Ben Nolan and Simon Willison.TWiki distribution and updates/additions: © TWiki:Main/ArthurClemens. © 2006-2010 TWiki:TWiki/TWikiContributor |
License: | BSD for behaviour.js GPL (GNU General Public License) for TWiki BehaviourContrib |
Version: | 18694 (2010-10-10) |
Dependencies: | None |
Contrib Version: | 1.4 |
Change History: | |
2010-05-15: | TWikibug:Item6433 - doc improvements; replacing TWIKIWEB with SYSTEMWEB |
17 Oct 2007 | 1.3 Replaced "faster code" by other code from Dean Edwards, [[ packed by http://groups.google.com/group/behaviour/browse_thread/thread/85137977bedf5ed/3cf3ba8065d41a8c#3cf3ba8065d41a8c][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. |
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 |
I | Attachment | History | Action | Size | Date | Who | Comment |
---|---|---|---|---|---|---|---|
js | behaviour.js | r1 | manage | 2.8 K | 2006-10-28 - 22:49 | TWikiContributor |