MooTools Plays Well With Rails

I wrote a little blurb a while ago about MooTools not playing well with Prototype (at least not the latest BETA version – we love the new stuff). This continues to be the case as there appears to be conflicts with the two libraries. So for now, we have to choose between Prototype/ Script.aculo.us or MooTools.

I am not one to give up without a fight, and I really wanted to use MooTools as it has some killer effects. This past Friday I sat down and figured out how to use it, and am happy to report that it is super easy. In fact, it took me about 5-10 minutes to recreate the main navigation menu on the Rails For All site using the Accordion plugin that MooTools provides. This tutorial will give a quick rundown of how to use MooTools in your Ruby on Rails applications.

I started the day by watching the Beauty in Design video tutorial, which I highly recommend. After that, I created a new Rails app, downloaded the newest version of MooTools, and included the mootools.js file in head tag of my application layout.

<%= javascript_include_tag 'mootools' %>

The next step was to create my navigation menu. For the sake of brevity, I will include two levels of the menu here. On the Rails For All site we have multiple language translations so we have the menu in a partial, rendering the language based on a session variable. Here’s a chunk of code from the menu partial (shortened for brevity).


  Select your language
    
      <%= link_to "English" %>
      <%= link_to "Spanish" %>
    
  
  Rails For All
    
      <%= link_to "Home", home_path %>
      <%= link_to "About", about_path %>
      <%= link_to "Mission and Principles", mission_and_principles_path %>
      <%= link_to "Sponsorship", sponsorship_path %>
      <%= link_to "Contact Us", contact_us_path %>

The list items in the top level list are effectively our menu headings, and will be the links that active the accordion effect and expand the menu. The top level list items then contain a list of items that are the “sub-menu” items that appears when the menu is expanded.

Now, to make the Accordion effect work, we need a little JavaScript magic. Adding the following script to our head tag turns our menu into the cool accordion effect we want.

We put this script into the head tags to ensure that the effect is applied when the pages are loaded. Let’s take a look at what we have here.

window.onload = function() {}

The above creates a new function that will fire off when the current window is loaded.

The Accordion effect takes three arguments: togglers, elements, and options. Togglers are the clickable elements that activate the Accordion effect (our top-level menu items); elements are the page elements that will have the effect applied to them (our sub-menu items); options are available options for the effect. Our one liner below creates an array of elements called title, that holds the page elements that have a class of “box_title.”

var titles = document.getElementsByClassName('box_title');

The next line of script creates an array of elements that have a class of “expand.”

var expanders = document.getElementsByClassName('expand');

To wrap it up, we add the following line to create the MooTools Accordion effect and make the magic happen.

var myEffect = new Fx.Accordion(titles, expanders, {show: 0});

The one option argument that we have added is show. We tell the effect to show the first item in the array of togglers, which automatically expands our first menu item.

That’s it! The result is a menu that works swiftly, allows us to have a more compact page with a great many menu options, and not overwhelm our users with too many menu options at once.

We definitely recommend MooTools. It has a small footprint, loads quickly, isn’t choppy in its application of effects, and is super easy to use. Download the latest and play around with it. Enjoy!

Does the code above look funky? Download a copy of the tutorial in PDF: ADS MooTools Tutorial

This entry was posted on Monday, May 14th, 2007 at 1:14 pm and is filed under The New Web, RoR Development. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

Michael Nutt Says:
May 14th, 2007 at 8:19 pm

On one of the projects I’m working on we decided to use Mootools with our Rails app, and our main issue we had with using Mootools was all of the stuff you get for free with Prototype. We wrote a MootoolsHelper that acted similarly to PrototypeHelper, so that you could use methods like link_to_remote and other Ajax methods, and it was mainly just a matter of changing syntax. However, in the end we weren’t able to get the last 10% working correctly and eventually moved back to Prototype.

Daniel Says:
May 15th, 2007 at 5:24 am

If you really wanted to use MooTools for its killer effects, why didnt you take moo.fx (moofx.mad4milk.net/#download)?

window.onload = function() {
var titles = document.getElementsByClassName(’box_title’);
var expanders = document.getElementsByClassName(’expand’);
// Create the accordion
var myEffect = new Fx.Accordion(titles, expanders, {show: 0});
}

Why do you do that, when using moo?

accordion = {
init : function() {
var titles = $$(’box_title’);
var expanders = $$(’expand’);
var boo = new Fx.Accordion(titles, expanders, { show : 0});
}
};

window.addevent(’domready’, accordion.init());

(I guess wordpress is killing the indention)

You might want to have a look at the mootools api.

oh and take a look at ujs4rails

Robert Dempsey Says:
May 15th, 2007 at 7:44 am

Daniel,

The download of MooTools that I got from [url]http://mootools.net/download[/url] included the effects. I also selected the accordion plugin for the menu.

I tried your code with my copy of MooTools that I downloaded from mootools.net and it didn’t seem to like it. Perhaps I am doing something incorrectly? I will grab a copy of moo.fx from the site you posted and try with that. Do you know if the effects included with the download from mootools.net are the same as the effects from moofx.madmilk.net?

Thank you for the clarification and pointing me in the right direction. I’ll definitely take a look at the libraries you linked to - can’t beat 3KB!

Daniel Says:
May 15th, 2007 at 8:54 am

Hey,

you definetly need more than the accordion package to let things flow smoothly. Check Element and Window.DomReady. Dependencies should be resolved automatically

Effects should be the same. moofx also brings accordion with it by default. There’s even a description how to use it with prototype:
[url]http://moofx.mad4milk.net/#prototype[/url]

Robert Dempsey Says:
May 15th, 2007 at 8:59 am

Thanks for the clarification. I grabbed everything in the mootools download. I will definitely check out the moofx script and get things going. Thank you again.

Navjeet Says:
June 27th, 2007 at 12:07 am

Robert,
When you did this test did you include Rails javascript files (prototype etc.). I am trying to use mootools to create Fx.Slide but if the I have javascript_include_tag :defaults in the head section, it does not work (canot instantiate Fx.Slide object) but once I take it out it works but then I loose all Rails javascript helpers.

Robert Dempsey Says:
June 27th, 2007 at 12:14 am

Navjeet,

While there are mootools that I hear will work with Prototype (check out the post from Daniel above), I was unable to get the download from the Mootools site and Prototype working together. If your experience is different let us know. Thanks.

joost Says:
July 10th, 2007 at 12:00 pm

I got this working thanks to your help! I admit, I shamelessly downloaded the mootools.js from your site. When I download it from mootools directly, no dice. Thanks a lot!

MooTools Plays Well With Rails

MooTools Plays Well With Rails

8 Responses to “MooTools Plays Well With Rails”

你可能感兴趣的:(职场,休闲,MooTools)