jQuery.gridSplit - http://github.com/assetinfo/jQuery.gridSplit example

This is a grid system designed so that each cell can be "split" either horizontally or vertically. It is intended to be used as part of a larger system allowing the user free control of their environment. See bottom of JS for initialisation. To do - 1) ensure a common theme for all public functions, and tidy up the usage interface. (nested grids IDs are generated in a duff format. Needs sorting.) Last updated: 25/09/2015 Author: Graham Dixon Contact: [email protected] Licensed: MIT

HTML

<script src="https://code.jquery.com/jquery-1.9.1.js"></script>
<script src="https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<script src="https://rawgit.com/assetinfo/jquery.gridSplit/master/dist/jquery.gridsplit.js"></script>

     
        <div id="grid3" class="grid"></div>

CSS

body, html {
    height: 100%;
    margin: 0;
}

*, *:after {
    box-sizing: border-box;
}

.grid {
    padding-top: 0px;
    height: 25%;
    background: #bdbdbd;
    overflow: hidden;
    padding: 1% 1% 0% 1%;
    box-sizing: border-box;
}

.innerGrid {
    height: 100%;
    overflow: hidden;
    display: none;
}

.gridColumn {
    position: relative;
    left: 0px;
    height: 100%;
}

.gridCell {
    border: 1px solid #bdbdbd;
    height: 100%;
    display: block;
    background: #f7f7f7;
    -webkit-box-shadow: inset 0 0 2px #000;
    padding: 2px;
}

.gridCell .fillCell {
    height: 100%; 
    display: block;
}

.gridCell:after {
    content: ' ';
    border: 1px dashed rgba(190, 190, 190, 0.3);
    width: 100%;
    height: 100%;
    display: block;
}

.gridCell.hasContent:after {
  border: 0px;
}

.gridCell.hasChildren {
    padding: 0px
}

.gridCell.hasChildren>.horizrail {
    margin-top: -2px;
    margin-left: 0px;
}

.vertrail {
    height: 100%;
    width: 4px;
    display: block;
    position: absolute;
    cursor: ew-resize;
    margin-top: 0px;
    margin-left: -2px;
    z-index: 10000;
    padding-left: 1px;
}

.horizrail {
    height: 4px;
    width: 100%;
    display: block;
    position: absolute;
    cursor: ns-resize;
    margin-top: -5px;
    margin-left: -3px;
    padding-left: 1px;
    z-index: 10000;
}

.horizrail:hover:not(.ui-draggable-dragging), .vertrail:hover:not(.ui-draggable-dragging) {
    background: #848484;
}

.ui-draggable-dragging {
    background: green;
}

/* Just for demo */
#grid4 {
    padding: 1%;
}

JavaScript

$(function(){
		    
    // Make a complex grid using the splitting function


   
    

    
    // this grid is built using the returned meta from above but as a static object
    var grid3 = window.grid3 = $('#grid3').gridSplit({
        data: {"0":{"0":{"0":{"0":{"0":{"0":{"h":"50%"},"1":{"h":"50%"},"c":{"w":"50%"}},"1":{"0":{},"c":{"w":"50%"}},"h":"33.333333333333336%"},"1":{"h":"33.333333333333336%"},"2":{"h":"33.333333333333336%"},"c":{"w":"50%"}},"1":{"0":{"h":"33.333333333333336%"},"1":{"h":"33.333333333333336%"},"2":{"h":"33.333333333333336%"},"c":{"w":"25%"}},"2":{"0":{"h":"50%"},"1":{"h":"50%"},"c":{"w":"25%"}},"h":"33.333333333333336%"},"1":{"h":"33.333333333333336%"},"2":{"h":"33.333333333333336%"},"c":{"w":"12.5%"}},"1":{"0":{"h":"50%"},"1":{"0":{"0":{"h":"50%"},"1":{"h":"50%"},"c":{"w":"50%"}},"1":{"0":{},"c":{"w":"50%"}},"h":"50%"},"c":{"w":"6.25%"}},"2":{"0":{},"c":{"w":"6.25%"}},"3":{"0":{},"c":{"w":"25%"}},"4":{"0":{"h":"25%"},"1":{"h":"25%"},"2":{"h":"25%"},"3":{"h":"25%"},"c":{"w":"25%"}},"5":{"0":{"h":"50%"},"1":{"0":{"0":{"h":"100%"},"c":{"w":"50%"}},"1":{"0":{"h":"50%"},"1":{"h":"50%"},"c":{"w":"50%"}},"h":"50%"},"c":{"w":"25%"}}}
    });


 
});