使用方法
在HTML文件中引入。
<scripttype="text/javascript"src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<scripttype="text/javascript"src="//golden-layout.com/assets/js/goldenlayout.min.js"></script>
<linktype="text/css"rel="stylesheet"href="//golden-layout.com/assets/css/goldenlayout-base.css"/>
<linktype="text/css"rel="stylesheet"href="//golden-layout.com/assets/css/goldenlayout-dark-theme.css"/>
HTML结构
<divid="wrapper">
<divclass="layoutA"></div>
<divclass="controls">
<p>
Wheneverthelayoutontheleftemitsa‘stateChanged’event,thelayoutontherightisdestroyedandrecreatedwiththeleftlayout’sconfiguration.
</p>
</div>
<divclass="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%;
}
.controlsp{
padding:30px;
color:#fff;
font:12px/17pxArial,sans-serif;
}
table.test{
width:100%;
height:100%;
border-collapse:collapse;
-webkit-user-select:none;
}
table.testtd{
border:1pxsolid#333;
background:#222;
cursor:pointer;
}
table.testtd:hover{
background:#444;
}
table.testtd.active{
background:orange;
}
初始化插件
然后通过下面的代码来初始化插件。
varconfig={
settings:{showPopoutIcon:false},
content:[{
type:'row',
content:[{
type:'stack',
width:60,
activeItemIndex:1,
content:[{
type:'component',
componentName:'testComponent',
title:'Component1'
},{
type:'component',
componentName:'testComponent',
title:'Component2'
}]
},{
type:'column',
content:[{
type:'component',
componentName:'testComponent'
},{
type:'component',
componentName:'testComponent'
}]
}]
}]
};
varTestComponent=function(container,state){
this.element=$(
'<tableclass="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(){
varstate='',
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(vari=0;i<this.tds.length;i++){
if(state[i]==='1'){
$(this.tds[i]).addClass('active');
}
}
};
$(function(){
varcreateLayout=function(config,container){
varlayout=newGoldenLayout(config,$(container));
layout.registerComponent('testComponent',TestComponent);
layout.init();
returnlayout;
};
varlayoutA=createLayout(config,'.layoutA');
varlayoutB=createLayout(config,'.layoutB');
layoutA.on('stateChanged',function(){
layoutB.destroy();
layoutB=createLayout(layoutA.toConfig(),'.layoutB');
});
$(window).resize(function(){
layoutA.updateSize();
layoutB.updateSize();
})
});
如果您觉得本文的内容对您的学习有所帮助：
关键字：
jQuery