golden-layout – 强大的响应式窗口分割插件

创客云


golden-layout是一款强大的响应式窗口分割插件。他可以最大化窗口、最小化窗口、以及关闭窗口。还可以设置分割线,通过拖拽分割线来改变窗口的大小,并且这是响应式的。
使用方法
在HTML文件中引入

  1. <script type="text/javascript" src="//code.jquery.com/jquery-1.11.1.min.js"></script>
  2. <script type="text/javascript" src="//golden-layout.com/assets/js/goldenlayout.min.js"></script>
  3. <link type="text/css" rel="stylesheet" href="//golden-layout.com/assets/css/goldenlayout-base.css" />
  4. <link type="text/css" rel="stylesheet" href="//golden-layout.com/assets/css/goldenlayout-dark-theme.css" />

HTML结构

  1. <div id="wrapper">
  2.     <div class="layoutA"></div>
  3.     <div class="controls">
  4.         <p>
  5.             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.
  6.         </p>
  7.     </div>
  8.     <div class="layoutB"></div>
  9. </div>

CSS样式

  1. *{
  2.   margin: 0;
  3.   padding: 0;
  4. }
  5.  
  6. body, html{
  7.   height: 100%;
  8.   background: #000;
  9. }
  10.  
  11. #wrapper{
  12.   width: 100%;
  13.   height: 100%;
  14.   position: relative;
  15. }
  16.  
  17. #wrapper > *{
  18.   float: left;
  19.   height: 100%;
  20. }
  21.  
  22. .layoutA, .layoutB{
  23.   width: 45%;
  24. }
  25.  
  26. .controls{
  27.   width: 10%;
  28. }
  29.  
  30. .controls > div{
  31.   height: 50%;
  32. }
  33.  
  34. .controls p{
  35.   padding: 30px;
  36.   color: #fff;
  37.   font: 12px/17px Arial, sans-serif;
  38.  
  39.  
  40. }
  41.  
  42. table.test{
  43.   width: 100%;
  44.   height: 100%;
  45.   border-collapse: collapse;
  46.   -webkit-user-select:none;
  47. }
  48. table.test td{
  49.   border: 1px solid #333;
  50.   background: #222;
  51.   cursor: pointer;
  52. }
  53.  
  54. table.test td:hover{
  55.   background: #444;
  56. }
  57.  
  58. table.test td.active{
  59.   background: orange;
  60. }

初始化插件
然后通过下面的代码来初始化插件。

  1. var config = {
  2.   settings:{showPopoutIcon:false},
  3.   content: [{
  4.     type: 'row',
  5.     content:[{
  6.       type: 'stack',
  7.       width: 60,
  8.       activeItemIndex: 1,
  9.       content:[{
  10.         type: 'component',
  11.         componentName: 'testComponent',
  12.         title:'Component 1'
  13.       },{
  14.         type: 'component',
  15.         componentName: 'testComponent',
  16.         title:'Component 2'
  17.       }]
  18.     },{
  19.       type: 'column',
  20.       content:[{
  21.         type: 'component',
  22.         componentName: 'testComponent'
  23.       },{
  24.         type: 'component',
  25.         componentName: 'testComponent'
  26.       }]
  27.     }]
  28.   }]
  29. };
  30.  
  31. var TestComponent = function( container, state ) {
  32.   this.element = $(
  33.     '<table class="test">' +
  34.       '<tr><td> </td><td> </td><td> </td><td> </td><td> </td></tr>' +
  35.       '<tr><td> </td><td> </td><td> </td><td> </td><td> </td></tr>' +
  36.       '<tr><td> </td><td> </td><td> </td><td> </td><td> </td></tr>' +
  37.       '<tr><td> </td><td> </td><td> </td><td> </td><td> </td></tr>' +
  38.       '<tr><td> </td><td> </td><td> </td><td> </td><td> </td></tr>' +
  39.     '</table>'
  40.   );
  41.  
  42.   this.tds = this.element.find( 'td' );
  43.   this.tds.click( this._highlight.bind( this ) );
  44.   this.container = container;
  45.   this.container.getElement().append( this.element );
  46.  
  47.   if( state.tiles ) {
  48.     this._applyState( state.tiles );
  49.   }
  50. };
  51.  
  52. TestComponent.prototype._highlight = function( e ) {
  53.   $( e.target ).toggleClass( 'active' );
  54.   this._serialize();
  55. };
  56.  
  57. TestComponent.prototype._serialize = function() {
  58.   var state = '',
  59.     i;
  60.  
  61.   for( i = 0; i < this.tds.length; i++ ) {
  62.     state += $( this.tds[ i ] ).hasClass( 'active' ) ? '1' : '0';
  63.   }
  64.  
  65.   this.container.extendState({ tiles: state });
  66. };
  67.  
  68. TestComponent.prototype._applyState = function( state ) {
  69.   for( var i = 0; i < this.tds.length; i++ ) {
  70.     if( state[ i ] === '1' ){
  71.       $( this.tds[ i ] ).addClass( 'active' );
  72.     }
  73.   }
  74. };
  75.  
  76.  
  77. $(function(){
  78.   var createLayout = function( config, container ) {
  79.     var layout = new GoldenLayout( config, $(container) );
  80.     layout.registerComponent( 'testComponent', TestComponent );
  81.     layout.init();
  82.     return layout;
  83.   };
  84.  
  85.   var layoutA = createLayout( config, '.layoutA' );
  86.   var layoutB = createLayout( config, '.layoutB' );
  87.  
  88.   layoutA.on( 'stateChanged',function(){
  89.     layoutB.destroy();
  90.     layoutB =  createLayout( layoutA.toConfig(), '.layoutB' );
  91.   });
  92.  
  93.   $(window).resize(function(){
  94.     layoutA.updateSize();
  95.     layoutB.updateSize();
  96.   })
  97. });

Github网址:https://github.com/golden-layout/golden-layout

演示地址 免费下载
本文由 CityMall 整理发布如需转载,请注明出处:https://www.22vd.com/55838.html
云模板

发表评论