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

From WormBaseWiki
Jump to navigationJump to search
Line 38: Line 38:
  
 
== dataTable ==
 
== dataTable ==
 +
using the dataTable jquery plugin, in the template do:
 +
  [% dataTable_list(header array,data,table_id,styling) %]
 +
  eg. [% dataTable_list(['Gene','Coding sequences','Species','Experiment'],fields.rnai.data.1.aaData,'table_rnai_1') %]
 +
 +
data struction is an array of array reference and save in an hash with keyword "aaData", the reason to do this is dataTable can also load data from external file which requires to be in such JSON format.
 +
 +
  eg. { aaData=> [ ['a','b',..],
 +
                  ['c','d',..],
 +
                  ['e','f',..],
 +
                  ....
 +
                ]
 +
 +
note: the "styling" parameter is optional, it helps to further define the look&function of your dataTable, for more pls look at dataTable's website.
 +
 
== update panel ==
 
== update panel ==
  

Revision as of 20:45, 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

using the dataTable jquery plugin, in the template do: 

 [% dataTable_list(header array,data,table_id,styling) %]
 eg. [% dataTable_list(['Gene','Coding sequences','Species','Experiment'],fields.rnai.data.1.aaData,'table_rnai_1') %]

data struction is an array of array reference and save in an hash with keyword "aaData", the reason to do this is dataTable can also load data from external file which requires to be in such JSON format. 

 eg. { aaData=> [ ['a','b',..],
                  ['c','d',..],
                  ['e','f',..],
                  ....
                ]

note: the "styling" parameter is optional, it helps to further define the look&function of your dataTable, for more pls look at dataTable's website.

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=5477"