Lightweight Customizable jQuery Split Layout Plugin - flexLayout

flexLayout is a lightweight and highly customizable jQuery plugin used for generating a horizontal or vertical split layout with any number of resizable content sections. Heavily based on CSS3 flexbox mode. A great alternative to the legacy frame element.

Basic usage:

1. Place jQuery library and the jQuery flexLayout plugin' script at the bottom of the webpage.

<script src="//code.jquery.com/jquery.min.js"></script>
<script src="flexlayout.js"></script>

2. Config the split layout using JavaScript arrays as follow:

var layoutConfig = [

    // block1:block2:block3 = 1:2:3
    ['1', '2', '3'],

    // block1 = 100px
    // block2:block3 = 1:3
    ['100px', '1', '3']
    
]; 

3. Render the split layout inside a specified container.

$('.container').flexlayout(layoutConfig);

4. Pass the following options as the second parameter to the flexlayout() function.

$('.container').flexlayout(layoutConfig,{

  /*defines the height of the requesting element; '...string...'*/
  height: '100%',

  /*defines the width of the requesting element '...string...'*/
  width: '100%',

  /*defines the direction of the layout; 'h', 'v' or ['h', 'v', 'v', ...]*/
  dir: 'h',

  /*defines whether the width/height of created blocks can be adjusted or not, boolean or [boolean, boolean]*/
  adjust: false,

  /*defines the style of divide bars between created blocks, {...css object}, '...string of class name...', boolean or [..., ..., ..., ...]*/
  bars: {flex: '0 0 1px', 'background-color': '#DEDEDE'}

});

Change log:

2017-03-04

• fixed cached bars, cannot be found bug;

2017-03-02

• v0.3.1

---

This awesome jQuery plugin is developed by patrichu. For more Advanced Usages, please check the demo page or visit the official website.