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.


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


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


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


jQuery fbisDockPanel requires jQuery 1.4 or above.


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


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() {
    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!


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

2 Responses to “jQuery – Docking Panels”

  1. Hello,

    For my information. I don’t see a option to download your jQuery fbisDockPanel code. It is also unclear for me if it is royalty free open source code. Can you please explain te status of the library?

    Met vriendelijke groet,
    Frank Gillebaard
    (The Netherlands)

  2. fbis says:

    Hi Frank,

    I’ve included the copyright in the library (Dual licensed under MIT and GPL 2+ licenses) and zipped up the demo. I’m using it in production and will updating the copy here soon. I’ll post when I update it. Also got a drag and drop tree-view which is coming soon 🙂

Leave a Reply

Your email address will not be published.

This site uses Akismet to reduce spam. Learn how your comment data is processed.