If you haven’t heard of Boxee, it’s a piece of software that enables you to manage your images, music and video files on your computer, whilst integrating with social networks and the web to bring in reviews about your content, and allowing you to shout out to the likes of Twitter about the stuff you’re into. Whilst the app is cool, we’re interested in the website, and their use of jQuery – so let’s check it out!
BlockUI
The main jQuery plugin that Boxee.tv is using is BlockUI. The key point to BlockUI is simple, it stops user interaction with your web application whilst your code is simulating synchronous ajax calls. Why do you need this? Well, if you don’t use it, the browser becomes locked whilst the ajax calls happen, and that’s not a good user experience.
BlockUI works by bringing modal windows up front to the user whilst behind the scenes, the neat stuff is happening. Boxee utilise this in many ways:
- When validating new user accounts
- Recovering Passwords
- When updating your account preferences
- When adding friends
- General user feedback
BlockUI is extremely flexible, and also includes some great documentation. Their demo page is also a great place to go to see how you can utilise this plugin…
Corner Plugin
For UI lovelyness, Boxee.tv has opted for the Corner Plugin. The plugin is very simple, it allows you to give custom corners to DIV elements, such as rounded, or notched. There are loads to choose from, and implementation is dead simple.
Autocomplete
Jörn Zaefferer’s Autocomplete plugin isn’t working in Boxee.tv as far as I can tell, however it is included in their “Find Friends” page. I assume when typing in friends names, live matches would appear, but it either doesn’t work for me, or is not fully implemented. To be clear, the plugin does work for me elsewhere, just not on Boxee.tv.
Other Plugins
Boxee.tv are also using the Dimensions plugin which gives you greater flexibility and cross browser compatibility for element positioning and obviously, dimensions 
. Dimensions is now included as part of the jQuery core, so no need to download it as a plugin. Just get the latest version of jQuery.
BGIframe is also being used to “ease the pain” of IE CSS z-index issues.
General Stuff
So what else? The guys at Boxee.tv are using alot of jQuery CSS property setting code – for example:
$('.field').blur(function()
{
this.style.backgroundImage = '';
this.style.backgroundColor = '#ffffff';
})
They’re also registering various .click() events for their BlockUI modal windows. Nothing too much to talk about there really!
Conclusion
I hope you found this short article a nice insight on how these guys are using jQuery. I hope to add more as we go along, so feel free to suggest any that you’d be interested in seeing by leaving me a comment.
 Learning jQuery  |
 JQuery In Action  |
 jQuery Reference Guide  |
