Category Archives: JavaScript

Ext JS TabPanel plugin for draggable tabs

Posted on by

Ext JS 4 comes with a plugin for TabPanels to allow reordering tabs using drag and drop. There isn’t an equivalent for Ext JS 3, however.

I came across a useful extension of the Ext JS 3.x TabPanel to re-order tabs via drag and drop. It is implemented as a subclass of Ext.TabPanel, as Ext.ux.panel.DDTabPanel and a version of it includes a useful reorder event that is fired once a tab is dragged to a new position in the TabPanel.

I refactored it from a subclass of Ext.TabPanel to a plugin so the original functionality is unchanged. See a demo and get the code. Continue reading →

Jonathan Snook’s jQuery Background Animation as a Plugin

Posted on by

Jonathan Snook recently posted a really neat background animation technique using jQuery. This was something I was looking for and it seemed like a good candidate for a jQuery plugin.

So, following on from my recent post about turning jQuery code into richer, unit testable plugin code, I thought I’d describe the quick process of doing so here. (It’s worth reading Snook’s post first though!) Continue reading →

Turn your jQuery code into a richer, unit testable, plugin

Posted on by

I find myself increasingly using jQuery as my JavaScript framework of choice.

It’s by-line of “write less, do more” really seems apt.

But sometimes, by writing just that little bit extra, you can do even more.

For example, I often try to do the following:

  • Make most jQuery code into reusable plugins
  • Use the jQuery plugin development pattern for added flexibility
  • Use QUnit to unit test JavaScript
  • Combine the two approaches to drive out a richer API for the plugin

By unit testing with QUnit, I find I often need to trigger additional events or add additional code from within the plugin so the test can be meaningful.

But this extra code isn’t only useful for testing, it becomes a useful part of the plugin’s API, improving its functionality and flexibility without sacrificing maintainability and readability of the code.

I’ll try to demonstrate that in this post. Continue reading →

Google to host a number of JavaScript libraries

Posted on by

Google just announced their AJAX Library API, where Google will host many major JavaScript frameworks for you, such as jQuery, Prototype, Mootools, Dojo, etc.

This will allow you to write web pages that refer to those scripts rather than copies on your own site, reducing your bandwidth, but also leveraging the infrastructure capabilities of Google, such as their content distributed network (which means users would be served those files from a location much closer to them), properly compressed, minified, cacheable files, etc. Continue reading →