Web2.0 Javascript use and maintenance

Layout

Javascript functions are splited into separate files and located under: /root/js/ eg:

• ajax.js
• effect.js
• jquery.tablescroll.js (this one is going to move/change in future)
• log.js
• search.js
• style.js
• miscellaneous.js

At the beginning of template/boilerplate/html, included them as following.

 [% FOREACH item IN JavaScripts %] 
  <script type="text/javascript" src="[% '/js/' _ item _ '.js' %]" ></script> 
 [% END %]

Some JS effects

toggle

use the jquery slideToggle call

      $(".toggle").live('click',function() {
             $(this).toggleClass("active").next().slideToggle("fast");
             return false;
       });

In the template, do as follow:

   <div class="toggle">some hint text...</div>
   <div>.... the content you want to toggle</div>

Future Note

• 1. In the future we could use a deployment script to combine+minify them into one file (eg. cat + YUI compressor)
• 2. consider namespace
• 3. probably move all under root/js/jquery ?