Layout expanding a region on mouse over instead of on click

EasyUI Forum

April 27, 2024, 07:51:12 AM

Welcome, Guest. Please login or register.

News:

Home

Help

EasyUI Forum > General Category > EasyUI for jQuery > Layout expanding a region on mouse over instead of on click

Pages: [1]

« previous next »

Author

Topic: Layout expanding a region on mouse over instead of on click (Read 9496 times)

jmwither

Newbie

Posts: 2

Layout expanding a region on mouse over instead of on click

« 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


	Logged

stworthy

Administrator
Hero Member

Posts: 3581

Re: Layout expanding a region on mouse over instead of on click

« Reply #1 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>


	Logged

jmwither

Newbie

Posts: 2

Re: Layout expanding a region on mouse over instead of on click

« Reply #2 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>


	Logged

stworthy

Administrator
Hero Member

Posts: 3581

Re: Layout expanding a region on mouse over instead of on click

« Reply #3 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>


	Logged

gordis gmbh

Full Member

Posts: 103

Re: Layout expanding a region on mouse over instead of on click

« Reply #4 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.


	Logged

Pages: [1]

« previous next »