I’ve been a huge fan of the YUI Library for quite some time now, using it in some form in almost all of my web projects done over the last 2+ years. Every now and then, I’m pleasantly surprised in just how useful it can be to me as a developer.
For instance, recently I’ve been working on building an application that will need an easy to use sortable list, that will fire off an event upon the list order changing. As simple as this sounds, it would require a lot of coding and cross browser testing to pull this one off with just javascript alone.
YUI 3 allowed me to accomplish the above in just a few minutes. I’m not even going to try to guess just how much time it’d of taken me to do on my own.
I made use of the Sortable Utility to make and unordered list sortable in just a few lines of code.
First I just added the YUI seed file to my page:
<script src="http://yui.yahooapis.com/3.1.1/build/yui/yui-min.js" type="text/javascript"><!--mce:0--></script> |
<script src="http://yui.yahooapis.com/3.1.1/build/yui/yui-min.js" type="text/javascript"><!--mce:0--></script>
Then just added a simple div and unordered list to my page:
Things I want
- G.I. Joe USS Flagg Aircraft Carrier
And added the script that brings the unordered list to life:
YUI().use('sortable', function(Y) {
var sortable = new Y.Sortable({
container: '#want-list',
nodes: 'li',
opacity: '.1'
});
}); |
YUI().use('sortable', function(Y) {
var sortable = new Y.Sortable({
container: '#want-list',
nodes: 'li',
opacity: '.1'
});
});
That was it, a fully user sortable list!
I also needed this list to fire an event when a list item order had been changed. The Drag & Drop (DD) Utility has some nifty events that conveniently work with the Sortable Utility. So, I just added the following to my above script:
var doSomething = function() {
alert('do something');
};
Y.DD.DDM.on('drop:hit', doSomething); |
var doSomething = function() {
alert('do something');
};
Y.DD.DDM.on('drop:hit', doSomething);
When a drop:hit event occurs, it calls the doSomething function. In this case the doSomething function fires up an alert that says “do something”. It’s pretty basic and a rather useless alert, but it does demo what I’m working to do.
Again, YUI 3 is so awesome, that I easily spent more time writing up this little post than I did in making my above requirements happen. That’s really amazing to me. YUI 3 documentation is great, tons of examples there too.
