jQuery UI Panel Widget Demo

Sandbox for the jQuery Panel UI widget.

HTML

<link rel="stylesheet" href="http://hiregenics.github.com/jquery-ui-widgets/css/ui.sdt.panel.css">
<script src="http://hiregenics.github.com/jquery-ui-widgets/src/jquery.ui.sdt.core.js"></script>
<script src="http://hiregenics.github.com/jquery-ui-widgets/src/jquery.ui.sdt.panel.js"></script>
<div id="demo1-parent">
   <div id="demo1-panel" class="horizontal">
      <div class="child1">
         <div class="vertical">
            <div class="child2">
               <div >
               </div>
            </div>
            <div class="child2">
               <div >
               </div>
            </div>
            <div class="child2">
               <div >
               </div>
            </div>
         </div>
      </div>
      <div class="child1">
         <div class="vertical">
            <div class="child2">
               <div >
               </div>
            </div>
            <div class="child2">
               <div >
               </div>
            </div>
            <div class="child2">
               <div >
               </div>
            </div>
         </div>
      </div>
      <div class="child1">
         <div class="vertical">
            <div class="child2">
               <div >
               </div>
            </div>
            <div class="child2">
               <div >
               </div>
            </div>
            <div class="child2">
               <div >
               </div>
            </div>
         </div>
      </div>
   </div>
</div>

CSS

.ui-sdt-panel > div {
    border: 1px solid green;
    padding: 2px;
    margin: 1px;
}

#demo1-parent {
   overflow: hidden;
   height: 400px;
   width: 400px;
}

.horizontal {
   height: 100%;
}

.vertical {
   width: 100%;
}

#demo1-panel .child1 {
   background-color: silver;
}

#demo1-panel .child2 {
   background-color: orange;
}

JavaScript

$('#demo1-panel').panel( 
     { 
       direction: 'horizontal', 
       sizing: [100,'auto','auto'] 
  });

$('#demo1-panel').find('div.child1 > div').panel(
     {
       direction: 'vertical',
       sizing: [100,'auto','auto']
  });