Finally unobtrusive javascript the simple way.
Like LowPro this library will map selectors to functions. The selectors will select elements in the DOM and will process the matched elements with the associated function.
Whats cool about this library is that it will reapply those rules only to the elements that haven’t had them applied to already. The is a Ajax hook that automatically reaplies the rules but again ONLY to those elements on the page that haven’t gotten the rules applied.
You can also explicitly reapply the rules when you need to, for instance to create a Jquery Ajax Request completion hook.
The library is tested with jspec.
Prototype 1.6 is required to use UnabJah.
<script type="text/javascript" src="/javascripts/prototype.js"> <script type="text/javascript" src="/javascripts/unabjah.js">
Unabjah simply maps CSS selectors to functions that take the matched elements. For example:
<script>
var unabjah = new UnabJah({
'li' : function(element){ element.addClassName('unabja_put_me_here'); },
'div': function(element){ element.addClassName('unabja_put_me_here_too'); }
})
</script>
That code will apply the function to every ‘li’ element on the page.
You can also add/overide rules at a later time.
unabjah.add_rules({'.horse_play': function(el){ el.addClassName('highlight'); }});
The selectors are effectively hash keys. There can only be one function per selector.
var unabjah = new Unabjah({
'li' : function(element){ element.addClassName('unabja_put_me_here') },
'li' : function(element){ element.addClassName('sorry_i_am_the_only_one_who_shows_up') }
})
Only the second rule will be executed on the ‘li’ elements.
IMPORTANT: It will do this on ‘dom:loaded’ automaticly. Don’t wrap the above code in function that is waiting for the dom to load or nothing will happen.
Now if you make an Ajax request the above code will cause any new ‘li’ elements on the page to be passed to the function on the completeion of the Ajax Request. So they will get the ‘unabja_put_me_here’ class as well.
If you find that you need to reapply the rules explicitly that you would:
unabjah.apply_rules();
You can also pass an element to this call to restrict the reapplication area. For performance?
unabjah.apply_rules($$('.newstuff')[0]);
Only elements below .newstuff will have the rules reapplied to.
I just wanted a slim tested library that doesn’t place any strange hacks into my namespace. It’s straight up Prototype 1.6 and it should stay fairly compatible with Prototype for a good while.
Unabjah is fairly well tested with Jspec. Look at the tests in the unabja.spec.js file to learn more about usage. To run the tests simply open spec.html in your browser of choice.
If you want to submit some nasty changes it would be nice to see some of dem tests yah mahn????
(The MIT License)
Copyright © 2009 Your Name <Your Email>
Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the ‘Software’), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED ‘AS IS’, WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.