Print Page - Title in collapsed Layout Panel

Title: Title in collapsed Layout Panel
Post by: skellenb on June 29, 2012, 06:13:43 AM

Hi,

Is there a way to set/show the Title in a collapsed Layout Panel?

When collapsed east or west panel the Title should be visible rotated 90 degrees like in ExtJS
In north, south and Center Panel the Title should be visible like when its expanden...

Title: Re: Title in collapsed Layout Panel
Post by: stworthy on July 02, 2012, 02:16:37 AM

This feature is not available in current version. The code below shows a simple way to display the rotated title when the west panel is collapsed.

Code:

$(function(){
	var p = $('body').layout('panel','west').panel({
		onCollapse:function(){
			var title = $('body').layout('panel','west').panel('options').title;  // get the west panel title
			var p = $('body').data('layout').panels['expandWest'];  // the west expand panel
			p.html('<div style="-moz-transform: rotate(90deg);padding:6px 2px">'+title+'</div>');
		}
	});
});

Title: Re: Title in collapsed Layout Panel
Post by: skellenb on July 03, 2012, 03:07:51 PM

many thanks for the Help ;D

can i do something like this to show the title in collapsed east panel (closed at init with collapsed=true)??

Code:

$.parser.onComplete = function(){
	$('body').css('visibility','visible');
	var title = $('#mainlayout').layout('panel','east').panel('options').title;  // get the east panel title
	var p = $('#mainlayout').data('layout').panels['expandEast'];  // the east expand panel
	p.html('<div style="-moz-transform: rotate(90deg);-webkit-transform: rotate(90deg);-ms-transform: rotate(90deg);padding:6px 2px;font-weight:bold;">'+title+'</div>');
};

Title: Re: Title in collapsed Layout Panel
Post by: Pierre on March 04, 2014, 05:48:51 AM

Quote from: stworthy on July 02, 2012, 02:16:37 AM

This feature is not available in current version. The code below shows a simple way to display the rotated title when the west panel is collapsed.

Code:

$(function(){
	var p = $('body').layout('panel','west').panel({
		onCollapse:function(){
			var title = $('body').layout('panel','west').panel('options').title;  // get the west panel title
			var p = $('body').data('layout').panels['expandWest'];  // the west expand panel
			p.html('<div style="-moz-transform: rotate(90deg);padding:6px 2px">'+title+'</div>');
		}
	});
});

Hello
this code does not work for me. I'm using 1.3.5
Is there any other way to see collapsed panel Title?
Thanks.

Title: Re: Title in collapsed Layout Panel
Post by: Pierre on March 17, 2014, 10:21:28 AM

Hello Stworthy
do you (or anybody else) have some small working example of this?
Thanks!

Title: Re: Title in collapsed Layout Panel
Post by: mzeddd on March 18, 2014, 06:15:42 AM

would be good to have it as option so users can simply enamble/disable with title on collapsed layout and do not put extra code.

Title: Re: Title in collapsed Layout Panel
Post by: Pierre on March 20, 2014, 02:53:26 PM

mzeddd
do you have working example of using this?
thank you

Title: Re: Title in collapsed Layout Panel
Post by: mzeddd on March 20, 2014, 08:41:13 PM

Example from stworthy works fine in Firefox for me

But for Opera and other browsers it should be updated with another CSS transform parameters like in example from skellenb

So, if we put extra CSS parameters from skellenb's example to stworthy's example we get it working

Code:

<script>
$(function(){
	var p = $('body').layout('panel','west').panel({
		onCollapse:function(){
			var title = $('body').layout('panel','west').panel('options').title;  // get the west panel title
			var p = $('body').data('layout').panels['expandWest'];  // the west expand panel
			p.html('<div style="-moz-transform: rotate(90deg);padding:6px 2px;-ms-transform: rotate(90deg);-webkit-transform: rotate(90deg)">'+title+'</div>');
		}
	});
});	
</script>

Title: Re: Title in collapsed Layout Panel
Post by: Pierre on March 21, 2014, 07:10:58 AM

It works, thank you very much.

Title: Re: Title in collapsed Layout Panel
Post by: srg on March 27, 2014, 02:34:25 AM

I think this may help you.........

<div class="easyui-panel" id="" title="TITLE" data-options="collapsible:true,cls:'panelTopLevel'"></div>

EasyUI Forum

General Category => EasyUI for jQuery => Topic started by: skellenb on June 29, 2012, 06:13:43 AM