当前位置: 代码迷 >> Web前端 >> 动态创办Layout
  详细解决方案

动态创办Layout

热度:6269   发布时间:2013-02-26 00:00:00.0
动态创建Layout
一开始是怎么都不能动态增加的,后来看到了http://bbs.btboys.com/thread-638-1-1,才把问题解决.

<body>	<div id="cc" style="width:600px;height:400px;">		<div region="center" title="center title" style="padding:5px;background:#eee;">4</div>	</div></body>


js代码:
/** * $('#cc').layout();//一定先运行这句来实例化,下面才能动态增加部件,同时,html一定先存在一个region 就是center,否则会报错   * @param {Object} '#cc' */$(document).ready(function(){    $('#cc').layout();	  	$('#cc').layout('add', {        region: 'west',        width: 180,        title: 'WEST Title',        split: true,        tools: [{            iconCls: 'icon-add',            handler: function(){                alert('add')            }        }, {            iconCls: 'icon-remove',            handler: function(){                alert('remove')            }        }]    });	$('#cc').layout('add', {        region: 'east',        width: 180,        title: 'EAST Title',        split: true,        tools: [{            iconCls: 'icon-add',            handler: function(){                alert('add')            }        }, {            iconCls: 'icon-remove',            handler: function(){                alert('remove')            }        }]    });	$('#cc').layout('add', {        region: 'north',        width: 180,		height:100,//这个一定存在        title: 'NORTH Title',        split: true,        tools: [{            iconCls: 'icon-add',            handler: function(){                alert('add')            }        }, {            iconCls: 'icon-remove',            handler: function(){                alert('remove')            }        }]    });	$('#cc').layout('add', {        region: 'south',        width: 180,		height:100,//这个一定存在        title: 'SOUTH Title',        split: true,        tools: [{            iconCls: 'icon-add',            handler: function(){                alert('add')            }        }, {            iconCls: 'icon-remove',            handler: function(){                alert('remove')            }        }]    });});