Print Page - Layout expanding a region on mouse over instead of on click

Title: Layout expanding a region on mouse over instead of on click
Post by: jmwither on September 24, 2014, 01:20:12 PM

When using the Layout with a collapsed region you can expanded the region by clicking the ">>" icon, which will open the region and it stays open. Or you can click on the edge border and the region will open and stay until the mouse leaves the region.

How can I get this region to slide open with a mouseover event on its border instead of the default click event?
Also can the open/close animation time be changed?

Thanks,
-Mike

Title: Re: Layout expanding a region on mouse over instead of on click
Post by: stworthy on September 24, 2014, 08:24:01 PM

When collapse a region panel, its corresponding expand panel will be created. You can bind the 'mouseenter' event on this expand panel. When mouse enter it, expand the region panel.

Code:

<script type="text/javascript">
	function onCollapse(){
		var opts = $(this).panel('options');
		var ep = 'expand'+opts.region.substr(0,1).toUpperCase()+opts.region.substr(1);
		$('#layout').layout('panel',ep).unbind('.ep').bind('mouseenter.ep',function(){
			$('#layout').layout('expand',opts.region);
		})
	}
</script>
<div id="layout" ...>
<div data-options="region:'west',split:true,onCollapse:onCollapse" title="West" style="width:100px;"></div>
...
</div>

Title: Re: Layout expanding a region on mouse over instead of on click
Post by: jmwither on September 25, 2014, 09:14:07 AM

Thanks for responding.

Unfortunately - I get this error when I apply your example;

Using IE10:

Code:

SCRIPT438: Object doesn't support property or method 'call' 
jquery.easyui.min.js, line 2987 character 1

And the same in Chrome

Code:

Uncaught TypeError: undefined is not a function jquery.easyui.min.js:2987

I am using EasyUI 1.4

This is my layout (modified from EasyUI demo)

Code:

<body id="cc" class="easyui-layout">
  <div id="header" data-options="region:'north',border:false"  style="height:40px;background:#4682B4;padding:10px; color:#ffffff;"><h2>Sample</h2></div>
  <div data-options="region:'west',split:true, collapsed:false, onCollapse:'onCollapse'" id="navigator" title="Navigator" style="width:200px;padding:0;"></div>
  <div id="workspace" data-options="region:'center',title:'...'"></div>
  <div id="debug" data-options="region:'south',split:true, collapsed:false, iconCls:'icon-ok'" title="Debug" style="height:100px;padding:0;">
</body>

Title: Re: Layout expanding a region on mouse over instead of on click
Post by: stworthy on September 25, 2014, 06:45:54 PM

The 'onCollspae' must be a callback function, please try this:

Code:

  <div data-options="region:'west',split:true, collapsed:false, onCollapse:onCollapse" id="navigator" title="Navigator" style="width:200px;padding:0;"></div>

Title: Re: Layout expanding a region on mouse over instead of on click
Post by: gordis gmbh on July 08, 2020, 11:25:59 AM

I too was looking for this option to "slide open" the layout's region on mouseenter.

This approach however, keeps the region in expanded mode. How to get the region to "slide open" - like it does on mouseclick - and thereafter collapse on mouseleave? Thanks.

EasyUI Forum

General Category => EasyUI for jQuery => Topic started by: jmwither on September 24, 2014, 01:20:12 PM