jQuery – Docking Panels

Its been a while but I’m not far off releasing my cms and am just reworking the interface. Previously it had fixed panels at the top and left of the page but on some sites this caused the page to be squashed so I looked into creating docking panels and here is the result. It takes an unordered list with two marker classes and turns it into tabs and fly-out, dockable panels.

14/11/2010 – This is an alpha release and I will be adding more behaviours and tweaking based on feedback.

Features

• Creates vertical tabs
• Pops out panels
• Docks the panels
• Handles panel height and browser resizing

Compatibility

Tested to work in the following browsers:

Internet Explorer 7 & 8 (requires title wrapper with float:left to stop icon dropping)
Firefox 3.6
Safari 4
Chrome

Demo

There is a demo here. I’ve kept the styling simple.

Dependencies

jQuery fbisDockPanel requires jQuery 1.4 or above.

Download

Current version: 0.1.Alpha (14/11/2010) or demo.zip

Documentation

Not a lot to say really, just call the plugin as normal. At present the plugin provides no callbacks and only basic options.

$(document).ready(function() {
  $('ul.dock').fbisdockPanel({
    speed:150 				//speed of animation
    ,easing:'linear' 		//animation easing effect
    ,container:'#wrapper'	//the main content wrapper in your markup
  });
});

Any Plans for Improvements?

I’ve thrown this together in a day and will be improving it as I finish off the cms front end. The next version should be up in a few weeks. Heres the preliminary ideas:

• Dock all
• Undock all
• Dock/Undock from the tabs
• Relevant events and callbacks
• Sort out the vertical text issue in the dreaded IE!

Credits

This is HUGELY based on an example by Janko I’ve basically just plugin-ised it.