This time I will share jQuery Plugin and tutorial about Lightweight Customizable jQuery Split Layout Plugin – flexLayout, hope it will help you in programming stack.
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.
1 |
<script src="//code.jquery.com/jquery.min.js"></script> |
2 |
<script src="flexlayout.js"></script> |
2. Config the split layout using JavaScript arrays as follow:
03 |
// block1:block2:block3 = 1:2:3 |
07 |
// block2:block3 = 1:3 |
3. Render the split layout inside a specified container.
1 |
$('.container').flexlayout(layoutConfig); |
4. Pass the following options as the second parameter to the flexlayout() function.
01 |
$('.container').flexlayout(layoutConfig,{ |
16 |
bars: {flex: '0 0 1px', 'background-color': '#DEDEDE'} |
Change log:
2017-03-04
- fixed cached bars, cannot be found bug;
2017-03-02
This awesome jQuery plugin is developed by mr-beaver. For more Advanced Usages, please check the demo page or visit the official website.
