Title: Intercept size changing of a region in a easyui-layout
Post by: forum6691 on December 25, 2013, 01:34:37 PM
I have implemented an easyui-layout with North, West, Center and South region
I try to intercept when an user who wants change size of a region, has finished to move separator between region West and Center with the mouse .
The id of my Est region is "we".
The aim is to resize elements inside of the Center region, especially a googlemap
I use this code but it is not OK . Nothing arrives.
var J = jQuery.noConflict();
J(document).ready(function(){
J('#we').layout({ // appel du plugin
onStopResize:function(item){
alert("resize");
}
});
});
Is someone could help me ? The documentation doesn't give any method for this.
Title: Re: Intercept size changing of a region in a easyui-layout
Post by: stworthy on December 25, 2013, 05:02:37 PM
Please try to apply 'onResize' event handler to center panel. <body class="easyui-layout">
<div data-options="region:'north',border:false" style="height:60px;"></div>
<div data-options="region:'west',split:true,title:'West'" style="width:150px;"></div>
<div data-options="region:'south',border:false" style="height:50px;"></div>
<div data-options="region:'center',title:'Center',
onResize:function(){console.log('r')}">
</div>
</body>
Title: Re: Intercept size changing of a region in a easyui-layout
Post by: forum6691 on December 26, 2013, 01:30:31 AM
Thanks stworthy, but nothing happens in using OnResize method Here is my code modified (javascript and html): <script type="text/javascript">
var J = jQuery.noConflict();
J(document).ready(function(){
J('#ce').layout({ // appel du plugin
//onStopResize:function(item){
onResize:function(width, height){
alert("resize");
}
});
});
</script>
</head>
<body>
<!-- Menu supérieur -->
<div style="background:#fafafa;padding:2px;width:200px;border:1px solid #ccc">
<a href="#" class="easyui-menubutton" menu="#mm" iconCls="icon-edit">Fonctions</a>
</div>
<div id="mm" class="easyui-menu" style="width:160px;">
<div data-options="name:'TR'">Mode Temps réel</div>
<div data-options="name:'TD'">Mode Temps différé</div>
</div>
<!-- fin du Menu supérieur -->
<div id="cc" class="easyui-layout" style="width:960px;height:800px;">
<div id="we" data-options="region:'west',title:'Régates',split:true" style="width:150px;">
<div id="ce" data-options="region:'center',title:'Carte'" style="padding:5px;background:#eee;">{GMAP}</div>
<div data-options="region:'south',title:'Log'">
<div class="easyui-layout" data-options="fit:true">
<div data-options="region:'north'" style="height:100px"></div>
<div data-options="region:'south'" style="height:30px;background:#eee;""></div>
</div>
</div>
</body>
Have you an idea ?
|