golden-layout是一款强大的响应式窗口分割插件。他可以最大化窗口、最小化窗口、以及关闭窗口。还可以设置分割线，通过拖拽分割线来改变窗口的大小，并且这是响应式的。
使用方法
在HTML文件中引入。
<script type="text/javascript" src="//code.jquery.com/jquery-1.11.1.min.js"></script><script type="text/javascript" src="//golden-layout.com/assets/js/goldenlayout.min.js"></script><link type="text/css" rel="stylesheet" href="//golden-layout.com/assets/css/goldenlayout-base.css" /><link type="text/css" rel="stylesheet" href="//golden-layout.com/assets/css/goldenlayout-dark-theme.css" />
HTML结构
<div id="wrapper"> <div class="layoutA"></div> <div class="controls"> <p> Whenever the layout on the left emits a ‘stateChanged’ event, the layout on the right is destroyed and recreated with the left layout’s configuration. </p> </div> <div class="layoutB"></div></div>
CSS样式
*{ margin: 0; padding: 0;}body, html{ height: 100%; background: #000;}#wrapper{ width: 100%; height: 100%; position: relative;}#wrapper > *{ float: left; height: 100%;}.layoutA, .layoutB{ width: 45%;}.controls{ width: 10%;}.controls > div{ height: 50%;}.controls p{ padding: 30px; color: #fff; font: 12px/17px Arial, sans-serif; }table.test{ width: 100%; height: 100%; border-collapse: collapse; -webkit-user-select:none;}table.test td{ border: 1px solid #333; background: #222; cursor: pointer;}table.test td:hover{ background: #444;}table.test td.active{ background: orange;} 初始化插件
然后通过下面的代码来初始化插件。
var config = { settings:{showPopoutIcon:false}, content: [{ type: 'row', content:[{ type: 'stack', width: 60, activeItemIndex: 1, content:[{ type: 'component', componentName: 'testComponent', title:'Component 1' },{ type: 'component', componentName: 'testComponent', title:'Component 2' }] },{ type: 'column', content:[{ type: 'component', componentName: 'testComponent' },{ type: 'component', componentName: 'testComponent' }] }] }]};var TestComponent = function( container, state ) { this.element = $( '<table class="test">' + '<tr><td> </td><td> </td><td> </td><td> </td><td> </td></tr>' + '<tr><td> </td><td> </td><td> </td><td> </td><td> </td></tr>' + '<tr><td> </td><td> </td><td> </td><td> </td><td> </td></tr>' + '<tr><td> </td><td> </td><td> </td><td> </td><td> </td></tr>' + '<tr><td> </td><td> </td><td> </td><td> </td><td> </td></tr>' + '</table>' ); this.tds = this.element.find( 'td' ); this.tds.click( this._highlight.bind( this ) ); this.container = container; this.container.getElement().append( this.element ); if( state.tiles ) { this._applyState( state.tiles ); }};TestComponent.prototype._highlight = function( e ) { $( e.target ).toggleClass( 'active' ); this._serialize();};TestComponent.prototype._serialize = function() { var state = '', i; for( i = 0; i < this.tds.length; i++ ) { state += $( this.tds[ i ] ).hasClass( 'active' ) ? '1' : '0'; } this.container.extendState({ tiles: state });};TestComponent.prototype._applyState = function( state ) { for( var i = 0; i < this.tds.length; i++ ) { if( state[ i ] === '1' ){ $( this.tds[ i ] ).addClass( 'active' ); } }};$(function(){ var createLayout = function( config, container ) { var layout = new GoldenLayout( config, $(container) ); layout.registerComponent( 'testComponent', TestComponent ); layout.init(); return layout; }; var layoutA = createLayout( config, '.layoutA' ); var layoutB = createLayout( config, '.layoutB' ); layoutA.on( 'stateChanged',function(){ layoutB.destroy(); layoutB = createLayout( layoutA.toConfig(), '.layoutB' ); }); $(window).resize(function(){ layoutA.updateSize(); layoutB.updateSize(); })}); golden-layout插件的github网址为：https://github.com/golden-layout/golden-layout