Behaviour Javascript Framework Contrib<-- Contributions to this TWiki extension are appreciated. Please update the contrib page at http://twiki.org/cgi-bin/view/Plugins/BehaviourContrib or provide feedback at http://twiki.org/cgi-bin/view/Plugins/BehaviourContribDev. If you are a TWiki contributor please update the extension in the SVN repository. --> Behaviour Javascript event library to create Javascript based interactions that degrade well when Javascript is not available
IntroductionThis contrib packages the third-partyBehaviour 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); UsageInclude the Javascript file: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); ExampleIf 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.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>
MOUSE OVER ME
Leaking DangerBehaviour code leaks memory on Windows Explorer prior to version 7. To prevent leaking, set the element variable tonull :
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
LicenseBehaviour is freely distributable under the terms of an BSD license. For details see the Behaviour website.LinksInstallation Instructions
Contrib Settings
Contrib Info
| |||||||||||||||||||||
Changed: | |||||||||||||||||||||
< < |
| ||||||||||||||||||||
> > |
| ||||||||||||||||||||
| |||||||||||||||||||||
Changed: | |||||||||||||||||||||
< < |
| ||||||||||||||||||||
> > |
| ||||||||||||||||||||
| |||||||||||||||||||||
Changed: | |||||||||||||||||||||
< < |
| ||||||||||||||||||||
> > |
| ||||||||||||||||||||
| |||||||||||||||||||||
Added: | |||||||||||||||||||||
> > |
| ||||||||||||||||||||
|
Behaviour Javascript Framework Contrib<-- Contributions to this TWiki extension are appreciated. Please update the contrib page at http://twiki.org/cgi-bin/view/Plugins/BehaviourContrib or provide feedback at http://twiki.org/cgi-bin/view/Plugins/BehaviourContribDev. If you are a TWiki contributor please update the extension in the SVN repository. --> | |||||||||||||||||||
Changed: | |||||||||||||||||||
< < | |||||||||||||||||||
> > | |||||||||||||||||||
On this page:
Behaviour Javascript event library to create Javascript based interactions that degrade well when Javascript is not available
IntroductionThis contrib packages the third-partyBehaviour 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); UsageInclude the Javascript file: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); ExampleIf 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.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>
MOUSE OVER ME
Leaking DangerBehaviour code leaks memory on Windows Explorer prior to version 7. To prevent leaking, set the element variable tonull :
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
LicenseBehaviour is freely distributable under the terms of an BSD license. For details see the Behaviour website.LinksInstallation Instructions | |||||||||||||||||||
Changed: | |||||||||||||||||||
< < | 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 where TWiki is running. | ||||||||||||||||||
> > |
| ||||||||||||||||||
Deleted: | |||||||||||||||||||
< < |
Like many other TWiki extensions, this module is shipped with a fully
automatic installer script written using the BuildContrib.
| ||||||||||||||||||
| |||||||||||||||||||
Deleted: | |||||||||||||||||||
< < |
| ||||||||||||||||||
Changed: | |||||||||||||||||||
< < | |||||||||||||||||||
> > |
| ||||||||||||||||||
Added: | |||||||||||||||||||
> > |
| ||||||||||||||||||
Contrib Settings
Contrib Info
| |||||||||||||||||||
Changed: | |||||||||||||||||||
< < |
| ||||||||||||||||||
> > |
| ||||||||||||||||||
| |||||||||||||||||||
Changed: | |||||||||||||||||||
< < |
| ||||||||||||||||||
> > |
| ||||||||||||||||||
| |||||||||||||||||||
Added: | |||||||||||||||||||
> > |
| ||||||||||||||||||
|
Changed: | |||||||||||||||
< < | Behaviour Javascript framework Contrib | ||||||||||||||
> > | Behaviour Javascript Framework Contrib | ||||||||||||||
Added: | |||||||||||||||
> > | <-- Contributions to this TWiki extension are appreciated. Please update the contrib page at http://twiki.org/cgi-bin/view/Plugins/BehaviourContrib or provide feedback at http://twiki.org/cgi-bin/view/Plugins/BehaviourContribDev. If you are a TWiki contributor please update the extension in the SVN repository. --> Behaviour Javascript event library to create Javascript based interactions that degrade well when Javascript is not available | ||||||||||||||
Added: | |||||||||||||||
> > | Introduction | ||||||||||||||
This contrib packages the third-party Behaviour Javascript event library, available from http://bennolan.com/behaviour/. | |||||||||||||||
Changed: | |||||||||||||||
< < | 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). | ||||||||||||||
> > | 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). | ||||||||||||||
Deleted: | |||||||||||||||
< < | On this page:
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> | |||||||||||||||
Changed: | |||||||||||||||
< < | Click me to delete me | ||||||||||||||
> > | Click me to delete me | ||||||||||||||
You can use:
<ul id="example"> | |||||||||||||||
Changed: | |||||||||||||||
< < | | ||||||||||||||
> > | | ||||||||||||||
And then use css selectors to select that element and add javascript functions to it.
var myrules = { | |||||||||||||||
Changed: | |||||||||||||||
< < | '#example li' : function(el){ el.onclick = function(){ this.parentNode.removeChild(this); } | ||||||||||||||
> > | '#example li' : function(el){ el.onclick = function(){ this.parentNode.removeChild(this); } } | ||||||||||||||
Deleted: | |||||||||||||||
< < | } | ||||||||||||||
}; | |||||||||||||||
Deleted: | |||||||||||||||
< < | |||||||||||||||
Behaviour.register(myrules); | |||||||||||||||
Deleted: | |||||||||||||||
< < | |||||||||||||||
Usage | |||||||||||||||
Deleted: | |||||||||||||||
< < | Include the javascript file: | ||||||||||||||
Added: | |||||||||||||||
> > | Include the Javascript file: | ||||||||||||||
Changed: | |||||||||||||||
< < | |||||||||||||||
> > | |||||||||||||||
In your code you create a "rules" object, with sub-objects for each html element class name or id:
var myrules = { | |||||||||||||||
Changed: | |||||||||||||||
< < | '.classname' : function(element) { // element event element.onclick = function() { // code here } }, '#id' : function(element) { // element event element.onclick = function() { // code here } | ||||||||||||||
> > | '.classname' : function(element) { // element event element.onclick = function() { // code here } }, '#id' : function(element) { // element event element.onclick = function() { // code here } } | ||||||||||||||
Deleted: | |||||||||||||||
< < | } | ||||||||||||||
};
Or use nested identifiers:
var myrules = { | |||||||||||||||
Changed: | |||||||||||||||
< < | '.menu li a' : function(element) { element.onclick = function() { // code here } } | ||||||||||||||
> > | '.menu li a' : function(element) { element.onclick = function() { // code here } } | ||||||||||||||
};
Apply the rules with:
Behaviour.register(myrules); | |||||||||||||||
Deleted: | |||||||||||||||
< < | |||||||||||||||
Example | |||||||||||||||
Deleted: | |||||||||||||||
< < | 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. | ||||||||||||||
Added: | |||||||||||||||
> > | 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. | ||||||||||||||
<div id="demoblock" style="padding:1em; width:100px; text-align:center;"> MOUSE OVER ME </div> <script type="text/javascript"> // <![CDATA[ var myrules = { | |||||||||||||||
Changed: | |||||||||||||||
< < | '#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; } } | ||||||||||||||
> > | '#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); // ]]> | |||||||||||||||
Added: | |||||||||||||||
> > | |||||||||||||||
Creates:
MOUSE OVER ME
| |||||||||||||||
Added: | |||||||||||||||
> > | Leaking Danger | ||||||||||||||
Deleted: | |||||||||||||||
< < | Leaking danger | ||||||||||||||
Behaviour code leaks memory on Windows Explorer prior to version 7. To prevent leaking, set the element variable to null :
var myrules = { | |||||||||||||||
Changed: | |||||||||||||||
< < | 'table.test td' : function(element) { element.onmouseover = function() { this.style.backgroundColor = highlightColor; return false; } element = null; // by setting this IE will not leak } | ||||||||||||||
> > | '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); | |||||||||||||||
Deleted: | |||||||||||||||
< < | |||||||||||||||
Development | |||||||||||||||
Added: | |||||||||||||||
> > | |||||||||||||||
| |||||||||||||||
Deleted: | |||||||||||||||
< < | |||||||||||||||
License | |||||||||||||||
Deleted: | |||||||||||||||
< < | Behaviour is freely distributable under the terms of an BSD license. For details see the Behaviour website. | ||||||||||||||
Added: | |||||||||||||||
> > | Behaviour is freely distributable under the terms of an BSD license. For details see the Behaviour website. | ||||||||||||||
Deleted: | |||||||||||||||
< < | |||||||||||||||
Links | |||||||||||||||
Added: | |||||||||||||||
> > | |||||||||||||||
Installation Instructions | |||||||||||||||
Added: | |||||||||||||||
> > | |||||||||||||||
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 where TWiki is running.
Like many other TWiki extensions, this module is shipped with a fully
automatic installer script written using the BuildContrib.
Contrib Settings | |||||||||||||||
Deleted: | |||||||||||||||
< < |
| ||||||||||||||
Added: | |||||||||||||||
> > |
| ||||||||||||||
You can also set the global TWiki variable BEHAVIOURCONTRIB_DEBUG to 1 to make the contrib use uncompressed javascript sources, in the event of problems.
Contrib Info | |||||||||||||||
Changed: | |||||||||||||||
< < |
| ||||||||||||||
> > |
| ||||||||||||||
Added: | |||||||||||||||
> > |
| ||||||||||||||
| |||||||||||||||
Changed: | |||||||||||||||
< < |
| ||||||||||||||
> > |
| ||||||||||||||
| |||||||||||||||
Added: | |||||||||||||||
> > |
| ||||||||||||||
| |||||||||||||||
Changed: | |||||||||||||||
< < | Related Topics: TWikiPreferences | ||||||||||||||
> > | Related Topics: TWikiPreferences | ||||||||||||||
Changed: | |||||||||||||||
< < |
| ||||||||||||||
> > |
| ||||||||||||||
Deleted: | |||||||||||||||
< < | |||||||||||||||
Behaviour Javascript framework ContribThis contrib packages the third-partyBehaviour 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).
On this page:
IntroductionFrom 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); UsageInclude the javascript file: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%/%TWIKIWEB%/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); ExampleIf 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.<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>Creates: | |||||||||||||||||||||||
Changed: | |||||||||||||||||||||||
< < |
| ||||||||||||||||||||||
> > |
| ||||||||||||||||||||||
|
Behaviour Javascript framework ContribThis contrib packages the third-partyBehaviour 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).
On this page:
IntroductionFrom 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); UsageInclude the javascript file: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%/%TWIKIWEB%/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); ExampleIf 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.<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>Creates: | |||||||||||||||||||||||
Changed: | |||||||||||||||||||||||
< < |
| ||||||||||||||||||||||
> > |
| ||||||||||||||||||||||
|
Behaviour Javascript framework ContribThis contrib packages the third-partyBehaviour 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).
On this page:
IntroductionFrom 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); UsageInclude the javascript file: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%/%TWIKIWEB%/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); ExampleIf 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.<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>Creates: | |||||||||||||||||||||||
Changed: | |||||||||||||||||||||||
< < |
| ||||||||||||||||||||||
> > |
| ||||||||||||||||||||||
|
Behaviour Javascript framework ContribThis contrib packages the third-partyBehaviour 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).
On this page:
IntroductionFrom 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); UsageInclude the javascript file: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%/%TWIKIWEB%/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); ExampleIf 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.<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>Creates: | |||||||||||||||||||||||
Changed: | |||||||||||||||||||||||
< < |
| ||||||||||||||||||||||
> > |
| ||||||||||||||||||||||
|
Behaviour Javascript framework ContribThis contrib packages the third-partyBehaviour 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).
On this page:
IntroductionFrom 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); UsageInclude the javascript file: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%/%TWIKIWEB%/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); ExampleIf 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.<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>Creates: | |||||||||||||||||||||||
Changed: | |||||||||||||||||||||||
< < |
| ||||||||||||||||||||||
> > |
| ||||||||||||||||||||||
|
Behaviour Javascript framework ContribThis contrib packages the third-partyBehaviour Javascript event library, available from http://bennolan.com/behaviour/. | |||||||||||||||||||||||
Changed: | |||||||||||||||||||||||
< < | Behaviour is suited to create javascript based interaction that degrades well when javascript is not available. | ||||||||||||||||||||||
> > | 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). | ||||||||||||||||||||||
Deleted: | |||||||||||||||||||||||
< < | Javascript file: behaviour.js (8.1K). The compressed javascript file (2.9K) has been processed by ShrinkSafe. | ||||||||||||||||||||||
Added: | |||||||||||||||||||||||
> > | |||||||||||||||||||||||
IntroductionFrom 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); | |||||||||||||||||||||||
Added: | |||||||||||||||||||||||
> > | |||||||||||||||||||||||
UsageInclude the javascript file: | |||||||||||||||||||||||
Changed: | |||||||||||||||||||||||
< < | |||||||||||||||||||||||
> > | |||||||||||||||||||||||
In your code you create a "rules" object, with sub-objects for each html element class name or id:
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); | |||||||||||||||||||||||
Changed: | |||||||||||||||||||||||
< < | Example | ||||||||||||||||||||||
> > | |||||||||||||||||||||||
Added: | |||||||||||||||||||||||
> > | 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. | |||||||||||||||||||||||
Changed: | |||||||||||||||||||||||
< < | TWiki Web Home | ||||||||||||||||||||||
> > | |||||||||||||||||||||||
Added: | |||||||||||||||||||||||
> > | MOUSE OVER ME | ||||||||||||||||||||||
Deleted: | |||||||||||||||||||||||
< < | The class name link%TWIKIWEB%%HOMETOPIC% will get expanded to linkTWikiWebHome
| ||||||||||||||||||||||
Creates: | |||||||||||||||||||||||
Changed: | |||||||||||||||||||||||
< < | TWiki Web Home | ||||||||||||||||||||||
> > | |||||||||||||||||||||||
Added: | |||||||||||||||||||||||
> > | MOUSE OVER ME | ||||||||||||||||||||||
Added: | |||||||||||||||||||||||
> > |
Leaking dangerBehaviour code leaks memory on Windows Explorer prior to version 7. To prevent leaking, set the element variable tonull :
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 | |||||||||||||||||||||||
Changed: | |||||||||||||||||||||||
< < |
| ||||||||||||||||||||||
> > | |||||||||||||||||||||||
Added: | |||||||||||||||||||||||
> > |
| ||||||||||||||||||||||
Added: | |||||||||||||||||||||||
> > | |||||||||||||||||||||||
LicenseBehaviour is freely distributable under the terms of an BSD license. | |||||||||||||||||||||||
Changed: | |||||||||||||||||||||||
< < | For details, see the Behaviour website. | ||||||||||||||||||||||
> > | For details see the Behaviour website. | ||||||||||||||||||||||
Added: | |||||||||||||||||||||||
> > | |||||||||||||||||||||||
Links | |||||||||||||||||||||||
Deleted: | |||||||||||||||||||||||
< < |
Contrib Info | ||||||||||||||||||||||
Changed: | |||||||||||||||||||||||
< < |
| ||||||||||||||||||||||
> > | Installation InstructionsYou 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 where TWiki is running. Like many other TWiki extensions, this module is shipped with a fully automatic installer script written using the BuildContrib. | ||||||||||||||||||||||
Added: | |||||||||||||||||||||||
> > |
Contrib Settings
Contrib Info
| ||||||||||||||||||||||
TWikiPreferences | |||||||||||||||||||||||
Changed: | |||||||||||||||||||||||
< < |
| ||||||||||||||||||||||
> > |
| ||||||||||||||||||||||
Behaviour Javascript framework ContribThis contrib packages the third-partyBehaviour 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.
On this page:
IntroductionFrom 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); UsageInclude the javascript file: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%/%TWIKIWEB%/BehaviourContrib/behaviour.compressed.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); ExampleIf 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.Creates: TWiki Web Home<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 Development
LicenseBehaviour is freely distributable under the terms of an BSD license. For details, see the Behaviour website.LinksContrib Info
|