Recently i was very much attracted toward moo.fx library. For my website I was previously using scriptaculous, but because of the size problem i decided to move toward moo.fx. The size of moo.fx library is really pretty low(its just around 3kb).
As a matter of fact i would like to tell u that i just wanted to use moo.fx over prototype, i didn’t wanted to use mootools. Actually initially when the development of moo.fx started it was just built on top of prototype.js, but later on they moved to make mootools as underlying library in place of prototype.
During my study i couldn’t find any good article on web which can give me some example to use just moo.fx. The documentation available on http://docs.mootools.net is using mootools library. Other resources available on internet are using some older version of moo.fx. So i finally thought that it would be better it i write something which can be used directly to use moo.fx library.
I don’t believe in talking about code, its always better to understand code as it is.
The first example is to make an Accordion.
At first include the files in <head> section
<script type=”text/javascript” src=”js/prototype.js”></script>
<script type=”text/javascript” src=”js/moo.fx.js”></script>
<script type=”text/javascript” src=”js/accordion.js”></script>
Write following code in <body> section.
<div id=”accordion”>
<h3 class=”toggler”>
History
</h3>
<div class=”element”>
<p>
The first suggestion that all organisms may have had a common ancestor and diverged
Venus physique. </p>
</div>
<h3 class=”toggler”>
Evidence of universal common descent
</h3>
<div class=”element”>
<h4>
Common biochemistry and genetic code
</h4>
<p>
All known forms of life are based on the same fundamental biochemical organisation:
common descent. Analysis of the small differences in the genetic code has also
provided support for. </p>
<div style=”clear:both”></div>
</div>
<h3 class=”toggler”>
Examples of common descent
</h3>
<div class=”element”>
<h4>
Artificial selection
</h4>
<p>
Artificial selection offers remarkable examples of the amount of diversity that can
selection, like the ones below, occurred without the guidance of modern scientific
insight.
</p>
</div></div>
Now come the actual catch: Copy this code in last of body section.
<script type=”text/javascript”>
var h3s =document.getElementsByClassName(‘toggler’)
var divs = document.getElementsByClassName(‘element’)
var accordion = new Fx.Accordion(h3s, divs);
</script>
I think this would help you in creating accordion using moo.fx.
Wait for next blog, to use moo.fx in changing styles.
