布局框架

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

也想出现在这里?联系我们
面包多

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

服务范围 1、专业提供WordPress主题、插件汉化、优化、PHP环境配置等服务请详询在线客服
2、本站承接 WordPress、DedeCMS、ThinkPHP 等系统建站、仿站、开发、定制等服务
3、英文模板(主题)安装费用为120元/次,汉化主题首次免费安装(二次安装30元/次)
售后时间 周一至周五(法定节假日除外) 10:00-22:00
免责声明 本站所提供的模板(主题/插件)等资源仅供学习交流,若使用商业用途,请购买正版授权,否则产生的一切后果将由下载用户自行承担,有部分资源为网上收集或仿制而来,若模板侵犯了您的合法权益,请来信通知我们(Email: 2107117185@qq.com),我们会及时删除,给您带来的不便,我们深表歉意!
也想出现在这里?联系我们
360uxc
免费下载
(0)

本文由 云模板 作者:PetitQ 发表,转载请注明来源!

也想出现在这里?联系我们
创客主机

热评文章

发表评论

精彩推荐

Ashade - 作品展示摄影相册WordPress汉化主题

Envato Affiliates

本站承接 WordPress / DedeCMS / ThinkPHP 等
系统建站、仿站、开发、定制等业务!

嘿,欢迎咨询!