Difference between revisions of "Web2.0 Javascript use and maintenance"

From WormBaseWiki
Jump to navigationJump to search
Line 31: Line 31:
  
 
== tooltip ==
 
== tooltip ==
 +
using the clueTip jquery plugin
 +
To use, do as follow:
 +
<pre>
 +
  <a class="tooltip" href="#" title="title text.." rel="ajax call url(eg./rest/evidence/phenotype/wph.../description)">hint text</a>
 +
</pre>
 +
 
== dataTable ==
 
== dataTable ==
 
== update panel ==
 
== update panel ==

Revision as of 20:37, 27 July 2010

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>

tooltip

using the clueTip jquery plugin To use, do as follow: 

  <a class="tooltip" href="#" title="title text.." rel="ajax call url(eg./rest/evidence/phenotype/wph.../description)">hint text</a>

dataTable

update panel

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 ?
Retrieved from "https://wiki.wormbase.org/index.php?title=Web2.0_Javascript_use_and_maintenance&oldid=5476"