EasyUI Forum
May 08, 2024, 07:58:15 AM *
Welcome, Guest. Please login or register.

Login with username, password and session length
News:
 
   Home   Help Search Login Register  
EasyUI Forum > General Category > EasyUI for jQuery > Intercept size changing of a region in a easyui-layout
Pages: [1]
« previous next »
  Print  
Author Topic: Intercept size changing of a region in a easyui-layout  (Read 10728 times)
forum6691
Newbie
*
Posts: 39


View Profile
« 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.
Logged
stworthy
Administrator
Hero Member
*****
Posts: 3581


View Profile Email
« Reply #1 on: December 25, 2013, 05:02:37 PM »
Please try to apply 'onResize' event handler to center panel.
Code:
<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>
Logged
forum6691
Newbie
*
Posts: 39


View Profile
« Reply #2 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):

Code:
<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 ?
Logged
Pages: [1]
  Print  
« previous next »
 
Jump to:  

Powered by MySQL Powered by PHP Powered by SMF 1.1.18 | SMF © 2013, Simple Machines Valid XHTML 1.0! Valid CSS!