We’ve all been enamored with the new javascript libraries lately. Some of the more popular ones are (in order of my preference) mootools, jQuery, YUI, and prototype/scriptaculous. All of the libraries are quite good, and you can learn from all of them. I ended up preferring mootools because of it had the smallest download at the time. jQuery’s brand new version has lightened up to be some real competition for mootools in size. YUI (Yahoo’s User Interface library) is totally awesome, but it does soooo much. I was looking for something a little simpler.
That may be the biggest drawback of having a framework. It is easy to get caught up in the “what a great feature - let’s add it to the framework” cycle. Soon, the bulk of features slows the client-side processing to a grind and adds 400k to the download of a first-time visitor.
There is a saying out there that “Mootools is the coffee - you add the sugar”. Corny as that sounds, it is true. The library stays out of your way and lets you still have good access to the elements, objects, and callbacks. It doesn’t try to do it all for you, and as such, becomes more usable for those exceptions where you need to bend from the simple solution.
Since an example is a much more effective way to demonstrate, let’s get right to one, shall we?
Let’s say we want to create an interface where the user is presented a list and that they may reorder that list. They need to be able to save that change as well. In the old days, we would have created a table with the list items accompanied with a “move up/move down” set of buttons along each one. It woks, but is not a real satisfying experience for the user - especially if they need to move an item all the way up or down the list. (click, click, click, click…).
OK, well, then, a sortable list where you can drag and rearrange the items is a much more intuitive way to accomplish that task - and more fun too.
The first item of business is to forget using a table and select the semantically correct element for the task - a list. We’ll be using an unordered list:
- wind farms
- hybrid vehicles
- renewable fuel sources
- recycled products
- solar energy
- non-incandescent light bulbs
Next, let’s add the appropriate javascript library into our document - in this case I’ll be using mootools.
I’ll create another script file to manage the page-specific code: I’ll call it “sortable.js”.
<script src="mootools.v1.1.js" language="javascript"></script>
<script src="sortable.js" language="javascript"></script>
The first step is to load a method that will automatically convert this list to into a sortable list. For that, we’ll use the window.event() method.
// fire the function when the DOM loads
window.addEvent('domready', function() {
new Sortables($('mySortList'));});
Sorting the list is easy, as you can see… really easy. But sorting a list on the client side can only be so useful. We need to be able to do something with the sorted list, or it is just a useless exercise.
So we’ll add a link or button that fires off another method - one that will loop through the list and build a variable with the sorted order. Then, we could submit that sorted order up the server using an asynchronous method (we’ll cover those in another post). But to keep things simple, we will just serve up an alert with our newly sorted list.
Here’s the reporting method:
sorted = {
display : function(){
var theList = $$('li');
var text = "";
theList.each(function(itm, idx){
text += itm.getText();
if(idx < theList.length - 1) text += ", ";
});
alert(text);
}
}
And the link to call it:
<a href="javascript: sorted.display()">save this order</a>
Here is a link to a working sample page that demos the script.
So, there you have it. You have created some pretty complicated functionality with just a couple of lines of script. The javascript library weighs in at 40k, which if used throughout a site averages out to next to nothing per page. Not only is it worth the download, but will save you hours of repetitive coding as well.
