Skip to content
Lochemage edited this page Oct 21, 2014 · 15 revisions

Introduction

Try the demo here: http://docker.webcabin.org/

wcDocker (Web Cabin Docker) is a powerful window layout system. Its responsive design allows you to move, remove, create, and duplicate panels on the fly.

View the API documentation here: https://github.com/WebCabin/wcDocker/wiki

Features

  • Extremely responsive design!
  • Organization and duplicate panels at any time!
  • Easily create your own themes!
  • Comprehensive API Documentation!
  • Easily save and restore your layout!
  • Compatible with all major browsers, including IE8.
  • Completely free!

Change Log

Version: Trunk

  • Fixed issue with using normal CSS icons in the context menu.
  • Improved auto scrolling of tab items when clicked.
  • Created a new wcCustomTabs object for creating docker styled tab areas inside a panel.
  • Floating panels can now be modal.
  • Create your own splitter widget within a panel.
  • Create your own tabbed frame widget within a panel.
  • Create your own iFrame widget within a panel.

Version: 2.1.0

  • wcDocker now has Bower support for easy package management.
  • wcSplitter is now usable inside a panel.
  • Improved performance of panel resizing.
  • wcPanel.focus() now actually sets itself as the current active tab.
  • wcDocker.registerPanelType() has a new option {limit: Number} that limits the total number of copies for this panel.
  • New event type wcDocker.EVENT_VISIBILITY_CHANGED, triggered whenever the panel gains or loses visibility. Use wcPanel.isVisible() to retrieve the current state.
  • Reduced DOM changes during tab change and resize.
  • New event types wcDocker.EVENT_BEGIN_DOCK and wcDocker.EVENT_END_DOCK that trigger whenever the user is dragging a panel to a new location.
  • New event types wcDocker.EVENT_GAIN_FOCUS and wcDocker.EVENT_LOST_FOCUS that trigger whenever a panel is brought it and out of focus.
  • Floating panels no longer change size whenever a new panel is added to it as a tab.

Version: 2.0.0

  • Layout grid can now have a spacing size.
  • Layout grid can now be set to alternating row color.
  • wcLayout.item() added to retrieve an already existing item in the layout.
  • wcDocker can now send and receive events.
  • wcLayout can now batch large numbers of elements added without page refreshing between each.
  • wcPanel can now contain custom buttons that appear within the title bar.
  • wcDocker.basicMenu() now has an option to include the default menu options along with your custom ones.
  • wcDocker.basicMenu() can now accept a dynamic callback function that returns custom menu's at the time of the event.
  • New events added for resize start, resize end, move start, and move end.
  • Panels can now be set to hide their contents whenever they are resized.
  • wcDocker constructor now takes an options object.
  • wcDocker now has an option to disable the default context menu.
  • Panel tabs are now scrollable.
  • Icons are now supported using regular CSS or the Font-Awesome library http://fortawesome.github.io/Font-Awesome/.
  • wcDocker.registerPanelType() can now take an options object instead of just a single callback.
  • Fixed layout save/restore.
  • Fixed layout clear not actually removing elements.
  • Fixed compatibility with IE8.
  • Fixed tabs disappearing when the panel is too small to fit them.

Dependencies


Installation

wcDocker now uses bower for easy installation. You can install bower using npm:

npm install -g bower

This command will install bower globally, from there you can install wcDocker with the following command:

bower install wcdocker

Once installed, all of the source files will now be located in the bower_components folder and ready to link into your project:

<link rel="stylesheet" type="text/css" href="bower_components/jQuery-contextMenu/src/jquery.contextMenu.css"/>
<link rel="stylesheet" type="text/css" href="bower_components/font-awesome/css/font-awesome.css"/>
<link rel="stylesheet" type="text/css" href="bower_components/wcdocker/Build/wcDocker.min.css"/>

<script src="bower_components/jquery/dist/jquery.min.js"></script>
<script src="bower_components/jQuery-contextMenu/src/jquery.contextMenu.js"></script>
<script src="bower_components/jQuery-contextMenu/src/jquery.ui.position.js"></script>
<script src="bower_components/wcdocker/Build/wcDocker.min.js"></script>

You may also include any of the optional css themes found in the bower_components/wcdocker/Build/Themes/ folder.


License

MIT License

© 2014-2014 Jeff P. Houde (lochemage@gmail.com)

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.


Suggestions/Comments?

Please feel free to contact me, Jeff Houde (lochemage@gmail.com), for any information or to give feedback and suggestions. Also, if you are a web programmer, and believe you can help, please let me know!

Thank you

How-To

API Documentation:

wcDocker
wcPanel
wcLayout
wcSplitter

Custom Widgets:

wcTabFrame
wcIFrame

Clone this wiki locally