Difference between revisions of "Web2.0 Javascript use and maintenance"
From WormBaseWiki
Jump to navigationJump to search (→Layout) |
(→toggle) |
||
Line 17: | Line 17: | ||
== toggle == | == toggle == | ||
+ | use the jquery slideToggle call | ||
+ | |||
+ | $(".toggle").live('click',function() { | ||
+ | $(this).toggleClass("active").next().slideToggle("fast"); | ||
+ | return false; | ||
+ | }); | ||
+ | |||
+ | In the template, do as follow: | ||
+ | <pre> | ||
+ | <div class="toggle">some hint text...</div> | ||
+ | <div>.... the content you want to toggle</div> | ||
+ | </pre> | ||
+ | |||
== tooltip == | == tooltip == | ||
== dataTable == | == dataTable == |
Revision as of 20:34, 27 July 2010
Contents
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
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 ?