goldenlayout实现多窗口分割拖动效果代码-html代码-BFW代码库

goldenlayout实现多窗口分割拖动效果代码

代码语言：html

代码描述：goldenlayout实现多窗口分割拖动效果代码，还有窗口的关闭、放大、拖动排序。

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/jquery.1.11.min.js"></script>
    <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/goldenlayout-base.css">
    <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/goldenlayout-dark-theme.css">
    <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/goldenlayout.min.js"></script>
    <style>
        *{
          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;
        }
    </style>
</head>

<body>

    <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>

    <script>
        var config = {
          settings:{showPopoutIcon:true},
        	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: 'c.........完整代码请登录后点击上方下载按钮下载查看