Lightweight Customizable jQuery Split Layout Plugin - flexLayout
File Size: | 1.44 MB |
---|---|
Views Total: | 2909 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

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.